CSS/Wertetypen/Farbangaben

Aus SELFHTML-Wiki
< CSS‎ | Wertetypen(Weitergeleitet von Farbangabe)
Wechseln zu: Navigation, Suche

Farben spielen bei der Gestaltung eine wichtige Rolle. In CSS stehen verschiedene Möglichkeiten bereit, eine Farbe festzulegen bzw. zu „mischen“.


Das RGB-Modell (Rot/Grün/Blau-Mischung)[Bearbeiten]

Beim RGB-Modell wird eine Farbe durch ihre Anteile an den drei Grundfarben Rot, Grün und Blau definiert. Jede Farbe hat also einen Rotwert, einen Grünwert und einen Blauwert. Jeder der drei Werte wird durch Zahlen zwischen 0 und 255 definiert. Der Wert 0 bedeutet: keinen Anteil an der betreffenden Grundfarbe, der Wert 255 bedeutet: maximalen Anteil an der betreffenden Grundfarbe. Ein dunkles Blau hat nach diesem Schema z.B. die Farbwerte 0,0,153. (0 rot, 0 grün, 153 blau). Mit diesem Schema können bis zu 16,7 Millionen unterschiedliche Farben definiert werden.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
400px alt=RGB-Modell Die nebenstehende Abbildung zeigt, wie Farbtöne beim RGB-Modell durch addierendes Mischen zustande kommen.

Hexadezimale Schreibweise[Bearbeiten]

Die hexadezimale Schreibweise ist die am weitesten verbreitete Methode, einen Farbwert anzugeben. Nach einem Gatterzeichen (hash) werden die Farbanteile der Farben rot, grün und blau in einem Bereich von 00 (0) bis FF (255) notiert. Allgemein: #RRGGBB.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

CSS erlaubt eine Kurzschreibweise, allgemein: #RGB. Die Kurzschreibweise ist nur dann möglich, wenn die erste und die zweite Ziffer aller Farbwerte identisch sind (#RGB entspricht #RRGGBB).

Beispiele zu hexadezimalen Farbangaben
Farbe Hexadezimaler Wert Hinweis
#ff7f50 Entspricht der benannten Farbe „coral“
#abc Entspricht #aabbcc
#71f39b Beliebiger Farbwert
#000 Entspricht #000000
Beachten Sie: Die Kurzschreibweise mit 3 Hex-Werten ist bei HTML- und SVG-Attributen nicht erlaubt.

Hexadezimale Schreibweise mit Angabe des Alpha-Kanals[Bearbeiten]

Wie oben beschrieben werden nach einem Gatterzeichen (hash) die Farbanteile der Farben rot, grün und blau notiert. Zusätzlich wird die Deckkraft angegeben (00 steht für keine Deckung, also transparent), FF steht für volle Deckkraft oder keine Transparenz. Werte dazwischen geben eine teilweise Deckung an. Allgemein: #RRGGBBAA.

  • Achtung
  • Firefox
  • Safari

Details: caniuse.com

CSS erlaubt auch hier eine Kurzschreibweise, allgemein: #RGBA. Die Kurzschreibweise ist dann möglich, wenn die erste und die zweite Ziffer aller Farbwerte und der Deckkraft identisch sind (#RGBA entspricht #RRGGBBAA).

Beispiele zu hexadezimalen Farbangaben
Farbe Hexadezimaler Wert Hinweis
#ff7f5000 Entspricht der benannten Farbe „coral“, komplett durchsichtig
#ff7f50ff Entspricht der benannten Farbe „coral“, komplett deckend
#ff7f5080 Entspricht der benannten Farbe „coral“, teilweise deckend

rgb[Bearbeiten]

In der Funktion rgb(Rot, Grün, Blau) werden die Werte für Rot, Grün und Blau entweder als ganze Zahlen im Bereich 0-255 oder Prozentwerte im Bereich von 0%-100% notiert (jedoch nicht beides gleichzeitig).

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiele für RGB-Mischungen
Farbe RGB-Wert Hinweis
rgb(60%,20%,40%) Beliebige Farbe
rgb(0,128,0) Entspricht der benannten Farbe „green“
keine rgb(20,100%,50) Zahlen- und Prozentwerte dürfen nicht vermischt werden.

rgba[Bearbeiten]

CSS erlaubt es, zur RGB-Mischung noch einen Transparenzwert hinzuzufügen. Dadurch lassen sich zum Beispiel teiltransparente Hintergrundfarben definieren.

  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Die allgemeine Schreibweise hierfür lautet rgba(Rot, Grün, Blau, Deckkraft). Es gelten die selben Regeln wie für die einfache RGB-Mischung. Der Wert Deckkraft wird jedoch als Fließkommazahl im Bereich 0 (keine Deckkraft, vollkommen transparent) bis 1 (volle Deckkraft, keine Transparenz) angegeben.

Interessant wird diese Mischung, wenn sich nicht nur Hintergrundfarben, sondern auch Hintergrundbilder überlappen.

Beispiele für RGBA-Mischungen
Farbe RGBA-Wert Hinweis
rgba(255,215,0,0.8) 80% Deckkraft
rgba(255,215,0,0.5) 50% Deckkraft
rgba(255,215,0,0.2) 20% Deckkraft

Farbton/Sättigung/Helligkeits-Mischung[Bearbeiten]

Da die Mischung von Rot, Grün und Blau oftmals nicht intuitiv stattfindet, erlaubt CSS auch das Mischen von Farbton (englisch hue), Sättigung (englisch saturation) und Helligkeit (englisch lightness). Die Schreibweise lautet hsl(Farbton, Sättigung, Helligkeit).

  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Farbton ist ein ganzzahliger Wert zwischen 0 und 360. Bei diesem Wertebereich stellt man sich vor, dass die Regenbogenbogenfarben in einem Kreis angeordnet sind. 0 entspricht Rot, 120 entspricht grün, 240 entspricht blau und 360 entspricht wieder Rot.

Es sind auch höhere und negative Werte erlaubt, diese Werte werden dann in eine Zahl innerhalb des genannten Bereiches umgewandelt.

Sättigung und Helligkeit werden in Prozent ausgedrückt.

Die Sättigung kann man sich als Verlauf des Farbtons (100%) zu einem Grauton (0%) vorstellen. Die Helligkeit dagegen verläuft von der Farbe weiß (100%) zur Farbe schwarz (0%). Eine Helligkeit von 50% gilt als normale Helligkeit.

Farbkreis nach Küppers
Farbkreis nach Küppers mit Helligkeitsabstufungen von 20% bis 90%
SVG-Grafik
400px HSB-Modell Die nebenstehende Abbildung zeigt eine typische Dialogbox eines Grafikprogramms, die das Definieren von Farbtönen nach dem HSL-Modell ermöglicht.

hsl[Bearbeiten]

Verschiedene Sättigungs- und Helligkeitswerte der Farbe Cyan
Sättigung
100% 75% 50% 25% 0%
Helligkeit 100%
75%
50%
25%
0%
Beispiele für HSL-Mischungen
Farbe HSL-Wert Hinweis
hsl(60, 100%, 50%) yellow
hsl(39, 100%, 50% orange
hsl(0, 100%, 50%) red

hsla[Bearbeiten]

Auch einer HSL-Mischung kann ein Transparenz hinzugefügt werden. Die allgemeine Schreibweise hierfür lautet hsla(Farbton, Sättigung, Helligkeit, Deckkraft). Es gelten die selben Regeln wie für die einfache HSL-Mischung. Der Wert Deckkraft wird als Fließkommazahl im Bereich 0 (keine Deckkraft, vollkommen transparent) bis 1 (volle Deckkraft, keine Transparenz) angegeben.

  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari
Beispiele für HSLA-Mischungen
Farbe HSLA-Wert Hinweis
hsla(270,100%,50%,0.8) 80% Deckkraft
hsla(270,100%,50%,0.5) 50% Deckkraft
hsla(270,100%,50%,0.2) 20% Deckkraft

Das CMYK-Modell[Bearbeiten]

Das CMYK-Farbmodell ist ein subtraktives Farbmodell, das die technische Grundlage für den modernen Vierfarbdruck bildet. Die Abkürzung CMYK steht für die drei Farbbestandteile Cyan, Magenta, Gelb (Yellow) und den Schwarzanteil Key als Farbtiefe.

Beachten Sie: Im Augenblick ist es noch in keinem Browser implementiert.