Paletter designade i HSL hamnar ofta på papper. Denna omvandlare tar den nyans, mättnad och ljusstyrka du valt och returnerar de fyra bläckprocent som ett tryckeri arbetar med.
Hur HSL till CMYK-konvertering fungerar
- Konvertera HSL‑trippeln till RGB‑kanaler mellan 0 och 255.
- Normalisera dessa kanaler genom att dela med 255.
- Beräkna nyckelkomponenten K = 1 − max(R, G, B).
- Härled C, M och Y från de återstående kanalerna och konvertera alla fyra till procent.
Exempel som fungerar
Två konverteringar sker i följd, så avrundning sker två gånger — och CMYK förblir en approximation utan färgprofil. Förvänta dig att det tryckta resultatet blir något mindre livfullt än HSL‑förhandsvisningen.
HSL och CMYK förklarat
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
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
HSL till CMYK referenstabell
De vanligaste CSS-färgerna, konverterade från HSL till CMYK.
| Färg | 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%) |