CSS Level 4 color CMYK und LCH

CSS CMYK

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. 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 und arbeiten im AdobeRGB-Farbraum). 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.

@color-profile und device-cmyk wurden von CSS Colors Level 4 auf Level 5 verschoben.

Zurzeit unterstützt kein Browser Farbangaben in CMYK. Allerdings können sie Fotos aus dem CMYK-Farbraum darstellen.

Übersättigte Farben in Firefox? How to configure Firefox color management.

In Chrome und Safari erscheinen die Farben leicht flau. CMYK ist nicht trivial – und der Monitor ist kein Papier hinter Glas.

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.

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

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 blaue und grüne LEDs 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.

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