Grafik/Farbe/Farbmodelle

Aus SELFHTML-Wiki
< Grafik‎ | Farbe(Weitergeleitet von Hsl())
Wechseln zu: Navigation, Suche

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.

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

additive Farbmischung im RGB-Modell ansehen …
<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>
ansehen …

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.

Beispiele zu hexadezimalen Farbangaben
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).

Beispiele zu hexadezimalen Farbangaben
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
Beachten Sie: Die Kurzschreibweise mit 3 Hex-Stellen ist bei HTML- und SVG-Attributen nicht erlaubt.

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]

Browserunterstützung
caniuse.com

#RRGGBBAA

Beispiele zu hexadezimalen Farbangaben
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.

Browserunterstützung
caniuse.com

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.

Beispiele für RGB-Mischungen
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
Beachten Sie: Leerzeichen anstelle von Kommas?
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.
Beachten Sie: rgba()
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).


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


hsl()

Eine HSL-Mischung kann mit einer CSS-Funktion notiert werden:

Browserunterstützung
caniuse.com

hsl(Farbton Sättigung Helligkeit [/ Alphawert])

Sie enthält 3, bzw. 4 durch Leerzeichen getrennte Werte:

  • 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.
  • 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 von 50% 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) bis 1 (volle Deckkraft, keine Transparenz) angegeben. Er wird, abweichend von den anderen Werten, mit einem Slash / getrennt.
Beispiele für HSL-Mischungen
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
Verschiedene Sättigungs- und Helligkeitswerte
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.

Beachten Sie: Im Augenblick ist es in keinem Browser implementiert und auch die CSS Color 4 Spezifikation hat es zurückgestellt.

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.

Browserunterstützung
caniuse.com

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]

Browserunterstützung
caniuse.com

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]

Browserunterstützung
caniuse.com


Weblinks

  1. ↑ css-tricks: 8-Digit Hex Codes? vom 08.09.2016
  2. ↑ css-tricks: No-Comma Color Functions in CSS vom 04.12.2020
  3. ↑ MDN: lab()
  4. ↑ Wikipedia: Lab-Farbraum
  5. ↑ Lea Verou: LCH colors in CSS: what, why, and how?
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Grafik/Farbe/Farbmodelle&oldid=87963#hsl.28.29“