CMYK to HSL converter
Enter the cyan, magenta, yellow and black percentages and get HSL values, which make lighter and darker shades easy to build in CSS.
Loading the tool…
Processing and privacy: The result is calculated inside your browser and your data is not sent to any server.
How to use it
- Enter cyan (c), magenta (m), yellow (y) and black (k).
- The result appears straight away and updates as you edit.
- Copy the result, or copy a link that keeps the same values to share it.
How it is calculated
With the percentages as fractions: R = 255 × (1 - C) × (1 - K), G = 255 × (1 - M) × (1 - K), B = 255 × (1 - Y) × (1 - K). Then (RGB kept unrounded): With max and min of R/255, G/255, B/255 and d = max - min: L = (max + min) / 2, S = d / (1 - |2L - 1|), and H = 60 × ((G - B) / d mod 6) when R is largest, 60 × ((B - R) / d + 2) when G is largest, 60 × ((R - G) / d + 4) when B is largest.
Example
Inputs: Cyan (C) = 60 %, Magenta (M) = 20 %, Yellow (Y) = 0 %, Black (K) = 20 %. Result: HSL code: hsl(200, 54.5%, 56%); Hue (H): 200 °; Saturation (S): 54.5 %.
Limits and caveats
- CMYK uses the naive device-independent formula with no ICC profile, so it will not match a specific press, paper or ink.
- Values in the code are rounded to one decimal, so converting back can shift an RGB channel by 1.
- All values are treated as sRGB, the default web color space, not Display P3 or Adobe RGB.
Questions about this tool
Why does lightness drop when K rises?
K darkens every channel together, so lightness L can never go above (100 minus K)%.
In what form do I enter CMYK values?
Enter each channel as a percentage from 0 to 100, as design apps show it, not as a fraction from 0 to 1.
Can I paste the HSL result straight into CSS?
Yes. The hsl() function works in every current browser, and the CSS line in the results is ready to copy as it is.