Palettes designed in HSL often end up on paper. This converter takes the hue, saturation and lightness you chose and returns the four ink percentages a print shop works with.
How HSL to CMYK conversion works
- Convert the HSL triple to RGB channels between 0 and 255.
- Normalise those channels by dividing by 255.
- Compute the key component K = 1 − max(R, G, B).
- Derive C, M and Y from the remaining channels and convert all four to percentages.
Worked example
Two conversions happen back to back, so rounding occurs twice, and CMYK stays an approximation without a color profile. Expect the printed result to be slightly less vivid than the HSL preview.
HSL and CMYK explained
What is HSL?
HSL splits a color into hue (0–360° on the color wheel), saturation (how colorful, 0–100%) and lightness (how bright, 0–100%). Because each part matches the way people describe color, HSL is the easiest format for building tints, shades and consistent palettes, by hand or in code.
- Syntax:
- hsl(H, S%, L%)
- Range:
- 0–360°, 0–100%, 0–100%
- Best for:
- palettes, tints and shades, theming
What is CMYK?
CMYK is the four-ink model used in printing: cyan, magenta, yellow and key (black), each as a percentage from 0 to 100. Ink subtracts light instead of emitting it, so CMYK covers fewer colors than a screen, which is why bright screen colors often look duller once they are printed.
- Syntax:
- cmyk(C%, M%, Y%, K%)
- Range:
- 0–100% per ink
- Best for:
- print, packaging, press-ready artwork
HSL to CMYK reference table
The most common CSS colors, converted from HSL to CMYK.
| Color | 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%) |