HSL to CMYK Color Converter

What this tool does

HSL is a model for working on screen, all about hue, saturation, and lightness, while CMYK is a model for putting colour on paper with ink. When a colour you have tuned in HSL needs to be printed, those two worlds have to meet, and the HSL values have to be expressed as the four ink amounts a press understands.

That is what this does. You give it a colour as hue, saturation, and lightness, and it returns the matching CMYK percentages for cyan, magenta, yellow, and key. It hands you the four numbers to put into a print file or pass along to your printer, and the notes underneath explain why the printed colour can come out a little different from the screen.

How to use it

1. Enter your HSL values. Set the hue from 0 to 360 and the saturation and lightness as percentages, or choose a colour with the picker.
2. Read the CMYK result. Out come the cyan, magenta, yellow, and key percentages for that colour, right away.
3. Take the four numbers. Copy the CMYK values into your print settings, and keep an eye on the colour preview as you go.

Type the three HSL numbers in, or set a colour with the picker and read its CMYK values from the result, whichever suits the way you are working.

How it works

This conversion takes two hops, because HSL and CMYK are too far apart to bridge directly. First the hue, saturation, and lightness are turned into red, green, and blue, the common ground every screen colour shares. Then those RGB amounts are converted into the four CMYK ink values, both stages carried out by chroma.js, a library built to move between colour models.

Once the colour reaches RGB, the ink maths follows its usual course. The key, or black, amount is set by how dark the colour is overall, and the cyan, magenta, and yellow amounts fill in from there. The output is a device-independent CMYK reading, a solid basis a print workflow can take on and refine for the job at hand.

What CMYK actually is

CMYK is the way colour is described for printing, and the letters are the four inks involved: cyan, magenta, yellow, and key, where key is black. Each is written as a percentage, telling the press how much of that ink to lay down, so a CMYK value is really a recipe of four ink coverages combined on the page.

It behaves the opposite way to a screen because ink takes light away rather than giving it out. A blank sheet is white and bounces all light back; each ink you add soaks up part of that light, so heavier ink means a darker result, heading toward black as coverage builds. Black has its own ink because making it from stacked cyan, magenta, and yellow would flood the paper and still look weak, so a separate key ink keeps darks deep and text sharp.

How HSL becomes CMYK

The two models think about colour in entirely different terms. HSL frames it perceptually, as a hue on the wheel with a level of saturation and lightness, which is comfortable for choosing and adjusting on screen. CMYK frames it physically, as quantities of ink that absorb light off paper. Getting from one to the other means crossing from a description of appearance to a description of ink.

That crossing runs through RGB. The HSL values are first rebuilt as red, green, and blue light, and from those the converter calculates the ink amounts that would reflect the same colour off the page. The arithmetic is sound, but the two systems do not span the same set of colours, and that mismatch is what the print section below is about.

Why convert HSL to CMYK

The reason is print, plainly. HSL belongs to screen work, and a colour you have settled on there, perhaps after tuning its lightness and saturation, has to be turned into CMYK before it can be produced on paper, because that is the model a colour press runs on. Brochures, packaging, posters, and stationery are all CMYK jobs.

It counts for most with colours that must stay recognisable, like a brand colour carried from screen into print. Handing the printer CMYK values rather than leaving the colour to guesswork means the printed piece begins from a faithful version of what you designed. The conversion will not promise a flawless match by itself, but it points the job in the right direction from the start.

The print side to keep in mind

The thing to remember is that ink reaches fewer colours than a screen can light up. The span of colours CMYK can print is narrower than the span HSL can describe, so the most saturated, luminous colours, the kind that glow on a monitor, settle into something quieter once they are printed. That softening is the honest behaviour of ink, not a slip in the numbers.

So treat the CMYK figures as a trustworthy technical baseline rather than a sealed promise. Where the colour finally lands also rides on the paper, the inks, and the colour profile the printer uses, which is why any job where colour really matters gets a printed proof before the run. Convert here for a dependable starting value, and let a proof settle the rest.

Questions people ask

What is CMYK for?

It is the colour model used in printing, naming the four inks a press lays down: cyan, magenta, yellow, and key (black). Anything physically printed is produced in CMYK rather than HSL.

Does HSL convert straight to CMYK?

Not in one move. HSL is first turned into RGB, then RGB into CMYK, since the two are too far apart to bridge directly. The arithmetic is exact; the limit is that CMYK covers fewer colours than HSL.

Why does my colour look softer in print?

Because ink cannot match the most vivid screen colours. Those sit outside the printable range and come out muted. The paper, the inks, and the printer's profile shift it further still, so only a proof can settle it for sure.

Can I print a colour straight from HSL?

No. A press works in CMYK, so the HSL colour is converted to CMYK first. Use the four values here as the print-ready form of your HSL colour.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. CMYK color model, the subtractive model used in printing. Wikipedia. https://en.wikipedia.org/wiki/CMYK_color_model
3. chroma.js (Gregor Aisch). Documentation. https://gka.github.io/chroma.js/