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