CMYK to HSL Color Converter

What this tool does

A CMYK value tells a printer how to mix a colour, but it gives you nothing to grab onto if you want to adjust that colour for a screen. Make it lighter, ease its intensity, nudge its hue, and the ink percentages are no help at all. HSL is built for exactly that kind of tuning, which is why turning a CMYK colour into HSL is so handy.

That is what this does. You give it cyan, magenta, yellow, and key values, and it returns the same colour as HSL, three numbers for hue, saturation, and lightness that you can actually work with. Below the tool there is a plain account of what those numbers mean and why HSL makes a colour so much easier to adjust than its ink recipe.

How to use it

1. Enter your CMYK values. Put in the cyan, magenta, yellow, and key values, each as a decimal from 0 to 1 (for example, 0.2 rather than 20), or choose a colour with the picker.
2. Read the HSL result. The tool returns the hue in degrees and the saturation and lightness as percentages, right away.
3. Work from the numbers. Take the HSL values into your stylesheet or design tool, and treat them as a base you can adjust.

Type the four numbers in, or set a colour with the picker and read its HSL values from the result, depending on whether you are starting from ink percentages or from a colour.

How it works

HSL is a way of describing a screen colour, so the ink values have to reach the screen first. The tool turns your CMYK into the matching red, green, and blue, then re-expresses that as a hue, a saturation, and a lightness. The conversion is handled by chroma.js, a library that moves between colour models, from the ink mix all the way to HSL.

So the colour crosses from print to screen and is then re-described in HSL's terms, but the colour itself is not altered along the way. What you gain is a set of three numbers that line up with the things you would want to change, where the original four ink percentages gave you no obvious handle for adjusting the colour at all.

What HSL actually is

HSL stands for hue, saturation, and lightness, and it frames a colour in the terms a person naturally reaches for. The hue is which colour it is, set as an angle from 0 to 360 degrees on the colour wheel. The saturation, from zero to one hundred percent, is how vivid it is, from a flat grey to a pure colour. The lightness, also from zero to one hundred percent, runs from black through the pure colour to white.

The strength of laying a colour out this way is that the three qualities are separate and easy to picture. Instead of describing a colour by amounts of ink, or even by amounts of light, HSL describes it by its colour, its vividness, and its brightness, three dials you can turn one at a time. That is what makes it so much more workable than a CMYK recipe when you want to change a colour rather than print it.

How CMYK becomes HSL

The two could hardly be more different. CMYK is a set of ink amounts that absorb light from paper, made for a press. HSL is a perceptual description of a screen colour, made for choosing and adjusting. They sit in different colour worlds, so moving between them is a genuine conversion, not a simple rewrite of the same numbers.

The path runs through RGB. The four ink amounts are first turned into the red, green, and blue light that would reproduce the colour on screen, and from the relationship between those three channels the tool works out the hue, the saturation, and the lightness. So the colour crosses from ink to light, then is re-described in the form that lets you adjust it, with the colour kept faithful as a screen allows.

Why convert CMYK to HSL

The real prize is adjustment. A colour defined in CMYK is fixed as an ink recipe, but once it is in HSL the changes you usually want become single, obvious moves. Need it lighter for a background? Raise the lightness. Want it softer? Lower the saturation. After a related but different colour? Shift the hue. None of these is possible by eye in CMYK, and each is a one-number tweak in HSL.

That makes the conversion the natural first step when a print colour has to live and flex on screen. Designers turn a CMYK brand colour into HSL to build the lighter and darker tints a web design needs, to find a matching hover tone, or to derive a whole palette from a single printed colour. Whenever a fixed ink colour needs to become something you can work with digitally, HSL is where you want it.

From a fixed mix to an adjustable one

It helps to see the conversion as a change in what the colour is for. As CMYK, the colour is a finished instruction, a recipe meant to be printed exactly as written, with no expectation that you will tweak it. The four numbers are there to be reproduced, not adjusted, which is right for print but limiting anywhere else.

As HSL, the same colour becomes a starting point you can shape. The hue, saturation, and lightness are made to be moved, so the colour stops being a fixed recipe and turns into something you can lighten, mute, or shift at will. That shift, from a colour meant to be reproduced to a colour meant to be adjusted, is the real reason to convert, and it is what lets a print colour take on a flexible second life on screen.

Questions people ask

What are the HSL values?

Hue, saturation, and lightness: the hue is the colour's angle on the wheel, the saturation is how vivid it is, and the lightness is how light or dark it is. Together they make a colour easy to adjust.

Does CMYK convert straight to HSL?

No. The inks are first turned into RGB, then into hue, saturation, and lightness, since CMYK and HSL describe colour in very different ways.

Why convert a print colour to HSL?

To make it easy to adjust on screen. HSL lets you lighten, mute, or shift the colour by changing one number, which is far simpler than editing ink percentages.

Does every CMYK colour have an HSL form?

Yes. Screen colour covers a wider range than ink, so any CMYK mix can be expressed in HSL, then tuned freely for digital use.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. HSL and HSV, the hue-saturation colour models. Wikipedia. https://en.wikipedia.org/wiki/HSL_and_HSV
3. chroma.js (Gregor Aisch). Documentation. https://gka.github.io/chroma.js/