CSS4 color CMYK und LCH

CSS Farbangaben in CMYK und LCH

Warum hat der CMYK in CSS3 den Weg ins W3C noch nicht gefunden? Sinn machen Farbangaben in CMYK nur, wenn die Elemente für den Druck gedacht sind und der Druckerfarbraum durch ein ICC-Farbprofil bekannt ist. Unsere Desktop-Drucker setzen RGB-Farben automatisch in das CMYK-Profil des jeweiligen Druckers um. Auf dem Monitor werden wir niemals CMYK sehen, sondern nur die Simulation von CMYK durch RGB-Werte.

18-12-15 SITEMAP

CSS CMYK

Drucker verwenden i.d.R. CMYK (Cyan, Magenta, Yellow, Black), aber wir sehen auf dem Monitor Farben im Geräte-Farbraum sRGB (es sei denn, wir hätten einen ausgemessenen profilierten Wide Gamut Monitor vor uns). Programme wie Photoshop können RGB-Bilder mit Hilfe des ICC-Farbmanagements in CMYK umrechnen und auch zurück von CMYK zu RGB.

Beide Wege sind verlustbehaftet und können zu Farbverschiebungen führen. Die Umrechnung von RGB in Druckerfarben ist keineswegs trivial. Und selbst wenn Photoshop ein Bild oder ein Farbfeld in CMYK umrechnet, bleibt die Darstellung auf dem Monitor RGB und simuliert nur das CMYK.

device-cmyk(0,1,0.5,0)

cmyk(0%,100%,0%,0%)

Wir warten auf CSS4

Zurzeit unterstützt kein Browser Farbangaben in CMYK. Bislang können Browser (außer Safari) auch Fotos aus dem CMYK-Farbraum nicht darstellen.

CMYK in RGB umrechnen

Und wenn die Vorlage des Logos in CMYK-Farben geliefert wurde? Zur Not lassen sich CMYK-Werte mit ein paar Zeilen Javascript in RGB umrechnen.

cmyk(0%,100%,21%,5%)

rgb(242,0,191)

color: cmyk(5%,21%,84%,0%)
color: device-cmyk(0.05, 0.21, 0.84, 0); // Fallback, falls kein Farbprofil vorliegt
color: rgb(242, 201, 41);

Zu Not – denn für eine saubere Umrechnung müssen die Farbprofile eingerechnet werden. Als Profil für den Monitor können wir sRGB voraussetzen, beim CMYK solle das Profil bekannt sein – z.B. ISO coated v2 (ECI).

Theoretisch lassen sich CMYK-Farben zwar in RGB umrechnen, aber in der Praxis kann nicht jeder CMYK-Wert in RGB reproduziert werden. Auch wenn wir immer wieder hören, dass der RGB-Farbraum größer als der CMYK-Farbraum sei, und auch wenn der Monitor einen größeren Farbraum als sRGB hat, können nicht alle CMYK-Farben auf einem Monitor dargestellt werden.

Das Color Management nimmt dann einen möglichst ähnlichen Farbton.

CMYK-Farben in sRGB nicht darstellbar

Gerade Cyan-Töne sind beschnitten. Kann man sich gut vorstellen: Immerhin hat der Drucker Cyan-Tinte an Bord, während der Monitor Cyan durch blaues und grüne LED zusammensetzen muss.

Von CMYK nach RGB: Photoshop

Anders als das schlichte Javascript im Beispiel oben kommt Photoshop zu einem leicht abweichenden RGB. Das kleine Symbol eines Würfels neben dem Farbfeld ist ein Warnhinweis, dass hier keine websichere Farbe vorliegt.

Photoshop-Farbwähler

Ein Klick auf den Warnhinweis liefert die nächste websichere Farbe, die möglichst nah an das Ergebnis herankommt.

Zur Not lassen sich CMYK-Werte mit ein paar Zeilen Javascript in RGB umrechnen.

180° Cyans Saturation 100% 75% 50% 25% 0% 100 88 75 63 50 38 25 13 0