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 sRGB-kanaler mellan 0 och 255 med profilen Coated FOGRA39.
- 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
Steget från CMYK till RGB använder den standardiserade profilen Coated FOGRA39, så andra CMYK-profiler (till exempel från ditt tryckeri) ger andra värden. HSL-värdena avrundas till hela tal.
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(89%, 78%, 62%, 97%) | hsl(0, 0%, 0%) |
| white | cmyk(0%, 0%, 0%, 0%) | hsl(0, 0%, 100%) |
| red | cmyk(0%, 95%, 92%, 0%) | hsl(1, 79%, 51%) |
| lime | cmyk(64%, 0%, 100%, 0%) | hsl(93, 60%, 44%) |
| blue | cmyk(93%, 75%, 0%, 0%) | hsl(224, 56%, 39%) |
| yellow | cmyk(9%, 0%, 96%, 0%) | hsl(57, 100%, 48%) |
| orange | cmyk(0%, 43%, 94%, 0%) | hsl(37, 93%, 53%) |
| teal | cmyk(83%, 27%, 48%, 12%) | hsl(180, 87%, 27%) |
| purple | cmyk(63%, 100%, 4%, 1%) | hsl(299, 58%, 31%) |
| gray | cmyk(48%, 39%, 39%, 21%) | hsl(30, 1%, 50%) |