Grafik/Farbe/Farbmodelle
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.
Inhaltsverzeichnis
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.
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.
<svg>
<circle cx="60" cy="60" fill="rgb(255 0 0)" />
<circle cx="100" cy="60" fill="rgb(0 255 0)" />
<circle cx="80" cy="100" fill="rgb(0 0 255)" />
</svg>
Das Beispiel 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) als Hexadezimalzahl notiert.
Allgemein: #RRGGBB
.
Farbe | Hexadezimaler Wert | Hinweis |
---|---|---|
#337599
|
SELF-Blau aus der SELFHTML-Farbtabelle | |
#dfac20
|
SELF-Gelb | |
#c82f04
|
Rot | |
#93b946
|
helles Grün |
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
).
Farbe | Hexadezimaler Wert | Hinweis |
---|---|---|
#000
|
entspricht #000000 alle Farbwerte sind auf "0" → schwarz | |
#00f
|
entspricht #0000ff kein rot, kein grün, nur blau | |
#0ff
|
entspricht #00ffff kein rot, grün und blau gemischt → cyan | |
#0f0
|
entspricht #00ff00 kein rot, volles grün, kein blau → lime |
Optional kann in einem vierten Block die Deckkraft des Alphakanals angegeben werden. (00
steht für keine Deckung, also transparent), FF
steht für volle Deckkraft oder keine Transparenz. Werte dazwischen geben eine teilweise Deckung an (80
entspräche 50%).[1]
#RRGGBBAA
Farbe | Hexadezimaler Wert | Hinweis |
---|---|---|
#ff7f5000
|
Entspricht der benannten Farbe „coral“, komplett durchsichtig | |
#ff7f5044
|
Entspricht der benannten Farbe „coral“, teilweise deckend | |
#ff7f5080
|
Entspricht der benannten Farbe „coral“, teilweise deckend | |
#ff7f50cc
|
Entspricht der benannten Farbe „coral“, teilweise deckend | |
#ff7f50ff
|
Entspricht der benannten Farbe „coral“, komplett deckend |
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
).
rgb()
Das RGB-Modell kann auch durch eine CSS-Funktion dargestellt werden.
rgb(Rot Grün Blau [/ Alphawert])
In der CSS-Funktion werden innerhalb der Klammern die durch Leerzeichen getrennten 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).
Optional kann zur RGB-Mischung noch ein vierter Wert für den Transparenzwert hinzugefügt werden. Der Wert Deckkraft
wird jedoch als Fließkommazahl im Bereich 0
(keine Deckkraft, vollkommen transparent) bis 1
(volle Deckkraft, keine Transparenz) angegeben. Er wird, abweichend von den anderen Werten, mit einem Slash / getrennt.
Interessant wird diese Mischung, wenn sich nicht nur Hintergrundfarben, sondern auch Hintergrundbilder überlappen.
Farbe | RGB-Wert | Hinweis |
---|---|---|
rgb(51 117 153)
|
SELF-Blau | |
rgb(87% 67% 13%)
|
SELF-Gelb | |
keine | rgb(20 100% 50)
|
Zahlen- und Prozentwerte dürfen nicht vermischt werden. |
rgb(223 172 32 /0.8)
|
80% Deckkraft | |
rgb(223 172 32 /0.5)
|
50% Deckkraft | |
rgb(223 172 32 /0.2)
|
20% Deckkraft |
Die oben verwendete Notation richtet sich nach der neuesten Version der Spezifikation CSS Colors Level 4.[2]
Dort wurden die bisherige Notation mehrere Werte durch Kommas zu trennen, zugunsten einer Leerzeichen-separierten Schreibweise, wie sie auch bei anderen CSS-Eigenschaften wie z. B. border, border-radius und box-shadow und CSS-Funktionen wie drop-shadow() verwendet wird, vereinheitlicht.
Auch die neuen, weiter unten beschriebenen, Funktionen lab() und color() verwenden die neue Schreibweise.
Trotzdem wird die alte Schreibweise weiterhin gültig bleiben.
Ursprünglich wurde die Angabe des Alphawerts durch eine eigene CSS-Funktion
rgba()
mit identischer Syntax und Verhalten notiert. Dies ist heute nicht mehr nötig.Die rgba()-Funktion wird aber weiterhin gültig bleiben.
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).
hsl()
Eine HSL-Mischung kann mit einer CSS-Funktion notiert werden:
hsl(Farbton Sättigung Helligkeit [/ Alphawert])
Sie enthält 3, bzw. 4 durch Leerzeichen getrennte Werte:
- Farbton ist ein ganzzahliger Wert zwischen
0
und360
. 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 und360
entspricht wieder Rot.
Es sind auch höhere und negative Werte erlaubt, diese Werte werden dann in eine Zahl innerhalb des genannten Bereiches umgewandelt. - Die Sättigung kann man sich als Verlauf des Farbtons (
100%
) zu einem Grauton (0%
) vorstellen.
Sie wird in Prozent ausgedrückt. - Die Helligkeit dagegen verläuft von der Farbe weiß (
100%
) zur Farbe schwarz (0%
). Eine Helligkeit von50%
gilt als normale Helligkeit.
Sie wird in Prozent ausgedrückt.
Optional kann zur HSL-Mischung noch eine Transparenz hinzugefügt werden.
- Die Deckkraft wird als Fließkommazahl im Bereich
0
(keine Deckkraft, vollkommen transparent) bis1
(volle Deckkraft, keine Transparenz) angegeben. Er wird, abweichend von den anderen Werten, mit einem Slash / getrennt.
Farbe | HSL-Wert | Hinweis |
---|---|---|
hsl(13 96% 40%)
|
rot | |
hsl(44 75% 50%)
|
gelb | |
hsl(201 50% 40%)
|
SELF-Blau | |
hsl(201 50% 40% /0.8)
|
80% Deckkraft | |
hsl(201 50% 40% /0.5)
|
50% Deckkraft | |
hsl(201 50% 40% /0.2)
|
20% Deckkraft |
Sättigung | ||||||
---|---|---|---|---|---|---|
100% | 75% | 50% | 25% | 0% | ||
Helligkeit | 100% | |||||
75% | ||||||
50% | ||||||
25% | ||||||
0% |
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.
Dieses Farbmodell ist nur für Bilddateien relevant, die für Printmedien vorgesehen sind. Es würde hier den Rahmen sprengen, eine detaillierte Erklärung über das Thema Druckvorstufe zu verfassen. Daher nur in aller Kürze, was sie tun und was sie vermeiden sollten:
Tun Sie:
- Verwenden Sie Bildbearbeitungssoftware, die mit ICC-Farbprofilen umgehen kann, wie z.B. Adobe Illustrator oder Inkscape für Vektorbilder und Adobe InDesign oder Scribus als DTP-Anwendung.
- Legen Sie wenigstens ein Farbprofil ihres Monitors per Softwarekalibrierung an. Machen Sie nur dann eine Hardwarekalibrierung, wenn ihr Unternehmen die passende Messtechnik zur Verfügung stellt.
- Laden sie die wichtigsten Farbprofile zum Exportieren von Grafiken von colormanagement.org und der European Color Initiative herunter.
- Sprechen Sie sich mit ihrer Medienagentur oder Druckerei ab, welches Exportprofil für welchen Papiertyp sinnvoll ist.
Vermeiden Sie:
- ohne Farbprofile zu arbeiten
- virtuelle PDF-Drucker oder Office-Anwendungen, weil diese nur Dateien generieren, die auf dem Bildschirm gut aussehen.
- das Ändern von CMYK-Werten mit einem gewöhnlichen Texteditor von Hand.
andere Farbmodelle
Das RGB-Modell stammt aus einer Zeit, in der Computer Farbpaletten mit 16, 256 und dann 16,7 Mio Farben darstellen konnten.
In der Spezifikation sind weitere Farbmodelle vorgesehen, die den Farbraum erweitern, bzw. an das menschliche Auge optimieren.
color()
Mit der color()-Funktion können explizit weitere Farbräume, so der P3-Farbraum für Monitore mit großem Farbumfang, definiert werden.
lab()
Die lab()-Funktion drückt eine bestimmte Farbe im CIE-Farbraum L*a*b* aus. Lab steht für den gesamten Farbbereich, den Menschen sehen können.[3][4]
lch()
Die lch()-Funktion drückt eine bestimmte Farbe im LCH-Farbraum aus. Sie hat die gleiche L-Achse wie lab(), verwendet aber die Polarkoordinaten C (Chroma) und H (Hue).[5]
Weblinks
- W3C: CSS Colors Level 4
- ↑ css-tricks: 8-Digit Hex Codes? vom 08.09.2016
- ↑ css-tricks: No-Comma Color Functions in CSS vom 04.12.2020
- ↑ MDN: lab()
- ↑ Wikipedia: Lab-Farbraum
- ↑ Lea Verou: LCH colors in CSS: what, why, and how?