In diesem Artikel wird der Unterschied zwischen Farbräumen und Farbmodellen erklärt und du erfährst, wie verschiedene Farbformate ineinander umgerechnet werden können.
Inhaltsverzeichnis
Der Unterschied zwischen Farbmodellen und Farbräumen
Oftmals werden die beiden Begriffe Farbmodell und Farbraum miteinander verwechselt, tatsächlich aber muss man diese voneinander unterscheiden. Ein Farbmodell stellt im Prinzip das Grundgerüst dar, also mathematisch gesehen das Koordinatensystem. Das bekannteste davon ist wohl das RGB-Farbmodell: mit Hilfe von drei Dimensionen wird die einzelne Farbe aus den drei Grundfarben Rot (R), Grün (G) und Blau (B) beschrieben. Anschaulich kann man sich das Ganze als Würfel vorstellen, dessen Höhe, Breite und Tiefe den jeweiligen Farbanteil widerspiegeln. Die meisten Farbmodelle bestehen dabei aus drei oder vier Dimensionen.
Zu einem Farbmodell, also dem bestimmten Koordinatensystem, gibt es unterschiedliche Farbräume, die sich auf dieses Farbmodell beziehen. Dies bedeutet ganz einfach, dass jedem Zahlenwert des Farbmodells eine konkrete Farbe zugewiesen wird. Der bekannteste Farbraum und de facto Standard im Internet, ist der sRGB-Farbraum, der auf dem RGB-Farbmodell basiert.
Unterschiedliche Farbmodelle
Nachfolgend werden die gebräuchlichsten Farbmodelle RGB, HSL, HSV/HSB, HWB und YCMK vorgestellt.
RGB-Farbmodell
Wie schon in der Einleitung erwähnt, besteht das RGB-Farbmodell aus den drei Grundfarben Rot (R), Grün (G) und Blau (B). Eine konkrete Farbe ist stets eine Mischung aus diesen drei Komponenten. Es handelt sich hierbei um ein additives Farbsystem, bei dem die Farben anhand von ausgesendetem Licht erzeugt werden. Üblicherweise wird die Intensität jeder dieser Farben mit einer Zahl von 0 bis 255 beschrieben. Ohne einen konkreten Farbraum hat dieser RGB-Wert allerdings zunächst noch keine Bedeutung, da erst die Auswahl des Farbraums den einzelnen Werten konkrete Farben zuordnet. Grafisch kann man sich das als Würfel vorstellen, bei dem jede Dimension einem anderen RGB-Kanal entspricht. Mathematisch reden wir hier von einem kartesischen Koordinatensystem.
HSL-Farbmodell
Dieses Farbmodell verwendet die drei Komponenten Farbton (H: Hue), Sättigung (S: Saturation) und Farbhelligkeit (L: Lightness). Vorstellen kann man sich das entweder korrekterweise als Zylinder oder etwas intuitiver als doppelter Farbkegel. Der Farbton (H) wird dabei als Winkel auf dem Farbkreis von 0° bis 360° beschrieben. Die Sättigung (S) hingegen wird üblicherweise in Prozent von 0 bis 100 angegeben und nimmt vom Rand des Farbkreises zur Mitte hin ab, d.h. auf dem Rand ist der Farbton satt und kräftig und zur Mitte hin wird er schwächer und endet dann in der Mitte in einem Grauwert. Die Farbhelligkeit wird normalerweise ebenfalls in Prozent angegeben. Der Wert 0 entspricht dabei der unteren Spitze des Doppelkegels (schwarz) und der Wert 100 repräsentiert die obere Spitze (weiß). Es lässt sich somit erkennen, dass im HSL-Farbmodell für die maximale Sättigung eine Farbhelligkeit von 50 % eingestellt werden muss. Der Farbkegel als Vorstellung ist deshalb intuitiver, weil alle Farben mit wachsender Dunkelheit gegen Schwarz konvergieren und mit wachsender Helligkeit gegen Weiß.
HSV/HSB-Farbmodell
Das HSV- bzw. HSB-Farbmodell ist ähnlich zum HSL-Farbmodell. Das H steht ebenfalls für den Farbton (Hue), das S für die Sättigung (Saturation) und das V bzw. B für die Helligkeit (Value, Brightness). Im Unterschied zum HSL-Modell müssen wir uns das HSV/HSB-Farbmodell als ein auf dem Kopf stehender einfacher Kegel vorstellen. Die maximale Sättigung der Farben ist dabei nicht in der Mitte bei 50 %, sondern ganz oben bei 100 %. Oben in der Mitte ist die Farbe Weiß und nach unten hin konvergieren alle Farben gegen Schwarz.
HWB-Farbmodell
Ebenfalls ähnlich zu den beiden zuvor beschriebenen Modellen ist das HWB-Farbmodell. H steht nach wie vor für den Farbton (Hue) und die anderen beiden Komponenten sind der Weißanteil (W: Whiteness) sowie der Schwarzanteil (B: Blackness). Wenn wir uns das wieder als Kegelform vorstellen, dann ist der Rand der Bodenfläche weiß, in der Mitte der Bodenfläche sind die Farben am kräftigsten und nach oben hin zur Spitze gehen die Farben in Schwarz über. Tatsächlich ist hier die Kegelform von der Vorstellung zutreffender als ein Zylinder, denn die Summe des Weißanteils und des Schwarzanteils dürfen maximal 100 % betragen bzw. werden beim Umrechnen in ein anderes Farbmodell entsprechend nach unten skaliert, falls der Wert überschritten ist.
CMYK-Farbmodell
Das CMYK-Farbmodell ist ein subtraktives Farbsystem, das für den Druck verwendet wird. Subtraktiv heißt, dass die Farben auf eine Oberfläche aufgetragen werden (z.B. Papier) und je mehr davon aufgebracht wird, desto mehr reflektierendes Licht wird "verschluckt", also desto dunkler wird es. CMYK steht für die Komponenten Cyan (C), Magenta (M), Gelb (Y: Yellow) und Schwarz (K: Key). Der Wertebereich der einzelnen Komponenten geht von 0 bis 100 %. Wenn 0 % auf ein weißes Papier aufgetragen wird, dann ist es - oh Wunder - weiß. Bei 100 % der drei Grundfarben CMY entsteht im Prinzip ein Schwarz, aber nur im Prinzip. In der Realität ist dies dann doch kein so tiefes Schwarz, wie man das gerne hätte, aus diesem Grund gibt es eben noch das zusätzliche Schwarz (K), was in der Regel auch kostengünstiger ist, als es aus den drei Grundfarben zu mischen.
Im Gegensatz zu den anderen bisher vorgestellten Farbmodellen kann man nicht so ohne weitere Informationen eine Farbe vom bzw. in das CMYK-System konvertieren. Manche Webseiten bieten dies zwar an, aber in der Regel ist das Ergebnis überhaupt nicht brauchbar, denn die Umwandlung ist abhängig vom jeweiligen Druckverfahren. Für eine sinnvolle Umrechnung benötigt man genormte Datensätze, die sogenannten ICC-Farbprofile.
Unterschiedliche Farbräume
Ein Farbraum ordnet den Zahlenwerten eines Farbmodells konkrete Farben zu. Neben dem sRGB-Farbraum, dem de facto Standard im Internet, gibt es noch zahlreiche weitere Farbräume. Am bekanntesten sind wohl der Adobe-RGB-Farbraum und der DCI-P3-Farbraum.
sRGB-Farbraum
Der sRGB-Farbraum wird hauptsächlich für die Anzeige von Bildern auf Bildschirmen verwendet. Dieser Farbraum wurde in den 1990er-Jahren entwickelt, um eine einheitliche Farbwiedergabe auf unterschiedlichen Geräten zu ermöglichen. Wichtig zu verstehen ist, dass mit dem sRGB-Farbraum nur ca. ein Drittel der von unserem Auge unterscheidbaren Farben dargestellt werden kann, d.h. es gibt Farben, die auf dem Monitor nicht sichtbar sind.
Adobe-RGB-Farbraum
Der Adobe-RGB-Farbraum wurde für professionelle Bildanwendungen, wie z.B. der Druckvorstufe oder der Fotografie entwickelt. Mit sRGB und Adobe-RGB können jeweils gleich viele Farben dargestellt werden, aber der Adobe-RGB-Farbraum kann ein größeres Spektrum abbilden, insbesondere im blauen und grünen Bereich. Falls dein Computerbildschirm oder Mobilgerät dazu in der Lage ist, diesen Farbraum darzustellen, dann können dir hiermit grundsätzlich Farben angezeigt werden, wozu sRGB nicht in der Lage ist. Falls dein Anzeigegerät ohnehin nur sRGB-fähig ist, dann ist es allerdings ein Ding der Unmöglichkeit, dir den Unterschied tatsächlich aufzuzeigen.
DCI-P3-Farbraum
Ein weiter Farbraum ist der DCI-P3-Farbraum, der einen vergleichbar großen Bereich abdeckt wie der Adobe-RGB-Farbraum, allerdings ist er im Vergleich dazu etwas rotverschoben. Ursprünglich wurde dieser Farbraum für die Film- und Kinoindustrie entwickelt.
Umwandlung der Farbmodelle in PHP
Bei dem auf dieser Seite implementierten Farbformat-Konverter finden intern verschiedene Umwandlungen in der Programmiersprache PHP statt. Für alle Programmierbegeisterten werden nachfolgend die konkreten Algorithmen zur Konvertierung vorgestellt.
RGB in HEX umwandeln
//---------------------------------------------------------------------------------------------------------------- /*! \brief Convert RGB to HEX \param[in] $o_R Red value [0,255] \param[in] $o_G Green value [0,255] \param[in] $o_B Blue value [0,255] \return String with HEX value (e.g. #123456) */ //---------------------------------------------------------------------------------------------------------------- function rgb_to_hex($o_R, $o_G, $o_B) { $R = sprintf("%02x", $o_R); $G = sprintf("%02x", $o_G); $B = sprintf("%02x", $o_B); return strtoupper("#".$R.$G.$B); }
RGB in HSV umwandeln
//---------------------------------------------------------------------------------------------------------------- /*! \brief Convert RGB to HSV \param[in] $o_R Red value [0,255] \param[in] $o_G Green value [0,255] \param[in] $o_B Blue value [0,255] \return Array with HSV values (H: [0,360], S: [0,100], V: [0,100]) */ //---------------------------------------------------------------------------------------------------------------- function rgb_to_hsv($o_R, $o_G, $o_B) { $r = $o_R / 255; $g = $o_G / 255; $b = $o_B / 255; $min_RGB = min($r, $g, $b); $max_RGB = max($r, $g, $b); $delta = $max_RGB - $min_RGB; if ($delta == 0) // R = G = B { $H = 0; $S = 0; } else { if ($r == $max_RGB) { $H = 60 * (($g - $b) / $delta); if ($H < 0) { $H += 360; } } else if ($g == $max_RGB) { $H = 60 * (2 + (($b - $r) / $delta)); } else { $H = 60 * (4 + (($r - $g) / $delta)); } $S = 100 * ($delta / $max_RGB); } // V is simply the maximum value of R, G, B $V = 100 * $max_RGB; return array( "H" => $H, "S" => $S, "V" => $V ); }
RGB in HSL umwandeln
//---------------------------------------------------------------------------------------------------------------- /*! \brief Convert RGB to HSL \param[in] $o_R Red value [0,255] \param[in] $o_G Green value [0,255] \param[in] $o_B Blue value [0,255] \return Array with HSL values (H: [0,360], S: [0,100], L: [0,100]) */ //---------------------------------------------------------------------------------------------------------------- function rgb_to_hsl($o_R, $o_G, $o_B) { $r = $o_R / 255; $g = $o_G / 255; $b = $o_B / 255; $min_RGB = min($r, $g, $b); $max_RGB = max($r, $g, $b); $delta = $max_RGB - $min_RGB; if ($delta == 0) // R = G = B { $H = 0; $S = 0; } else { if ($r == $max_RGB) { $H = 60 * (($g - $b) / $delta); if ($H < 0) { $H += 360; } } else if ($g == $max_RGB) { $H = 60 * (2 + (($b - $r) / $delta)); } else { $H = 60 * (4 + (($r - $g) / $delta)); } $S = 100 * ($delta / (1 - abs($min_RGB + $max_RGB - 1))); } $L = 100 * ($min_RGB + $max_RGB) / 2; return array( "H" => $H, "S" => $S, "L" => $L, ); }
HSV in RGB umwandeln
//---------------------------------------------------------------------------------------------------------------- /*! \brief Convert HSV to RGB \param[in] $o_H Hue [0,360] \param[in] $o_S Saturation [0,100] \param[in] $o_V Value [0,100] \return Array with RGB values (R: [0,255], G: [0,255], B: [0,255]) */ //---------------------------------------------------------------------------------------------------------------- function hsv_to_rgb($o_H, $o_S, $o_V) { $H = $o_H; $s = $o_S / 100; $v = $o_V / 100; $hi = floor($H / 60); $f = ($H / 60) - $hi; $p = $v * (1 - $s); $q = $v * (1 - ($s * $f)); $t = $v * (1 - ($s * (1 - $f))); switch ($hi) { case 1: $r = $q; $g = $v; $b = $p; break; case 2: $r = $p; $g = $v; $b = $t; break; case 3: $r = $p; $g = $q; $b = $v; break; case 4: $r = $t; $g = $p; $b = $v; break; case 5: $r = $v; $g = $p; $b = $q; break; default: $r = $v; $g = $t; $b = $p; break; } $R = 255 * $r; $G = 255 * $g; $B = 255 * $b; return array( "R" => $R, "G" => $G, "B" => $B, ); }
HSV in HSL umwandeln
//---------------------------------------------------------------------------------------------------------------- /*! \brief Convert HSV to HS \param[in] $o_H Hue [0,360] \param[in] $o_S Saturation [0,100] \param[in] $o_V Value [0,100] \return Array with HSL values (H: [0,360], S: [0,100], L: [0,100]) */ //---------------------------------------------------------------------------------------------------------------- function hsv_to_hsl($o_H, $o_S, $o_V) { $HSV_H = $o_H; $HSV_s = $o_S / 100; $HSV_v = $o_V / 100; $HSL_H = $HSV_H; $HSL_l = $HSV_v * (1 - ($HSV_s / 2)); if (($HSL_l == 0) || ($HSL_l == 1)) { $HSL_s = 0; } else { $HSL_s = ($HSV_v - $HSL_l) / min($HSL_l, (1 - $HSL_l)); } $HSL_S = 100 * $HSL_s; $HSL_L = 100 * $HSL_l; return array( "H" => $HSL_H, "S" => $HSL_S, "L" => $HSL_L, ); }
HSL in HSV umwandeln
//---------------------------------------------------------------------------------------------------------------- /*! \brief Convert HSL to HSV \param[in] $o_H Hue [0,360] \param[in] $o_S Saturation [0,100] \param[in] $o_L Lightness [0,100] \return Array with HSV values (H: [0,360], S: [0,100], V: [0,100]) */ //---------------------------------------------------------------------------------------------------------------- function hsl_to_hsv($o_H, $o_S, $o_L) { $HSL_H = $o_H; $HSL_s = $o_S / 100; $HSL_l = $o_L / 100; $HSV_H = $HSL_H; $HSV_v = $HSL_l + ($HSL_s * min($HSL_l, (1 - $HSL_l))); if ($HSV_v == 0) { $HSV_s = 0; } else { $HSV_s = 2 * (1 - ($HSL_l / $HSV_v)); } $HSV_S = 100 * $HSV_s; $HSV_V = 100 * $HSV_v; return array( "H" => $HSV_H, "S" => $HSV_S, "V" => $HSV_V, ); }
HSV in HWB umwandeln
//---------------------------------------------------------------------------------------------------------------- /*! \brief Convert HSV to HWB \param[in] $o_H Hue [0,360] \param[in] $o_S Saturation [0,100] \param[in] $o_V Value [0,100] \return Array with HWB values (H: [0,360], W: [0,100], B: [0,100]) */ //---------------------------------------------------------------------------------------------------------------- function hsv_to_hwb($o_H, $o_S, $o_V) { $HSV_H = $o_H; $HSV_s = $o_S / 100; $HSV_v = $o_V / 100; $HWB_H = $HSV_H; $HWB_w = (1 - $HSV_s) * $HSV_v; $HWB_b = 1 - $HSV_v; $HWB_W = 100 * $HWB_w; $HWB_B = 100 * $HWB_b; return array( "H" => $HWB_H, "W" => $HWB_W, "B" => $HWB_B, ); }
HWB in HSV umwandeln
//---------------------------------------------------------------------------------------------------------------- /*! \brief Convert HWB to HSV Precondition: Whiteness + Blackness < 100% \param[in] $o_H Hue [0,360] \param[in] $o_W Whiteness [0,100] \param[in] $o_B Blackness [0,100] \return Array with HSV values (H: [0,360], S: [0,100], V: [0,100]) */ //---------------------------------------------------------------------------------------------------------------- function hwb_to_hsv($o_H, $o_W, $o_B) { $HWB_H = $o_H; $HWB_w = $o_W / 100; $HWB_b = $o_B / 100; $HSV_H = $HWB_H; $HSV_v = 1 - $HWB_b; if ($HWB_b < 1) { $HSV_s = 1 - ($HWB_w / (1 - $HWB_b)); } else { $HSV_s = 0; } $HSV_S = 100 * $HSV_s; $HSV_V = 100 * $HSV_v; return array( "H" => $HSV_H, "S" => $HSV_S, "V" => $HSV_V, ); }
Fazit
Wir kennen jetzt den Unterschied zwischen Farbmodellen und Farbräumen. Die wichtigsten Beispiele davon wurden präsentiert und für die technisch interessierten unter euch wurden die konkreten Funktionen gezeigt, die zur Umwandlung bei dem auf dieser Seite zur Verfügung gestellten Farbkonverter verwendet werden.
ZUM FARBFORMAT-KONVERTER
