Eine Druckpalette ins Web zu übertragen ist in HSL leichter: Sobald deine Farbmischung als Farbton, Sättigung und Helligkeit vorliegt, baust du daraus in Sekunden Hover-Zustände und Abstufungen.
So funktioniert die Umrechnung von CMYK in HSL
- Rechne die CMYK-Prozentwerte in RGB-Kanäle zwischen 0 und 255 um.
- Teile die Kanäle durch 255 und bestimme Maximum und Minimum.
- Der Mittelwert aus Maximum und Minimum ist die Helligkeit L, ihr Abstand bestimmt die Sättigung S.
- Der Kanal mit dem Maximum legt den Farbton H in Grad auf dem Farbkreis fest.
Beispiel zum Nachrechnen
Schon der Schritt von CMYK zu RGB ist eine Näherung, und HSL-Werte werden auf ganze Zahlen gerundet. Das Ergebnis ist eine sehr genaue Entsprechung, aber keine farbverbindliche Umrechnung.
CMYK und HSL erklärt
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
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
Referenztabelle CMYK zu HSL
Die gängigsten CSS-Farben, umgerechnet von CMYK nach HSL.
| Farbe | CMYK | HSL |
|---|---|---|
| black | cmyk(0%, 0%, 0%, 100%) | hsl(0, 0%, 0%) |
| white | cmyk(0%, 0%, 0%, 0%) | hsl(0, 0%, 100%) |
| red | cmyk(0%, 100%, 100%, 0%) | hsl(0, 100%, 50%) |
| lime | cmyk(100%, 0%, 100%, 0%) | hsl(120, 100%, 50%) |
| blue | cmyk(100%, 100%, 0%, 0%) | hsl(240, 100%, 50%) |
| yellow | cmyk(0%, 0%, 100%, 0%) | hsl(60, 100%, 50%) |
| orange | cmyk(0%, 35%, 100%, 0%) | hsl(39, 100%, 50%) |
| teal | cmyk(100%, 0%, 0%, 50%) | hsl(180, 100%, 25%) |
| purple | cmyk(0%, 100%, 0%, 50%) | hsl(300, 100%, 25%) |
| gray | cmyk(0%, 0%, 0%, 50%) | hsl(0, 0%, 50%) |