In HSL entworfene Paletten landen oft auf Papier. Dieser Konverter nimmt den gewählten Farbton, die Sättigung und die Helligkeit und gibt die vier Farbanteile zurück, mit denen eine Druckerei arbeitet.
So funktioniert die Umrechnung von HSL in CMYK
- Rechne das HSL-Tripel in RGB-Kanäle zwischen 0 und 255 um.
- Lies sie als sRGB-Werte und schlage die Farbe im Profil Coated FOGRA39 nach.
- Nutze die relativ farbmetrische Wiedergabeart mit Tiefenkompensierung, damit Weiß Papierweiß bleibt und Schwarz auf die dunkelste Druckfarbe fällt, die die Maschine drucken kann.
- Runde die vier Farbwerte auf ganze Prozent. Sie folgen der Photoshop-Standardeinstellung für Europa.
Beispiel zum Nachrechnen
Es werden zwei Umrechnungen hintereinander ausgeführt, also wird zweimal gerundet, und der CMYK-Schritt nutzt das Standardprofil Coated FOGRA39. Andere CMYK-Profile (zum Beispiel von deiner Druckerei) liefern andere Zahlen. Das Druckergebnis wirkt in der Regel etwas weniger kräftig als die HSL-Vorschau.
HSL und CMYK erklärt
Was ist HSL?
HSL zerlegt eine Farbe in Farbton (0–360° auf dem Farbkreis), Sättigung (wie farbig, 0–100%) und Helligkeit (wie hell, 0–100%). Weil jeder Teil dem entspricht, wie Menschen über Farbe sprechen, ist HSL das einfachste Format für Abstufungen und konsistente Paletten, von Hand oder im Code.
- Syntax:
- hsl(H, S%, L%)
- Wertebereich:
- 0–360°, 0–100%, 0–100%
- Ideal für:
- Paletten, Farbabstufungen, Theming
Was ist CMYK?
CMYK ist das Vierfarbmodell des Drucks: Cyan, Magenta, Gelb und Key (Schwarz), jeweils als Prozentwert von 0 bis 100. Druckfarbe schluckt Licht, statt es auszusenden. Deshalb deckt CMYK weniger Farben ab als ein Bildschirm, und leuchtende Bildschirmfarben wirken gedruckt oft matter.
- Syntax:
- cmyk(C%, M%, Y%, K%)
- Wertebereich:
- 0–100% pro Farbe
- Ideal für:
- Druck, Verpackung, druckfertige Daten
Referenztabelle HSL zu CMYK
Die gängigsten CSS-Farben, umgerechnet von HSL nach CMYK.
| Farbe | HSL | CMYK |
|---|---|---|
| black | hsl(0, 0%, 0%) | cmyk(89%, 78%, 62%, 97%) |
| white | hsl(0, 0%, 100%) | cmyk(0%, 0%, 0%, 0%) |
| red | hsl(0, 100%, 50%) | cmyk(0%, 95%, 92%, 0%) |
| lime | hsl(120, 100%, 50%) | cmyk(64%, 0%, 100%, 0%) |
| blue | hsl(240, 100%, 50%) | cmyk(93%, 75%, 0%, 0%) |
| yellow | hsl(60, 100%, 50%) | cmyk(9%, 0%, 96%, 0%) |
| orange | hsl(39, 100%, 50%) | cmyk(0%, 42%, 94%, 0%) |
| teal | hsl(180, 100%, 25%) | cmyk(83%, 28%, 47%, 12%) |
| purple | hsl(300, 100%, 25%) | cmyk(63%, 100%, 5%, 2%) |
| gray | hsl(0, 0%, 50%) | cmyk(48%, 39%, 39%, 21%) |