decocode decocode deco    

Farben #

Textfarbe – color #

W3C Standard; CSS3

Über die Eigenschaft color lässt sich die Textfarbe einstellen. Um einen Farbwert anzugeben, gibt es verschiedene Möglichkeiten. Zunächst existieren vordefinierte Schlüsselwörter, die einen bestimmten Farbwert repräsentieren, wie z. B. blue oder green. Dies ist eine bequeme Option, die allerdings den Nachteil hat, dass nur eine sehr geringe Auswahl an Farben auf diese Weise darstellbar ist. Eine Übersicht der Schlüsselwörter findet man bei W3C.

Eine andere ›klassische‹ Methode ist die Angabe eines hexadezimalen Farbwertes, wobei jeweils zwei Ziffern dieses Wertes die Sättigung der Farbeanteile Rot, Grün und Blau innerhalb der gewünschten Farbe repräsentieren, wobei hexadezimal 0x00 (dezimal 0) einen minimalen Anteil und hexadezimal 0xFF (dezimal 255) einen maximalen Anteil bei additiver Farbmischung bedeutet. Für einen Violettton ergibt sich z. B. eine Zusammensetzung von Rot 0xEE, Grün 0x99 und Blau 0xFF. Diese drei Werte werden nun zu EE99FF zusammengezogen und dem ganzen ein # vorangestellt. Die Schreibweisen #EE99FF und #ee99ff sind gleichwertig.

Diese Zusammensetzung kann aber auch dezimal als rgb(238,153,255) angegeben werden.

Hier ein paar Beispiele:

Quelltext auswählen
1
2
3
4
<p style='color:orange;'>Lorem ipsum dolor sit amet.</p>
<p style='color:#EE99FF;'>Consetetur sadipscing elitr.</p>
<p style='color:rgb(238,153,255);'>Sed diam nonumy eirmod tempor.</p>
<p style='color:rgb(80%,65%,27%);'>Invidunt ut labore et dolore.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Consetetur sadipscing elitr.

Sed diam nonumy eirmod tempor.

Invidunt ut labore et dolore.

Diese Art der Notation eines Farbwertes gilt auch für alle anderen Eigenschaften, die einen Farbwert erhalten können, wie z. B. border-color, outline-color oder background-color.

Farbwert nach Farbton/Sättigung/Helligkeit #

Eine wesentlich intuitivere Methode zur Notation eines Farbwertes ist die Angabe von Farbton, Sättigung sowie Helligkeit einer Farbe. Diese Notation erfolgt über die Eigenschaft hsl() (hue, saturation, lightness).

Ebenso wie bei rgba() kann über hsla() ein zusätzlicher Wert im Bereich von 0 bis 1 für den Alphakanal, also den Grad der Opazität, angegeben werden.

Die Skala der Farbtöne reicht von 0 bis 360. Sättigung und Helligkeit werden in Prozent angegeben.

Firefox, Chrome und Opera unterstützen in aktuellen Versionen hsl-Farben. Der Internet Explorer ab Version 9.

Beispiel:

Quelltext auswählen
1
2
<p style='color:hsl(85,100%,45%);'>Lorem ipsum dolor sit amet.</p>
<p style='color:hsla(85,100%,45%,.3);'>Lorem ipsum dolor sit amet.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Hier eine Palette mit meinen 117 persönlichen Standardfarben und den dazugehörigen hsl-Werten:

0,85%,10%15,85%,10%30,85%,10%40,85%,10%55,85%,10%85,85%,10%125,85%,10%170,85%,10%220,85%,15%260,85%,15%285,85%,15%330,85%,15%0,0%,10%
0,85%,20%15,85%,20%30,85%,20%40,85%,20%55,85%,20%85,85%,20%125,85%,20%170,85%,15%220,85%,25%260,85%,25%285,85%,25%330,85%,25%0,0%,20%
0,85%,30%15,85%,30%30,85%,30%40,85%,30%55,85%,30%85,85%,30%125,85%,30%170,85%,25%220,85%,40%260,85%,40%285,85%,35%330,85%,35%0,0%,30%
0,85%,40%15,85%,40%30,85%,40%40,85%,40%55,85%,40%85,85%,40%125,85%,40%170,85%,35%220,85%,55%260,85%,55%285,85%,45%330,85%,45%0,0%,40%
0,85%,50%15,85%,50%30,85%,45%40,85%,45%55,85%,45%85,85%,45%125,85%,45%170,85%,40%220,85%,65%260,85%,65%285,85%,55%330,85%,55%0,0%,50%
0,85%,60%15,85%,60%30,85%,55%40,85%,55%55,85%,55%85,85%,55%125,85%,60%170,85%,45%220,85%,75%260,85%,75%285,85%,70%330,85%,65%0,0%,60%
0,85%,70%15,85%,70%30,85%,65%40,85%,65%55,85%,65%85,85%,65%125,85%,75%170,85%,50%220,85%,80%260,85%,80%285,85%,80%330,85%,75%0,0%,70%
0,85%,80%15,85%,80%30,85%,75%40,85%,75%55,85%,75%85,85%,75%125,85%,85%170,85%,75%220,85%,85%260,85%,85%285,85%,85%330,85%,80%0,0%,80%
0,85%,90%15,85%,90%30,85%,85%40,85%,85%55,85%,85%85,85%,85%125,85%,90%170,85%,85%220,85%,90%260,85%,90%285,85%,90%330,85%,90%0,0%,90%