CMYK to HSV Color Converter

What this tool does

A CMYK value is a print recipe, and an HSV value is what a colour picker hands you. They sit in different worlds, so when a colour defined for print needs to go into an image editor, where the picker works in hue, saturation, and value, the ink percentages have to be turned into HSV first. Otherwise there is no clean way to enter the colour.

That is what this does. You give it cyan, magenta, yellow, and key values, and it returns the same colour as HSV, three numbers for hue, saturation, and value that a picker understands. Below the tool there is a plain explanation of what those numbers mean and how the conversion crosses from ink to the model editors use.

How to use it

1. Enter your CMYK values. Enter the cyan, magenta, yellow, and key values, each as a decimal from 0 to 1 (for example, 0.2 rather than 20), or pick a colour with the picker.
2. Read the HSV result. The tool returns the hue in degrees and the saturation and value as percentages, right away.
3. Carry it across. Take the HSV numbers into your image editor's colour picker, or use them as a base to work from.

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

How it works

HSV describes 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 value. The conversion is handled by chroma.js, a library that moves between colour models, from the ink mix through to HSV.

So the colour crosses from print to screen and is then re-described in the picker's terms, while the colour itself stays as it was. What you gain is a set of three numbers laid out the way an editor presents a colour, where the original four ink percentages gave you nothing a picker could take directly.

What HSV actually is

HSV stands for hue, saturation, and value, and it often appears as HSB, where brightness means the same as value. The hue says which colour it is, as an angle running 0 to 360 degrees around the wheel. The saturation, given as a percentage, is how pure the colour is. The value, also a percentage, is how bright it is, running from black at the bottom up to the colour at full strength.

The model exists because it matches how pickers are built. You choose a hue from a strip, then drag through a square whose two axes are saturation and value, and that square is HSV laid out flat. The top of the value scale is the pure colour rather than white, which is the detail that separates HSV from HSL and the reason it suits choosing a colour by eye in software.

How CMYK becomes HSV

The two are about as different as colour models get. CMYK is a set of ink amounts that soak up light from the paper, built for a press. HSV is a perceptual description of a screen colour, shaped around a picker. They belong to separate colour worlds, so moving between them is a genuine conversion, not a 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 strongest channel and the spread between the three, the tool works out the value, the saturation, and the hue. So the colour crosses from ink to light, then is re-described in the picker's form, with the colour kept faithful as a screen allows.

Why convert CMYK to HSV

The usual reason is that the colour has to enter an image editor. Most editors and pickers work in HSV, so a colour that arrives as ink percentages has to become HSV before you can set it precisely in the picker rather than nudging sliders to creep toward it. The conversion is what makes that exact entry possible.

It also suits the kind of work editors are for. Once the colour is in HSV, raising or lowering its brightness behaves predictably, since value runs cleanly from black to the full colour, which is handy for shading, highlighting, and building variations. So when a print colour needs to be edited or built upon in software, HSV is the form that fits the tools.

Bringing a print colour into an editor

It helps to think of this conversion as moving a colour from one craft into another. In print, the colour lived as a fixed ink recipe, set for a press and not meant to be touched. Bringing it into an editor changes its role: it becomes a colour you can select, sample, and reshape with the tools an editor provides.

HSV is the form that makes that move smooth, because it is the language the editor's picker already speaks. Entering the converted hue, saturation, and value drops the colour exactly where you want it, ready to adjust by eye. That shift, from a print recipe to a colour live inside an editor, is the whole point of converting, and HSV is what carries it across cleanly.

Questions people ask

What are the three HSV numbers?

Hue, saturation, and value: the hue is the colour's angle on the wheel, the saturation is how pure it is, and the value is how bright it is. The model is also written HSB.

Does CMYK convert straight to HSV?

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

Why convert a print colour to HSV?

To work with it in an image editor. Most pickers use HSV, so converting lets you enter the colour precisely and then adjust its brightness and saturation by eye.

Does every CMYK colour have an HSV form?

Yes. Screen colour spans a wider range than ink, so any CMYK mix can be expressed in HSV and tuned in a picker.

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/