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.
- Normalisiere diese Kanäle, indem du sie durch 255 teilst.
- Berechne den Key-Anteil K = 1 − max(R, G, B).
- Leite C, M und Y aus den verbleibenden Kanälen ab und rechne alle vier in Prozent um.
Beispiel zum Nachrechnen
Es werden zwei Umrechnungen hintereinander ausgeführt, also wird zweimal gerundet, und CMYK bleibt ohne Farbprofil eine Näherung. 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(0%, 0%, 0%, 100%) |
| white | hsl(0, 0%, 100%) | cmyk(0%, 0%, 0%, 0%) |
| red | hsl(0, 100%, 50%) | cmyk(0%, 100%, 100%, 0%) |
| lime | hsl(120, 100%, 50%) | cmyk(100%, 0%, 100%, 0%) |
| blue | hsl(240, 100%, 50%) | cmyk(100%, 100%, 0%, 0%) |
| yellow | hsl(60, 100%, 50%) | cmyk(0%, 0%, 100%, 0%) |
| orange | hsl(39, 100%, 50%) | cmyk(0%, 35%, 100%, 0%) |
| teal | hsl(180, 100%, 25%) | cmyk(100%, 1%, 0%, 50%) |
| purple | hsl(300, 100%, 25%) | cmyk(0%, 100%, 1%, 50%) |
| gray | hsl(0, 0%, 50%) | cmyk(0%, 0%, 0%, 50%) |