Att ta en tryckpalett till webben är enklare i HSL: när din bläckblandning uttrycks som nyans, mättnad och ljusstyrka kan du bygga hover‑tillstånd, nyanser och toner av den på sekunder.
Hur CMYK till HSL-konvertering fungerar
- Konvertera CMYK‑procenten till RGB‑kanaler mellan 0 och 255.
- Dela kanalerna med 255 och ta deras maximum och minimum.
- Medelvärdet av maximum och minimum är ljusstyrkan L, deras spridning styr mättnaden S.
- Kanalen som innehåller maximum bestämmer nyansen H i grader på färghjulet.
Exempel som fungerar
CMYK till RGB‑steget är redan en approximation och HSL‑värden rundas till heltal. Resultatet är en mycket nära matchning, inte en färghanterad konvertering.
CMYK och HSL förklarat
Vad är CMYK?
CMYK är fyrfärgsmodellen som används i tryck: cyan, magenta, yellow och key (svart), vardera som en procent från 0 till 100. Bläcket subtraherar ljus istället för att avge det, så CMYK täcker färre färger än en skärm — därför ser ofta ljusa skärmtoner mattare ut i tryck.
- Syntax:
- cmyk(C%, M%, Y%, K%)
- Intervall:
- 0–100% per färg
- Bäst för:
- tryck, förpackningar, pressfärdigt material
Vad är HSL?
HSL delar upp en färg i hue (0–360° på färghjulet), saturation (hur färgrik, 0–100%) och lightness (hur ljus, 0–100%). Eftersom varje del motsvarar hur människor beskriver färg är HSL det enklaste formatet för att skapa nyanser, toner och konsekventa paletter — för hand eller i kod.
- Syntax:
- hsl(H, S%, L%)
- Intervall:
- 0–360°, 0–100%, 0–100%
- Bäst för:
- paletter, toner och nyanser, teman
CMYK till HSL referenstabell
De vanligaste CSS-färgerna, konverterade från CMYK till HSL.
| Färg | 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%) |