Farben

Achtung: Dieser Artikel ist möglicherweise veraltet.

Ü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

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()

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()

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()

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()

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
Hintergrundfarbe für Comboboxen
-moz-ComboboxText
Textfarbe für Comboboxen
-moz-Dialog
Hintergrundfarbe für Dialogboxen
-moz-DialogText
Textfarbe für Dialogboxen
-moz-dragtargetzone
???
-moz-EvenTreeRow
Hintergrundfarbe für gerade nummerierte Zeilen in einem Baum
-moz-Field
Textfeld Hintergrundfarbe
-moz-FieldText
Textfeld Vordergrundfarbe
-moz-html-CellHighlight
Hintergrundfarbe für ein markiertes Item in einer HTML Auswahl
-moz-html-CellHighlightText
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
-moz-mac-chrome-inactive
-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
Textfarbe in Menubars
-moz-MenuBarHoverText
Vordergrundfarbe für gehoverte Menubars
-moz-nativehyperlinktext
Standard Hyperlink Farbe
-moz-OddTreeRow
Hintergrundfarbe für ungerade nummerierte Zeilen in einem Baum
-moz-win-communicationstext
Textfarbe von Objekten mit appearance:-moz-win-communications-toolbox
-moz-win-mediatext
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

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter:
Mitwirkende an dieser Seite: SJW, fscholz, Michael2402, Jürgen Jeka
Zuletzt aktualisiert von: SJW,
Seitenleiste ausblenden