mozilla

Version 286579 von Farben

  • Adressname der Version: CSS/Farben
  • Titel der Version: Farben
  • ID der Version: 286579
  • Erstellt:
  • Autor: fscholz
  • Aktuelle Version? Nein
  • Kommentar 12 words added, 12 words removed
Schlagwörter: 

Inhalt der Version

{{ CSSRef() }}

Übersicht

Viele CSS Eigenschaften, wie zum Beispiel color, background-color oder border-color akzeptieren Farbwerte.

HTML/SVG/X11  Farbnamen

Farbnamen wie zum Beispiel red, blue, brown, lightseagreen etc.  Siehe auch CSS3 Color.

(Mausover zum Anzeigen der Farbnamen)                                                                               !!                                                                                        !!                                           !!                                                                      !!    !!                                                                                                                !!                              

Hinweis: Im Internet Explorer gibt es Unterschiede bei der Schreibweise:
grey, darkgrey, darkslategrey, dimgrey, lightgray, lightslategrey
gray, darkgray, darkslategray, dimgray, lightgrey, lightslategray

transparent Keyword {{ Gecko_minversion_inline(1.9) }}

Komplett durchsichtig. Der berechnete Wert ist rgba(0,0,0,0).
In CSS 2.1 ist transparent nur für background und border erlaubt.
In CSS 3 gilt dieser Wert auch für color und andere Eigenschaften.
Siehe auch: Browser Kompatibilität.

currentColor Keyword

Der Wert der color Eigenschaft eines Elementes.
Bespiel:

<div style="color:darkred">
 Dieser Text ist dunkelrot mit einer dunkelroten Linie darunter.
  <div style="background:currentcolor; height:1ex"></div>
 Noch mehr Text.
</div> 
Dieser Text ist dunkelrot mit einer dunkelroten Linie darunter.
.
Noch mehr Text.

 

RGB (rot-grün-blau)

Hexadezimale Schreibweise #RRGGBB und #RGB
"#", gefolgt von sechs hexadezimalen Zeichen (0-9, A-F).
"#", gefolgt von drei hexadezimalen Zeichen (0-9, A-F).
Die Schreibweise mit drei Zeichen (#RGB) und die mit sechs Zeichen (#RRGGBB) sind gleich.
Beispiel: #f03 und #ff0033 ergeben die gleiche Farbe.
Funktionale Schreibweise rgb(R,G,B)
"rgb", gefolgt von drei Ganzzahlen oder drei prozentualen Werten.
Der Wert 255 bezieht sich auf 100% und auf F oder FF in der hexadezimalen Notation.
/* Die folgenden Beispiele setzen alle die gleiche Farbe fest */
 
 #f03
 #F03
 #ff0033
 #FF0033
 rgb(255,0,51)
 rgb(255, 0, 51)
 rgb(255, 0, 51.2) /* Kommazahlen sind nicht möglich. */ 
 rgb(100%,0%,20%)
 rgb(100%, 0%, 20%)
 rgb(100%, 0, 20%) /* Ganzzahlen und prozentuale Werte dürfen nicht gemischt in einer rgb() Funktion auftreten. */

HSL (hue-saturation-lightness) hsl(H,S,L)

Der Vorteil der HSL-Schreibweise gegenüber der RGB-Schreibweise ist, dass es z.B. einfacher ist, mehrere Farben zu definieren, die den gleichen Farbton (hue) haben, sich aber durch unterschiedliche Helligkeit (lightness) und Sättigungen (saturation) unterscheiden sollen.

Der Farbton (hue) wird durch einen Winkel (ohne Einheit) angegeben und bezieht sich auf den Farbkreis.
Definitionsgemäß ist rot=0=360, grün=120, und blau=240. Die weiteren Farben verteilen sich entsprechend. Negative Werte und solche die größer als 360 sind werden umgerechnet (-120=240 und 480=120).

Sättigung und Helligkeit werden durch Prozentzahlen angegeben.
100% bedeutet volle Sättigung, und 0% bedeutet eine Abstufung von grau.
100% Helligkeit ist weiß, 0% Helligkeit ist schwarz, und 50% Helligkeit ist "normal".

hsl(0,  100%,50%)    /* red */   
hsl(30, 100%,50%)                 
hsl(60, 100%,50%)                
hsl(90, 100%,50%)                
hsl(120,100%,50%)    /* green */ 
hsl(150,100%,50%)                
hsl(180,100%,50%)                
hsl(210,100%,50%)                
hsl(240,100%,50%)    /* blue */  
hsl(270,100%,50%)                
hsl(300,100%,50%)                
hsl(330,100%,50%)                
hsl(360,100%,50%)    /* red */   

hsl(120,100%,25%)    /* dark green */  
hsl(120,100%,50%)    /* green */       
hsl(120,100%,75%)    /* light green */ 

hsl(120,100%,50%)    /* green */  
hsl(120, 67%,50%)                 
hsl(120, 33%,50%)                 
hsl(120,  0%,50%)                 

hsl(120, 60%,70%)    /* pastel green */ 

RGBa (rot-grün-blau-alpha) rgba(R,G,B,a) {{ Gecko_minversion_inline(1.9) }}

Erweitert das RGB Farbmodell um "alpha", um die Deckkraft einer Farbe festzulegen.
a steht für die Deckkraft: 0=durchsichtig; 1=deckend;

rgba(255,0,0,0.1)    /* 10% deckendes rot */  
rgba(255,0,0,0.4)    /* 40% deckendes rot */  
rgba(255,0,0,0.7)    /* 70% deckendes rot */  
rgba(255,0,0,  1)    /* komplett deckendes rot */ 

HSLa (hue-saturation-lightness-alpha) hsla(H,S,L,a) {{ Gecko_minversion_inline(1.9) }}

Erweitert das HSL Farbmodell um "alpha", um die Deckkraft einer Farbe festzulegen.
a steht für die Deckkraft: 0=durchsichtig; 1=deckend;

hsla(240,100%,50%,0.05)   /* 5% deckendes blau */   
hsla(240,100%,50%, 0.4)   /* 40% deckendes blau */  
hsla(240,100%,50%, 0.7)   /* 70% deckendes blau */  
hsla(240,100%,50%,   1)   /* komplett deckendes blau */ 

Systemfarben

Nicht alle Systemfarben werden auf allen Systemen unterstützt. Eine Benutzung auf öffentlichen Webseiten ist missbilligt (deprecated).

ActiveBorder
Rahmenfarbe eines aktiven Fensters
ActiveCaption
Titelleistenfarbe eines aktiven Fensters
AppWorkspace
Hintergrundfarbe einer Anwendung mit Multiple Document Interfaces
Background
Desktop Hintergrundfarbe
ButtonFace
Farbe der Fläche eines 3-Dimensionalen Elements
ButtonHighlight
Dunkle Schattenfarbe für 3-Dimensionale Elemente
ButtonShadow
Schattenfarbe für 3-Dimensionale Elemente
ButtonText
Textfarbe von Buttons
CaptionText
Textfarbe in Fenstertiteln
GrayText
Graue (deaktivierte) Textfarbe
Highlight
Farbe der ausgewählten Einträge in einem Bedienelement
HighlightText
Textarbe ausgewählter Einträge in einem Bedienelement
InactiveBorder
Rahmenfarbe eines inaktiven Fensters
InactiveCaption
Titleleistenfarbe eines inaktiven Fensters
InactiveCaptionText
Textfarbe von Titeln inaktiver Fenstern
InfoBackground
Hintergrundfarbe von Tooltipps
InfoText
Textfarbe für Tooltipps
Menu
Menü Hintergrundfarbe
MenuText
Textfarbe in Menüs
Scrollbar
Graue Scrollbarbereichsfarbe
ThreeDDarkShadow
Dunkle Schattenfarbe für 3-Dimensionale Elemente (für Seiten die dem Licht abgewandt sind)
ThreeDFace
Hintergrundfarbe der Fläche für 3-Dimensionale Elemente
ThreeDHighlight
Hervorhebungsfarbe für 3-Dimensionale Elemente
ThreeDLightShadow
Helle Schattenfarbe für 3-Dimensionale Elemente (für Seiten die dem Licht zugewandt sind)
ThreeDShadow
Schattenfarbe für 3-Dimensionale Elemente
Window
Fensterhintergrund
WindowFrame
Hintergrund eines Frames im Fenster
WindowText
Farbe des Texts in Fenstern

Mozilla Erweiterungen

-moz-ButtonDefault
Rahmenfarbe eines DefaultButtons in einer Dialogbox
-moz-ButtonHoverFace
Hintergrundfarbe eines gehoverten Buttons
-moz-ButtonHoverText
Textfarbe eines gehoverten Buttons
-moz-CellHighlight
Hintergrundfarbe für ausgewählte Items in einem Verzeichnisbaum
-moz-CellHighlightText
Textfarbe für ausgewählte Items in einen Verzeichnisbaum
-moz-Combobox {{ Gecko_minversion_inline("1.9.2") }}
Hintergrundfarbe für Comboboxen
-moz-ComboboxText {{ Gecko_minversion_inline("1.9.2") }}
Textfarbe für Comboboxen
-moz-Dialog
Hintergrundfarbe für Dialogboxen
-moz-DialogText
Textfarbe für Dialogboxen
-moz-dragtargetzone
???
-moz-EvenTreeRow {{ Gecko_minversion_inline(1.9) }}
Hintergrundfarbe für gerade nummerierte Zeilen in einem Baum
-moz-Field
Textfeld Hintergrundfarbe
-moz-FieldText
Textfeld Vordergrundfarbe
-moz-html-CellHighlight {{ Gecko_minversion_inline(1.9) }}
Hintergrundfarbe für ein markiertes Item in einer HTML Auswahl
-moz-html-CellHighlightText {{ Gecko_minversion_inline(1.9) }}
Textfarbe für ein markiertes Item in einer HTML Auswahl
-moz-mac-accentdarkestshadow
-moz-mac-accentdarkshadow
-moz-mac-accentface
-moz-mac-accentlightesthighlight
-moz-mac-accentlightshadow
-moz-mac-accentregularhighlight
-moz-mac-accentregularshadow
-moz-mac-chrome-active
{{ Gecko_minversion_inline("1.9.1") }}
-moz-mac-chrome-inactive
{{ Gecko_minversion_inline("1.9.1") }}
-moz-mac-focusring
-moz-mac-menuselect
-moz-mac-menushadow
-moz-mac-menutextselect
-moz-MenuHover
Hintergrundfarbe für gehoverte Menuitems
-moz-MenuHoverText
Vordergrundfarbe für gehoverte Menuitems
-moz-MenuBarText {{ Gecko_minversion_inline("1.9.2") }}
Textfarbe in Menubars
-moz-MenuBarHoverText
Vordergrundfarbe für gehoverte Menubars
-moz-nativehyperlinktext {{ Gecko_minversion_inline("1.9.1") }}
Standard Hyperlink Farbe
-moz-OddTreeRow {{ Gecko_minversion_inline(1.9) }}
Hintergrundfarbe für ungerade nummerierte Zeilen in einem Baum
-moz-win-communicationstext {{ Gecko_minversion_inline(1.9) }}
Textfarbe von Objekten mit appearance:-moz-win-communications-toolbox
-moz-win-mediatext {{ Gecko_minversion_inline(1.9) }}
Textfarbe von Objekten mit appearance:-moz-win-media-toolbox

Mozilla Erweiterungen: Bevorzugte Benutzerfarben

-moz-activehyperlinktext
Bevorzugte Benutzerfarbe für die Textfarbe von aktiven Links
-moz-hyperlinktext
Bevorzugte Benutzerfarbe für unbesuchte Links
-moz-visitedhyperlinktext
Bevorzugte Benutzerfarbe für besuchte Links

Spezifikation

Browser Kompatibilität

Browser #RRGGBB | #RGB rgb(R,G,B) hsl(H,S,L) rgba(R,G,B,a) hsla(H,S,L,a) currentColor transparent
Internet Explorer 3.0 4.0 --- --- --- --- [*]
Firefox (Gecko) 1.0 (1.0) 1.0 (1.0) 1.0 (1.5) 3.0 (1.9) 3.0 (1.9) 1.5 (1.8) 3.0 (1.9)
Opera 3.5 3.5 9.5 10.0 10.0 9.5 10.0
Safari (WebKit) 1.0 (85) 1.0 (85) 3.1 (525) 3.1 (525) 3.1 (525) 4.0 (528) 3.1 (525)

[*]  Der Internet Explorer ab Version 7.0 unterstützt den Wert transparent, gemäß CSS 2.1 Standard, nur für background und border. Wenn color:transparent angegeben wird, wird schwarz dargestellt.

Siehe auch

color, background-color, border-color, opacity

{{ languages( { "en": "en/CSS/color_value", "fr": "fr/CSS/valeur_de_couleur", "ja": "ja/CSS/color_value" } ) }}

Quelltext der Version

<p>{{ CSSRef() }}</p>
<h3 id=".C3.9Cbersicht">Übersicht</h3>
<p>Viele CSS Eigenschaften, wie zum Beispiel <a href="/de/CSS/color" title="de/CSS/color"><code>color</code></a>, <a href="/de/CSS/background-color" title="de/CSS/background-color"><code>background-color</code></a> oder <a href="/de/CSS/border-color" title="de/CSS/border-color"><code>border-color</code></a> akzeptieren Farbwerte.</p>
<h3 id="HTML/SVG/X11.C2.A0_Farbnamen">HTML/SVG/X11  Farbnamen</h3>
<p>Farbnamen wie zum Beispiel<code> red, blue, brown, lightseagreen </code>etc.  Siehe auch <a class="external" href="http://www.w3.org/TR/css3-color/#svg-color" title="http://www.w3.org/TR/css3-color/#svg-color">CSS3 Color</a>.</p>
<p style="line-height:1.8em; font-family:monospace; cursor:help; overflow:hidden; text-shadow:-1px -1px white">(Mausover zum Anzeigen der Farbnamen) <span style="border:solid;border-width:1px 0 0 1px;background:white" title="White">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:WhiteSmoke" title="WhiteSmoke">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Snow" title="Snow">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:MistyRose" title="MistyRose">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Seashell" title="Seashell">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Linen" title="Linen">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:AntiqueWhite" title="AntiqueWhite">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:BlanchedAlmond" title="BlanchedAlmond">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:PapayaWhip" title="PapayaWhip">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:OldLace" title="OldLace">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:FloralWhite" title="FloralWhite">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Cornsilk" title="Cornsilk">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:LemonChiffon" title="LemonChiffon">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Beige" title="Beige">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:LightGoldenrodYellow" title="LightGoldenrodYellow">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Ivory" title="Ivory">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:LightYellow" title="LightYellow">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Honeydew" title="Honeydew">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:MintCream" title="MintCream">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Azure" title="Azure">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:LightCyan" title="LightCyan">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:AliceBlue" title="AliceBlue">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Lavender" title="Lavender">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:GhostWhite" title="GhostWhite">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:LavenderBlush" title="LavenderBlush">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Gainsboro" title="Gainsboro">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:LightGray" title="LightGray">!!</span> <span style="border:solid;border-width:1px 0 0 1px;background:LightGrey" title="LightGrey">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:PeachPuff" title="PeachPuff">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Bisque" title="Bisque">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:NavajoWhite" title="NavajoWhite">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Moccasin" title="Moccasin">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Wheat" title="Wheat">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:PaleGoldenrod" title="PaleGoldenrod">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:PaleTurquoise" title="PaleTurquoise">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Pink" title="Pink">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:LightPink" title="LightPink">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Silver" title="Silver">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:LightCoral" title="LightCoral">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Salmon" title="Salmon">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:LightSalmon" title="LightSalmon">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:BurlyWood" title="BurlyWood">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Khaki" title="Khaki">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:LightGreen" title="LightGreen">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:PaleGreen" title="PaleGreen">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Aquamarine" title="Aquamarine">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:PowderBlue" title="PowderBlue">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:LightBlue" title="LightBlue">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:SkyBlue" title="SkyBlue">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:LightSkyBlue" title="LightSkyBlue">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:LightSteelBlue" title="LightSteelBlue">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Thistle" title="Thistle">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Plum" title="Plum">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Violet" title="Violet">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:HotPink" title="HotPink">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:DarkGray" title="DarkGray">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:DarkGrey" title="DarkGrey">!!</span> <span style="border:solid;border-width:1px 0 0 1px;background:RosyBrown" title="RosyBrown">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Tomato" title="Tomato">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:DarkSalmon" title="DarkSalmon">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Coral" title="Coral">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:SandyBrown" title="SandyBrown">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Tan" title="Tan">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:DarkSeaGreen" title="DarkSeaGreen">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:MediumAquamarine" title="MediumAquamarine">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:CornflowerBlue" title="CornflowerBlue">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:MediumSlateBlue" title="MediumSlateBlue">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:MediumPurple" title="MediumPurple">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Orchid" title="Orchid">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:PaleVioletRed" title="PaleVioletRed">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Gray" title="Gray">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Grey" title="Grey">!!</span> <span style="border:solid;border-width:1px 0 0 1px;background:IndianRed" title="IndianRed">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:red" title="Red">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Orangered" title="OrangeRed">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Peru" title="Peru">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:DarkOrange" title="DarkOrange">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Orange" title="Orange">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:gold" title="Gold">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:darkkhaki" title="DarkKhaki">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:yellow" title="Yellow">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:yellowgreen" title="YellowGreen">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:greenyellow" title="GreenYellow">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Chartreuse" title="Chartreuse">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:LimeGreen" title="LimeGreen">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:lime" title="Lime">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:SpringGreen" title="SpringGreen">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Turquoise" title="Turquoise">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:MediumTurquoise" title="MediumTurquoise">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:cyan" title="Cyan">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:aqua" title="Aqua">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:CadetBlue" title="CadetBlue">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:DeepSkyBlue" title="DeepSkyBlue">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:DodgerBlue" title="DodgerBlue">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:LightSlateGray" title="LightSlateGray">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:LightSlateGrey" title="LightSlateGrey">!!</span> <span style="border:solid;border-width:1px 0 0 1px;background:SlateGray" title="SlateGray">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:SlateGrey" title="SlateGrey">!!</span> <span style="border:solid;border-width:1px 0 0 1px;background:RoyalBlue" title="RoyalBlue">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Blue" title="Blue">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:SlateBlue" title="SlateBlue">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:BlueViolet" title="BlueViolet">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:MediumOrchid" title="MediumOrchid">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:magenta" title="Magenta">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:fuchsia" title="Fuchsia">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:deeppink" title="DeepPink">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:dimgray" title="DimGray">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:brown" title="Brown">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:FireBrick" title="FireBrick">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Sienna" title="Sienna">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Chocolate" title="Chocolate">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:Goldenrod" title="Goldenrod">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:LawnGreen" title="LawnGreen">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:MediumSeaGreen" title="MediumSeaGreen">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:MediumSpringGreen" title="MediumSpringGreen">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:LightSeaGreen" title="LightSeaGreen">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:DarkTurquoise" title="DarkTurquoise">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:SteelBlue" title="SteelBlue">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:MediumBlue" title="MediumBlue">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:DarkOrchid" title="DarkOrchid">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:DarkViolet" title="DarkViolet">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:MediumVioletRed" title="MediumVioletRed">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:crimson" title="Crimson">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:SaddleBrown" title="SaddleBrown">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:darkGoldenrod" title="DarkGoldenrod">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:OliveDrab" title="OliveDrab">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:DarkOliveGreen" title="DarkOliveGreen">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:ForestGreen" title="ForestGreen">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:SeaGreen" title="SeaGreen">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:DarkSlateBlue" title="DarkSlateBlue">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:DarkRed" title="DarkRed">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:maroon" title="Maroon">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:olive" title="Olive">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:green" title="Green">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:DarkSlateGray" title="DarkSlateGray">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:DarkSlateGrey" title="DarkSlateGrey">!!</span> <span style="border:solid;border-width:1px 0 0 1px;background:DarkCyan" title="DarkCyan">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:teal" title="Teal">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:MidnightBlue" title="MidnightBlue">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:DarkBlue" title="DarkBlue">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:navy" title="Navy">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:indigo" title="Indigo">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:DarkMagenta" title="DarkMagenta">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:purple" title="Purple">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:DarkGreen" title="DarkGreen">  </span> <span style="border:solid;border-width:1px 0 0 1px;background:black" title="Black">  </span></p>
<div class="warning" style="width: 50%;"><strong>Hinweis: </strong>Im Internet Explorer gibt es Unterschiede bei der Schreibweise:<br>
<code>grey, darkgrey, darkslategrey, dimgrey, lightgray, lightslategrey</code><br>
<code>gray, darkgray, darkslategray, dimgray, lightgrey, lightslategray</code></div>
<h3 id="transparent_Keyword_{{_Gecko_minversion_inline(1.9)_}}"><code>transparent </code>Keyword {{ Gecko_minversion_inline(1.9) }}</h3>
<p>Komplett durchsichtig. Der berechnete Wert ist <code>rgba(0,0,0,0)</code>.<br>
In CSS 2.1 ist <code>transparent</code> nur für <code>background</code> und <code>border</code> erlaubt.<br>
In CSS 3 gilt dieser Wert auch für <code>color</code> und andere Eigenschaften.<br>
Siehe auch: <a href="/de/CSS/Farben#Browser_Kompatibilit.c3.a4t" title="de/CSS/Farben#Browser_Kompatibilit.c3.a4t">Browser Kompatibilität</a>.</p>
<h3 id="currentColor_Keyword"><code>currentColor </code>Keyword</h3>
<p>Der Wert der <code>color</code> Eigenschaft eines Elementes.<br>
Bespiel:</p>
<pre>&lt;div style="color:darkred"&gt;
 Dieser Text ist dunkelrot mit einer dunkelroten Linie darunter.
  &lt;div style="background:currentcolor; height:1ex"&gt;&lt;/div&gt;
 Noch mehr Text.
&lt;/div&gt; 
</pre>
<div style="color:darkred">Dieser Text ist dunkelrot mit einer dunkelroten Linie darunter.
<div style="background:currentcolor;height:1ex;width:33%">.</div>
Noch mehr Text.</div>
<p> </p>
<h3 id="RGB_(rot-gr.C3.BCn-blau)">RGB (rot-grün-blau)</h3>
<dl> <dt>Hexadezimale Schreibweise <code>#RRGGBB</code> und <code>#RGB</code></dt> <dd>"<code>#</code>", gefolgt von sechs hexadezimalen Zeichen (0-9, A-F).<br> "<code>#</code>", gefolgt von drei hexadezimalen Zeichen (0-9, A-F).<br> Die Schreibweise mit drei Zeichen (<code>#RGB</code>) und die mit sechs Zeichen (<code>#RRGGBB</code>) sind gleich.<br> Beispiel:<code> #f03 </code>und<code> #ff0033 </code> ergeben die gleiche Farbe.</dd> <dt>Funktionale Schreibweise<code> rgb(R,G,B)</code></dt> <dd>"<code>rgb</code>", gefolgt von drei Ganzzahlen oder drei prozentualen Werten.<br> Der Wert <code>255</code> bezieht sich auf <code>100%</code> und auf <code>F</code> oder <code>FF</code> in der hexadezimalen Notation.</dd>
</dl>
<pre>/* Die folgenden Beispiele setzen alle die gleiche Farbe fest */
 
 #f03
 #F03
 #ff0033
 #FF0033
 rgb(255,0,51)
 rgb(255, 0, 51)
 <strike>rgb(255, 0, 51.2)</strike> /* Kommazahlen sind nicht möglich. */ 
 rgb(100%,0%,20%)
 rgb(100%, 0%, 20%)
 <strike>rgb(100%, 0, 20%)</strike> /* Ganzzahlen und prozentuale Werte dürfen nicht gemischt in einer rgb() Funktion auftreten. */
</pre>
<h3 id="HSL_(hue-saturation-lightness)_hsl(H,S,L)">HSL (hue-saturation-lightness)<code> hsl(H,S,L)</code></h3>
<p>Der Vorteil der HSL-Schreibweise gegenüber der RGB-Schreibweise ist, dass es z.B. einfacher ist, mehrere Farben zu definieren, die den gleichen Farbton (hue) haben, sich aber durch unterschiedliche Helligkeit (lightness) und Sättigungen (saturation) unterscheiden sollen.</p>
<p>Der <strong>Farbton (hue) </strong> wird durch einen Winkel (ohne Einheit) angegeben und bezieht sich auf den Farbkreis.<br>
Definitionsgemäß ist <strong>rot=0=360</strong>, <strong>grün=120</strong>, und <strong>blau=240</strong>. Die weiteren Farben verteilen sich entsprechend. Negative Werte und solche die größer als 360 sind werden umgerechnet (-120=240 und 480=120).</p>
<p>Sättigung und Helligkeit werden durch Prozentzahlen angegeben.<br>
<code>100% </code>bedeutet volle <strong>Sättigung</strong>, und<code> 0% </code>bedeutet eine Abstufung von grau.<br>
<code>100% </code><strong>Helligkeit</strong> ist weiß,<code> 0% </code>Helligkeit ist schwarz, und<code> 50% </code>Helligkeit ist "normal".</p>
<pre style="text-shadow:rgba(255,255,255,0.4) -1px -1px">hsl(0,  100%,50%)   <span style="background:hsl(0,100%,50%)"> /* red */   </span>
hsl(30, 100%,50%)   <span style="background:hsl(30,100%,50%)">             </span> 
hsl(60, 100%,50%)   <span style="background:hsl(60,100%,50%)">             </span>
hsl(90, 100%,50%)   <span style="background:hsl(90,100%,50%)">             </span>
hsl(120,100%,50%)   <span style="background:hsl(120,100%,50%)"> /* green */ </span>
hsl(150,100%,50%)   <span style="background:hsl(150,100%,50%)">             </span>
hsl(180,100%,50%)   <span style="background:hsl(180,100%,50%)">             </span>
hsl(210,100%,50%)   <span style="background:hsl(210,100%,50%)">             </span>
hsl(240,100%,50%)   <span style="background:hsl(240,100%,50%)"> /* blue */  </span>
hsl(270,100%,50%)   <span style="background:hsl(270,100%,50%)">             </span>
hsl(300,100%,50%)   <span style="background:hsl(300,100%,50%)">             </span>
hsl(330,100%,50%)   <span style="background:hsl(330,100%,50%)">             </span>
hsl(360,100%,50%)   <span style="background:hsl(360,100%,50%)"> /* red */   </span>

hsl(120,100%,25%)   <span style="background:hsl(120,100%,25%)"> /* dark green */  </span>
hsl(120,100%,50%)   <span style="background:hsl(120,100%,50%)"> /* green */       </span>
hsl(120,100%,75%)   <span style="background:hsl(120,100%,75%)"> /* light green */ </span>

hsl(120,100%,50%)   <span style="background:hsl(120,100%,50%)"> /* green */  </span>
hsl(120, 67%,50%)   <span style="background:hsl(120,67%,50%)">              </span>
hsl(120, 33%,50%)   <span style="background:hsl(120,33%,50%)">              </span>
hsl(120,  0%,50%)   <span style="background:hsl(120,0%,50%)">              </span>

hsl(120, 60%,70%)   <span style="background:hsl(120,60%,70%)"> /* pastel green */ </span>
</pre>
<h3 id="RGBa_(rot-gr.C3.BCn-blau-alpha)_rgba(R,G,B,a)_{{_Gecko_minversion_inline(1.9)_}}">RGBa (rot-grün-blau-alpha)<code> rgba(R,G,B,a)</code> {{ Gecko_minversion_inline(1.9) }}</h3>
<p>Erweitert das RGB Farbmodell um "alpha", um die Deckkraft einer Farbe festzulegen.<br>
<strong>a</strong> steht für die Deckkraft: 0=durchsichtig; 1=deckend;</p>
<pre>rgba(255,0,0,0.1)   <span style="background:rgba(255,0,0,0.1)"> /* 10% deckendes rot */  </span>
rgba(255,0,0,0.4)   <span style="background:rgba(255,0,0,0.4)"> /* 40% deckendes rot */  </span>
rgba(255,0,0,0.7)   <span style="background:rgba(255,0,0,0.7)"> /* 70% deckendes rot */  </span>
rgba(255,0,0,  1)   <span style="background:rgba(255,0,0,1)"> /* komplett deckendes rot */ </span>
</pre>
<h3 id="HSLa_(hue-saturation-lightness-alpha)_hsla(H,S,L,a)_{{_Gecko_minversion_inline(1.9)_}}">HSLa (hue-saturation-lightness-alpha)<code> hsla(H,S,L,a)</code> {{ Gecko_minversion_inline(1.9) }}</h3>
<p>Erweitert das HSL Farbmodell um "alpha", um die Deckkraft einer Farbe festzulegen.<br>
<strong>a</strong> steht für die Deckkraft: 0=durchsichtig; 1=deckend;</p>
<pre style="text-shadow:rgba(255,255,255,0.4) -1px -1px">hsla(240,100%,50%,0.05)  <span style="background:hsla(240,100%,50%,0.05)"> /* 5% deckendes blau */   </span>
hsla(240,100%,50%, 0.4)  <span style="background:hsla(240,100%,50%,0.4)"> /* 40% deckendes blau */  </span>
hsla(240,100%,50%, 0.7)  <span style="background:hsla(240,100%,50%,0.7)"> /* 70% deckendes blau */  </span>
hsla(240,100%,50%,   1)  <span style="background:hsla(240,100%,50%,1)"> /* komplett deckendes blau */ </span>
</pre>
<h3 id="Systemfarben">Systemfarben</h3>
<p>Nicht alle Systemfarben werden auf allen Systemen unterstützt. Eine Benutzung auf öffentlichen Webseiten ist missbilligt (<em>deprecated</em>).</p>
<dl style="font:small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border:1px solid powderblue; padding:0.5em 0pt 0.5em 0.5em; -moz-column-rule:1px solid powderblue; -moz-column-width:15em; background:#eee; -webkit-columns:15em; -webkit-column-rule:1px solid powderblue"> <dt>ActiveBorder</dt> <dd>Rahmenfarbe eines aktiven Fensters</dd> <dt>ActiveCaption</dt> <dd>Titelleistenfarbe eines aktiven Fensters</dd> <dt>AppWorkspace</dt> <dd>Hintergrundfarbe einer Anwendung mit Multiple Document Interfaces</dd> <dt>Background</dt> <dd>Desktop Hintergrundfarbe</dd> <dt>ButtonFace</dt> <dd>Farbe der Fläche eines 3-Dimensionalen Elements</dd> <dt>ButtonHighlight</dt> <dd>Dunkle Schattenfarbe für 3-Dimensionale Elemente</dd> <dt>ButtonShadow</dt> <dd>Schattenfarbe für 3-Dimensionale Elemente</dd> <dt>ButtonText</dt> <dd>Textfarbe von Buttons</dd> <dt>CaptionText</dt> <dd>Textfarbe in Fenstertiteln</dd> <dt>GrayText</dt> <dd>Graue (deaktivierte) Textfarbe</dd> <dt>Highlight</dt> <dd>Farbe der ausgewählten Einträge in einem Bedienelement</dd> <dt>HighlightText</dt> <dd>Textarbe ausgewählter Einträge in einem Bedienelement</dd> <dt>InactiveBorder</dt> <dd>Rahmenfarbe eines inaktiven Fensters</dd> <dt>InactiveCaption</dt> <dd>Titleleistenfarbe eines inaktiven Fensters</dd> <dt>InactiveCaptionText</dt> <dd>Textfarbe von Titeln inaktiver Fenstern</dd> <dt>InfoBackground</dt> <dd>Hintergrundfarbe von Tooltipps</dd> <dt>InfoText</dt> <dd>Textfarbe für Tooltipps</dd> <dt>Menu</dt> <dd>Menü Hintergrundfarbe</dd> <dt>MenuText</dt> <dd>Textfarbe in Menüs</dd> <dt>Scrollbar</dt> <dd>Graue Scrollbarbereichsfarbe</dd> <dt>ThreeDDarkShadow</dt> <dd>Dunkle Schattenfarbe für 3-Dimensionale Elemente (für Seiten die dem Licht abgewandt sind)</dd> <dt>ThreeDFace</dt> <dd>Hintergrundfarbe der Fläche für 3-Dimensionale Elemente</dd> <dt>ThreeDHighlight</dt> <dd>Hervorhebungsfarbe für 3-Dimensionale Elemente</dd> <dt>ThreeDLightShadow</dt> <dd>Helle Schattenfarbe für 3-Dimensionale Elemente (für Seiten die dem Licht zugewandt sind)</dd> <dt>ThreeDShadow</dt> <dd>Schattenfarbe für 3-Dimensionale Elemente</dd> <dt>Window</dt> <dd>Fensterhintergrund</dd> <dt>WindowFrame</dt> <dd>Hintergrund eines Frames im Fenster</dd> <dt>WindowText</dt> <dd>Farbe des Texts in Fenstern</dd>
</dl>
<h3 id="Mozilla_Erweiterungen">Mozilla Erweiterungen</h3>
<dl style="font:small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border:1px solid powderblue; padding:0.5em 0 0.5em 0.5em; -moz-column-rule:1px solid powderblue; -moz-column-width:17em; background:#eee; -webkit-columns:17em; -webkit-column-rule:1px solid powderblue"> <dt>-moz-ButtonDefault</dt> <dd>Rahmenfarbe eines DefaultButtons in einer Dialogbox</dd> <dt>-moz-ButtonHoverFace</dt> <dd>Hintergrundfarbe eines gehoverten Buttons</dd> <dt>-moz-ButtonHoverText</dt> <dd>Textfarbe eines gehoverten Buttons</dd> <dt>-moz-CellHighlight</dt> <dd>Hintergrundfarbe für ausgewählte Items in einem Verzeichnisbaum</dd> <dt>-moz-CellHighlightText</dt> <dd>Textfarbe für ausgewählte Items in einen Verzeichnisbaum</dd> <dt>-moz-Combobox {{ Gecko_minversion_inline("1.9.2") }}</dt> <dd>Hintergrundfarbe für Comboboxen</dd> <dt>-moz-ComboboxText {{ Gecko_minversion_inline("1.9.2") }}</dt> <dd>Textfarbe für Comboboxen</dd> <dt>-moz-Dialog</dt> <dd>Hintergrundfarbe für Dialogboxen</dd> <dt>-moz-DialogText</dt> <dd>Textfarbe für Dialogboxen</dd> <dt>-moz-dragtargetzone</dt> <dd>???</dd> <dt>-moz-EvenTreeRow {{ Gecko_minversion_inline(1.9) }}</dt> <dd>Hintergrundfarbe für gerade nummerierte Zeilen in einem Baum</dd> <dt>-moz-Field</dt> <dd>Textfeld Hintergrundfarbe</dd> <dt>-moz-FieldText</dt> <dd>Textfeld Vordergrundfarbe</dd> <dt>-moz-html-CellHighlight {{ Gecko_minversion_inline(1.9) }}</dt> <dd>Hintergrundfarbe für ein markiertes Item in einer HTML Auswahl</dd> <dt>-moz-html-CellHighlightText {{ Gecko_minversion_inline(1.9) }}</dt> <dd>Textfarbe für ein markiertes Item in einer HTML Auswahl</dd> <dt>-moz-mac-accentdarkestshadow</dt> <dt>-moz-mac-accentdarkshadow</dt> <dt>-moz-mac-accentface</dt> <dt>-moz-mac-accentlightesthighlight</dt> <dt>-moz-mac-accentlightshadow</dt> <dt>-moz-mac-accentregularhighlight</dt> <dt>-moz-mac-accentregularshadow</dt> <dt>-moz-mac-chrome-active</dt> <dd>{{ Gecko_minversion_inline("1.9.1") }}</dd> <dt>-moz-mac-chrome-inactive</dt> <dd>{{ Gecko_minversion_inline("1.9.1") }}</dd> <dt>-moz-mac-focusring</dt> <dt>-moz-mac-menuselect</dt> <dt>-moz-mac-menushadow</dt> <dt>-moz-mac-menutextselect</dt> <dt>-moz-MenuHover</dt> <dd>Hintergrundfarbe für gehoverte Menuitems</dd> <dt>-moz-MenuHoverText</dt> <dd>Vordergrundfarbe für gehoverte Menuitems</dd> <dt>-moz-MenuBarText {{ Gecko_minversion_inline("1.9.2") }}</dt> <dd>Textfarbe in Menubars</dd> <dt>-moz-MenuBarHoverText</dt> <dd>Vordergrundfarbe für gehoverte Menubars</dd> <dt>-moz-nativehyperlinktext {{ Gecko_minversion_inline("1.9.1") }}</dt> <dd>Standard Hyperlink Farbe</dd> <dt>-moz-OddTreeRow {{ Gecko_minversion_inline(1.9) }}</dt> <dd>Hintergrundfarbe für ungerade nummerierte Zeilen in einem Baum</dd> <dt>-moz-win-communicationstext {{ Gecko_minversion_inline(1.9) }}</dt> <dd>Textfarbe von Objekten mit appearance:-moz-win-communications-toolbox</dd> <dt>-moz-win-mediatext {{ Gecko_minversion_inline(1.9) }}</dt> <dd>Textfarbe von Objekten mit appearance:-moz-win-media-toolbox</dd>
</dl><h3 id="Mozilla_Erweiterungen:_Bevorzugte_Benutzerfarben">Mozilla Erweiterungen: Bevorzugte Benutzerfarben</h3>
<dl style="font:small Tahoma,'Liberation Sans','Nimbus Sans L',sans-serif; border:1px solid powderblue; padding:0.5em 0 0.5em 0.5em; background:#eee;"> <dt>-moz-activehyperlinktext</dt> <dd>Bevorzugte Benutzerfarbe für die Textfarbe von aktiven Links</dd> <dt>-moz-hyperlinktext</dt> <dd>Bevorzugte Benutzerfarbe für unbesuchte Links</dd> <dt>-moz-visitedhyperlinktext</dt> <dd>Bevorzugte Benutzerfarbe für besuchte Links</dd>
</dl>
<h2 id="Spezifikation">Spezifikation</h2>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#value-def-color" title="http://www.w3.org/TR/CSS21/syndata.html#value-def-color">CSS 2.1 Syntax #color</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors" title="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS 2.1 UI #system-colors</a></li> <li><a class="external" href="http://www.w3.org/TR/css3-color/#colorunits" title="http://www.w3.org/TR/css3-color/#colorunits">CSS 3 Color #colorunits</a> Working draft</li>
</ul>
<h2 id="Browser_Kompatibilit.C3.A4t">Browser Kompatibilität</h2>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th><code>#RRGGBB | #RGB</code></th> <th><code>rgb(R,G,B)</code></th> <th><code>hsl(H,S,L)</code></th> <th><code>rgba(R,G,B,a)</code></th> <th><code>hsla(H,S,L,a)</code></th> <th><code>currentColor</code></th> <th><code>transparent</code></th> </tr> <tr> <td>Internet Explorer</td> <td>3.0</td> <td>4.0</td> <td>---</td> <td>---</td> <td>---</td> <td>---</td> <td>[*]</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> <td>1.0 (1.0)</td> <td><strong>1.0</strong> (1.5)</td> <td><strong>3.0</strong> (1.9)</td> <td><strong>3.0</strong> (1.9)</td> <td><strong>1.5</strong> (1.8)</td> <td><strong>3.0</strong> (1.9)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> <td>3.5</td> <td>9.5</td> <td>10.0</td> <td>10.0</td> <td>9.5</td> <td>10.0</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> <td>1.0 (85)</td> <td><strong>3.1</strong> (525)</td> <td><strong>3.1</strong> (525)</td> <td><strong>3.1</strong> (525)</td> <td><strong>4.0</strong> (528)</td> <td><strong>3.1</strong> (525)</td> </tr> </tbody>
</table>
<p>[*]  Der Internet Explorer ab Version <strong>7.0</strong> unterstützt den Wert <code>transparent</code>, gemäß CSS 2.1 Standard, nur für <code>background</code> und <code>border</code>. Wenn <code> color:transparent </code> angegeben wird, wird schwarz dargestellt.</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<p><a href="/de/CSS/color" title="de/CSS/color"><code>color</code></a>, <a href="/de/CSS/background-color" title="de/CSS/background-color"><code>background-color</code></a>, <a href="/de/CSS/border-color" title="de/CSS/border-color"><code>border-color</code></a>, <a href="/de/CSS/opacity" title="de/CSS/opacity"><code>opacity</code></a></p>
<p>{{ languages( { "en": "en/CSS/color_value", "fr": "fr/CSS/valeur_de_couleur", "ja": "ja/CSS/color_value" } ) }}</p>
Zu dieser Version zurücksetzen