HSV to CMYK Color Converter

What this tool does

HSV is a model you meet inside design software, picking a colour by its hue, saturation, and value. CMYK is the model a printing press runs on. When a colour you chose in an editor has to be printed, those two have to be reconciled, and the HSV values have to be turned into the four ink amounts a press can lay down.

That is what this does. You give it a colour as hue, saturation, and value, and it returns the matching CMYK percentages for cyan, magenta, yellow, and key. It gives you the four numbers to drop into a print file or hand to your printer, and the notes below explain why the printed colour can differ a little from what you saw on screen.

How to use it

1. Enter your HSV values. Set the hue from 0 to 360 and the saturation and value as percentages, or choose a colour with the picker.
2. Read the CMYK result. Back come the cyan, magenta, yellow, and key percentages, right away.
3. Take the four numbers. Copy the CMYK values into your print settings, keeping the colour preview in view as you go.

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

How it works

The conversion goes in two stages, since HSV and CMYK sit too far apart to join directly. First the hue, saturation, and value become red, green, and blue, the form every screen colour shares. Then those RGB amounts are turned into the four CMYK ink values, both stages handled by chroma.js, a library built for moving between colour models.

Once the colour is in RGB, the ink maths takes over in the usual way. The key, or black, amount follows from how dark the colour is overall, and the cyan, magenta, and yellow amounts are filled in from there. What comes out is a device-independent CMYK reading, a reliable basis a print workflow can pick up and adjust for the particular job.

What CMYK actually is

CMYK is the colour system used in printing, named for its four inks: cyan, magenta, yellow, and key, where key is black. A printed colour is built from these four, each laid down as a percentage from zero to one hundred, and combined on the page they reproduce the broad range of printable colour. This four-ink approach is exactly why ordinary colour printing is often called four-colour process.

The inks work by taking light away rather than giving it out. Where a screen emits light to build a colour, ink sits on white paper and absorbs light, each layer removing a little more, so heavier coverage reads as darker. Black has a plate of its own because reaching it from the three colours alone would flood the paper and still fall short of a true, deep black, so a dedicated key ink carries the darks and keeps text sharp.

How HSV becomes CMYK

The two models have almost nothing in common on the surface. HSV frames a colour perceptually, as a hue with a level of saturation and a value for brightness, which is how a picker presents it. CMYK frames it physically, as quantities of ink that absorb light from paper. Getting between them means moving from a description of how a colour looks to a description of how much ink makes it.

That move runs through RGB as a halfway point. The HSV 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 holds up well, but the two systems do not reach the same set of colours, and that gap is what the press section below is about.

Why convert HSV to CMYK

The reason is print, almost every time. HSV belongs to on-screen design, and a colour chosen there, perhaps inside an image editor's picker, has to become CMYK before it can be produced on paper, because that is the model a colour press uses. Packaging, posters, brochures, and labels are all CMYK jobs.

It matters most for colours that have to stay recognisable, such as a brand colour carried from an editor into print. Giving the printer CMYK values rather than leaving the colour to be guessed at means the printed piece starts from a faithful version of what you designed. The conversion will not guarantee a perfect match by itself, but it points the work the right way from the outset.

What happens on press

The point to plan around is that ink reaches fewer colours than a screen can show. The set of colours CMYK can print is smaller than the set HSV can describe, so the most saturated, luminous colours, the ones that seem to glow on a monitor, settle into something more restrained once they are printed. That toning down is the honest behaviour of ink, not a mistake in the figures.

So read the CMYK result as a trustworthy technical baseline rather than a guarantee. Where the colour finally lands also depends on the paper, the inks, and the colour profile the printer uses, which is why any job where colour matters is checked with a printed proof before the run. Convert here for a dependable starting value, and let the proof have the final word.

Questions people ask

Why is print done in CMYK?

Because a colour press builds every colour from four inks, cyan, magenta, yellow, and key. CMYK is the language that press works in, so anything printed is specified in it rather than in HSV.

Does HSV go straight to CMYK?

No. HSV is first turned into RGB, then RGB into the four ink values, since HSV and CMYK are too far apart to bridge in one move. The arithmetic is exact; CMYK simply covers fewer colours.

Why is the print less vivid than my screen?

Because ink covers a smaller range of colours than a screen. The brightest, most saturated colours cannot be mixed from the four inks, so they print more subdued than they appear on a monitor.

Should I trust the numbers exactly?

Treat them as a faithful starting point. The final colour depends on the paper, the inks, and the press profile, so confirm anything important with a printed proof before the full run.

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 four-colour process used in printing. Wikipedia. https://en.wikipedia.org/wiki/CMYK_color_model
3. chroma.js (Gregor Aisch). Documentation. https://gka.github.io/chroma.js/