Convert HSL to CMYK
Converting Hue, Saturation, Lightness (HSL) to Cyan, Magenta, Yellow, Key (black) (CMYK) is a precise, rule-based operation — both formats describe the same color with different numbers. Whether you are tuning a CSS custom property, matching a brand color across design tools, or preparing values for print, this page gives you an interactive converter, the exact HSL → CMYK method, a worked example, a quick-reference table and the details that matter (rounding, gamut and print caveats).
From
To
—
—
—
Live preview
How to convert HSL to CMYK
Take this real example — the color firebrick(#c2410c):
hsl(17.47, 88.35%, 40.39%) → cmyk(0%, 66.49%, 93.81%, 23.92%)
- Convert the HSL color to RGB using the HSL → RGB method.
- Keep the three RGB channels (0–255) — this is the shared numeric base of every on-screen format.
- Convert RGB to CMYK with the RGB → CMYK method to finish.
HSL → RGB → CMYK (RGB is the numeric bridge)
HSL to CMYK conversion table
| Color | HSL | CMYK |
|---|---|---|
| White | hsl(0, 0%, 100%) | cmyk(0%, 0%, 0%, 0%) |
| Black | hsl(0, 0%, 0%) | cmyk(0%, 0%, 0%, 100%) |
| 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%) |
| VersatilBox accent | hsl(17.47, 88.35%, 40.39%) | cmyk(0%, 66.49%, 93.81%, 23.92%) |
| Tailwind blue-500 | hsl(217.22, 91.22%, 59.8%) | cmyk(76.02%, 47.15%, 0%, 3.53%) |
| Tailwind emerald-500 | hsl(160.12, 84.08%, 39.41%) | cmyk(91.35%, 0%, 30.27%, 27.45%) |
About these formats
HSL (Hue, Saturation, Lightness). HSL is a cylindrical way of thinking about RGB that matches how humans adjust color: pick a hue angle, then dial saturation and lightness. Defined by CSS Color 4.
CMYK (Cyan, Magenta, Yellow, Key (black)). CMYK is the subtractive model of print: inks layered on white paper. On-screen CMYK values are approximations — real print depends on ink profiles (ICC), not just numbers.
Frequently asked questions
How do I convert HSL to CMYK?
Convert the HSL color to RGB using the HSL → RGB method. Keep the three RGB channels (0–255) — this is the shared numeric base of every on-screen format. Convert RGB to CMYK with the RGB → CMYK method to finish. The converter above does it instantly, including the reverse direction.
What is HSL?
HSL — Hue, Saturation, Lightness — is a cylindrical way of thinking about RGB that matches how humans adjust color: pick a hue angle, then dial saturation and lightness. Defined by CSS Color 4.
What is CMYK used for?
CMYK (Cyan, Magenta, Yellow, Key (black)) is the subtractive model of print: inks layered on white paper. On-screen CMYK values are approximations — real print depends on ink profiles (ICC), not just numbers.
Is the HSL → CMYK conversion exact?
Numerically yes, colorimetrically no. The on-screen CMYK conversion is the standard ink approximation — an actual print run depends on the paper, ink and ICC profile, so treat the CMYK values as a starting point for prepress, not a proof.
Why does the CMYK value look different in other tools?
Small differences come from rounding (how many decimals are kept) and from out-of-gamut handling. This site follows the CSS Color 4 algorithms and shows OKLCH with 3 decimals, the same convention used by browsers and mainstream design tools.