CMYK Calculator Has Two Value Fields

I'm using this CMYK Calculator on W3 Schools and there are two fields that give two different CMYK values. I'm not sure why. Does anyone have any insight?

5 Answers

The input with the CMYK sliders produces an RGB converted color which is then displayed as a swatch and has all of its information written out to the right. Among this information is the now-RGB color's values in various forms such as rgb and hsl and 'cmyk' which is actually this RGB color that is ran through an rgb-to-cmyk conversion formula. In summary, you input your CMYK values, and it produces an RGB color whose info is result of the new RGB color. Don't believe me? Try this theory out by inputting the "rgb" numbers from the info into this website : http://codebeautify.org/rgb-to-cmyk-converter

I think it's doing its best to approximate the CMYK value to a corresponding RGB value, since it's impossible to precisely match certain CMYK colors in RGB.

I played with it a bit myself and it looks like you input the CMYK values of the color you want and the upper box is the closest web-friendly match

• Yeah that was my first thought---that it was trying to match the RGB value. I'd like to hear if someone knows this for sure. So the color preview example it shows on screen is a hex value I presume? Because when I enter the CMYK value into illustrator--it is pretty far off from the example on W3. – user1527555 Apr 13 '17 at 19:29

The actual input values are on the left. The percentages of the colors are on the top-right. Remember that in the CMYK color model: Cyan, Magenta, and Yellow add together to get Black ("K")? The reason that the percentages and the inputs are different is this: the darkness/"K" percentage does not change when only using 1 or 2 of the CMY colors. However, if you add a third color, you are darkening the image, adding to the K percentage.

Example: C: 85, M: 85, Y: 85, K: 0

... is the same as ...

C: 0, M: 0, Y: 0, K: 85

...because the colors cancel out and become the darkness/"K" percentage. Similarly:

C: 10, M: 10, Y: 5, K: 0

... is the same as ...

C: 5, M: 5, Y: 0, K: 5 ...

...because the 5 that was present in all 3 CMY colors cancelled out and became the darkness/"K".

• 85/85/85/0 looks drastically different than 0/0/0/85 in Illustrator. Why is that? – user1527555 Apr 13 '17 at 19:35
• The issue with this is that C100, Y100, M100 = a dark brown. It's never the same as K100. In theory this sounds plausible. I don't believe it's correct though. – Scott Apr 14 '17 at 2:13

Oh my god!

It is good that you bring this up. STOP The maddnes! If CMYK values are "CMYK is a suggested standard for CSS4" As it is implemented SHOULD BE STOPED!

That slider has no sense!, it is doing a totally fishy implementation of how really CMYK works. A CMYK works depending on a color profile, not by this "automatic" conversions.

@Refracktor asummption is right in theory, but that "simulator" is no simulator, but a potentially misleading simulator.

Conversion form RGB to CMYK is not well defined, even if you color space definitions are set in stone. There are in fact many CMYK values that you can get form a single RGB value. Therefore a number of CMYK values can get same RGB color. Now let us ask what the colors look according to Photoshop, with FOGRA 39 and sRGB color spaces, with relative colorimetric intent:

Image 1: Comparison between 2 CMYK colors FOGRA 39 -> sRGB with relative cliometric intent. NOTE if your monitor is not calibrated this swatch is meaningless for estimating difference.

Now these colors are in fact quite close. But not knowing what color space the CMYK is defined in and what transformation intent is used its impossible to say. These may in fact be within rounding error the same color in a RGB device. And as Silly-V points out these in fact are the same color if you use a naive color space unaware RGB to CMYK conversion (which you should NEVER DO!)

And this is exactly why you shouldn't use CMYK in a non-CMYK context. However its a not a bad thing i mean it would make sense to have CMYK colors for SVG! But as pointed out by Rafael having CMYK info without profiles is insanity.