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.
- Read them as sRGB values and look the color up in the Coated FOGRA39 profile.
- Use the relative colorimetric intent with black point compensation, so white stays paper white and black maps to the darkest ink the press can print.
- Round the four ink values to whole percentages. They follow Photoshop's default European CMYK setting.
Worked example
Two conversions happen back to back, so rounding occurs twice, and the CMYK step uses the standard Coated FOGRA39 profile. Other CMYK profiles (for example from your print shop) give different numbers. 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(89%, 78%, 62%, 97%) |
| white | hsl(0, 0%, 100%) | cmyk(0%, 0%, 0%, 0%) |
| red | hsl(0, 100%, 50%) | cmyk(0%, 95%, 92%, 0%) |
| lime | hsl(120, 100%, 50%) | cmyk(64%, 0%, 100%, 0%) |
| blue | hsl(240, 100%, 50%) | cmyk(93%, 75%, 0%, 0%) |
| yellow | hsl(60, 100%, 50%) | cmyk(9%, 0%, 96%, 0%) |
| orange | hsl(39, 100%, 50%) | cmyk(0%, 42%, 94%, 0%) |
| teal | hsl(180, 100%, 25%) | cmyk(83%, 28%, 47%, 12%) |
| purple | hsl(300, 100%, 25%) | cmyk(63%, 100%, 5%, 2%) |
| gray | hsl(0, 0%, 50%) | cmyk(48%, 39%, 39%, 21%) |