ist eine vom W3C vorgestellte Empfehlung für die Beschreibung der Eigenschaft Farbe und deren Transparenz für Elemente von HTML- und XML-Dokumenten mit Hilfe von CSS.
CSS Level 3 (CSS3) wird von der CSS-Working Group in eigenständigen Modulen entwickelt, um zukünftige Anforderungen schneller einarbeiten zu können. CSS Color ist die erste fertiggestellte Empfehlung aus dieser Reihe.
Die CSS-Eigenschaft color kann auf (fast) alle Elemente eines HTML- oder XML-Dokumentes angewendet werden, z. B. color für Vordergrundfarbe, background-color als Hintergrundfarbe, border-color als Rahmenfarbe usw.
Als Werte können vordefinierte Schlüsselwörter (1) oder hexadezimale RGB-Werte angegeben werden. Als Funktionen kommen rgb und hsl dazu (HSL (a): hue, saturation, lightness; dt.: Farbton, Farbsättigung, Helligkeit). Zusätzlich kann bei den Funktionen rgba und hsla über den Alpha-Kanal die Transparenz (engl.: opacity) angegeben werden. Der erlaubte Wertebereich liegt dafür von 0.0 (völlige Transparenz) bis 1.0 (ohne Transparenz).
| Farbangabe |
Bereich Beispiele (<color>) |
Darstellung |
|---|---|---|
| Schlüsselwort | siehe unten (1) | |
| purple | Beispiel | |
| RGB hexadezimal | #rrggbb oder #rgb (0-9, A-F) | |
| #0000FF oder #00f | Beispiel | |
| RGB-Funktion dezimal | rgb(r, g, b) (r, g, b: 0 - 255) | |
| rgb(0, 255, 0) | Beispiel | |
| RGB-Funktion prozentual | rgb(r, g, b) (r, g, b: 0% - 100%) | |
| rgb(0%, 100%, 0%) | Beispiel | |
|
RGB-Funktion prozentual mit Alpha-Kanal (Transparenz) |
rgba(r, g, b, a) (r, g, b: 0% - 100%; a: 0.0 - 1.0) | |
| rgb(0%, 100%, 0%, .5) | Beispiel | |
| HSL-Funktion | hsl(h, s, l) (h: 0 - <360, s, l: 0% - 100%) | |
| hsl(0,100%,50%) | Beispiel | |
|
HSL-Funktion mit Alpha-Kanal (Transparenz) |
hsla(h, s, l, a) (h: 0 - <360), s, l: 0% - 100%, a: 0.0 - 1.0) | |
| hsla(0,100%,50%,.7) | Beispiel |
Groß- und Kleinschreibung bei den hexadezimalen RGB-Werten sind identisch und können beide verwendet werden. Alle Beispiele sind mit <span style="color: <color>">Beispiel</span> dargestellt.
Besonderheiten sind zwei Schlüsselwörter: transparent und das neue currentColor. transparent wurde mit CSS 1 für den Hintergrund eingeführt und mit CSS 2 auf die Rahmenfarbe erweitert. Mit CSS3 wird es nun auf alle Elemente anwendbar, die einen Farbwert erhalten dürfen. Mit currentColor übernimmt CSS 3 einen bei SVG 1.0 eingeführtes Schlüsselwort, da in den früheren Versionen nur beschrieben wurde, dass z. B. die Rahmenfarbe von der Vordergrundfarbe übernommen wird, ohne ein Schlüsselwort dafür bereitzustellen.
Die Unterstützung für CSS durch die modernen Browser ist sehr unterschiedlich (b). Teilweise werden Elemente aus CSS3 bereits unterstützt, während Elemente aus CSS2 noch fehlen.
Kleine! Tools
(1) Kleine! Farbpalette
CSS- und SVG-Farbnamen
W3C - Technical Reports
{CSS Color Module Level 3
- http://www.w3.org/TR/css3-color/} (Rec)
Weiterführende Links
{Web Style Sheets home page
- http://www.w3.org/Style/}
@ W3C
(a) [HSV-Farbraum
- http://de.wikipedia.org/wiki/HSV-Farbraum] @ Wikipedia
(b) {Comparison of layout engines (Cascading Style Sheets)
- http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29}
@ en.Wikipedia.org