Grafik/Farbe/Farbmodelle

Aus SELFHTML-Wiki
< Grafik‎ | Farbe
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
15min
Schwierigkeitsgrad
leicht
Vorausgesetztes Wissen
-

Farbe ist ein durch das Auge und Gehirn vermittelter Sinneseindruck, der durch Licht hervorgerufen wird. Um diesen subjektiven Eindruck verständlich wiederzugeben, wurden verschiedene Farbmodelle entwickelt, in denen Farben quantitativ (mit Hilfe von Zahlen) beschrieben sind.

RGB-Modell (Rot/Grün/Blau-Mischung)

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.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

Jeder der drei Werte wird durch Zahlen zwischen 0 und 255 (8bit-Farbtiefe) 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.


RGBCube d.svg

400px alt=RGB-Modell Die nebenstehende Abbildung zeigt, wie Farbtöne beim RGB-Modell durch addierendes Mischen zustande kommen.

Hexadezimale Schreibweise

Die hexadezimale Schreibweise ist die am weitesten verbreitete Methode, einen RGB-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

Wie oben beschrieben werden nach einem Gatterzeichen (hash) die Farbanteile der Farben rot, grün und blau notiert. Zusätzlich wird die Deckkraft des Alphakanals 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.

  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari

Details: caniuse.com

#RRGGBBAA

CSS erlaubt auch hier eine Kurzschreibweise. Sie 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()

In der CSS-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()

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 für diese CSS-Funktion 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

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


Farbkreis nach Küppers
Farbkreis nach Küppers mit Helligkeitsabstufungen von 20% bis 90%
SVG-Grafik
HSB-Modell

Die nebenstehende Abbildung zeigt eine typische Dialogbox eines Grafikprogramms, die das Definieren von Farbtönen nach dem HSL-Modell ermöglicht.

hsl()

Die Schreibweise für diese CSS-Funktion lautet:

  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Details: caniuse.com

hsl(Farbton, Sättigung, Helligkeit)

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

Auch einer HSL-Mischung kann eine Transparenz hinzugefügt werden. Die allgemeine Schreibweise für diese CSS-Funktion lautet hsla(Farbton, Sättigung, Helligkeit, Deckkraft).

  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Details: caniuse.com

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.

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

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.

andere Farbmodelle

In der Spezifikation sind weitere Farbmodelle vorgesehen. Mit der color()-Funktion können explizit weitere Farbräume, so der P3-Farbraum für Monitore mit großem Farbumfang, definiert werden.

  • Leer
  • Leer
  • Leer
  • Leer
  • Safari

Details: caniuse.com