CMYK colors in CSS: Useful or useless?

As someone who dealed a bit with print design in the past, I consider CMYK colors the easiest color system for humen to understand and manipulate. It’s very similar to what we used as children, when mixing watercolors for our drawings. It makes perfect sense, more than HSL and definately more than RGB. I understand that most of us are so accustomed to using RGB that can’t realise that, but try to think for a moment: Which color system would make more sense to you if you had no idea and no experience at all with any of them?

Personally, even though I have lots more experience with RGB, given the fact that most of my work will be displayed on screen and not printed on paper, when I think of a color I want, I can instantly find out the percentages of Cyan, Magenta, Yellow and blacK needed to create it. I can’t do that with HSL or RGB, I’d have to play a little bit with the color picker’s sliders. I sometimes start by specifying a color in CMYK and then tweaking it via RGB or HSL to achieve the exact color I need (since the CMYK gamut is smaller than the RGB gamut) and I find that much faster than starting with RGB or HSL right away.

Also, when you don’t have a color picker, it’s much easier to create beautiful colors with CMYK than it is with RGB. For example the CMYK magenta (0% Cyan, 100% Magenta, 0% Yellow, 0% blacK) is a much better color than the RGB Magenta (255 Red, 0 Green, 100% Blue).

Given the above, I’ve always thought how much I wanted to be able to specify CMYK colors in my CSS. I agree that sometimes this would result in crippling myself, since as I said above the CMYK gamut is smaller, but it has other significant advantages that I think it would make it a useful option for some people. There are algorithms available for CMYK to RGB conversion, and the browser could use those to display the specified color on the screen. Then, if the user decided to print the page, The CMYK colors could be used as-is for the printer. Another advantage, as none of the current CSS color formats allow us to control that. People who don’t find the CMYK color system easier for them to understand, they could still use it for their print stylesheets.

Also, graphic designers who decided to switch to web design would find it much easier to specify color values in a format they are already comfortable with.

To sum it up, the advantages that I think this option would provide us are:

  1. A color system that’s easier for most people to understand and manipulate.
  2. The colors you get when combining “easy” CMYK values (0%, 50%, 100%) are more beatuful than the ones you get with “easy” RGB values (0, 128, 255). Bored people and people without a taste in color selection would create more beatuful websites this way and our eyes wouldn’t hurt.
  3. We would be able to specify how our colors will get printed, something that is not currently possible at all. Extremely useful for print stylesheets.
  4. It would be easier for graphic designers to switch to web design.

And the format is very easy to imagine:

background-color: cmyk(0, 100, 50, 0);

or

background-color: cmyk(0%, 100%, 50%, 0%);

or

background-color: cmyk(0, 1, 0.5, 0);

So, what do you think? Useful or useless?

Edit: As it turns out, I’m not crazy! The W3 already considers this for CSS3 with the 3rd format (from 0 to 1)! However, no browser supports it yet, not even Webkit nightlies… :(

Translations

  • http://www.markpetherbridge.co.uk Website Design Sheffield

    I just tried using this on a H3 element in the html side, not the CSS with this: ‘cymk(15,100,100,0) !important;’ and it didn’t work.

    I would also add a poll to this post considering your asking for views on something with a like or dislike answer!

    try wp-polls plugin :)

    Thanks

    • http://leaverou.me Lea Verou

      I wrote “However, no browser supports it yet” in my article. Unfortunately, even after 1.5 year, this is still true, along with many other nice CSS3 features that are not fancy like rounded corners or drop shadows so nobody cares about implementations.

      • David Mulder

         Wrong, “It is not expected that screen-centric user agents support CMYK colors
        “, in other words, only if you *print* the page (e.g. from the browser) it *should* get supported/is supported

        • http://leaverou.me Lea Verou

          That’s unfortunate, although understandable. :(

  • http://twitter.com/canofbliss Abhijit

    So true..After migrating from graphic designing its a pain to change my design profile every time i design for the web. Also it would be easier for a developer to just in corporate a Ai design with the colors gettin messed up…
    I so expected to see this property in the new CSS3…no such luck yet (*fingers crossed*).
    Great Article..good to see am not alone.. :)

  • Brainflakes

    I’m afraid there’s something of a misunderstanding of CMYK when displayed on a monitor. Because your monitor is RGB all colours are RGB whether specified in CMYK or not. To display CMYK colours they are converted to RGB. All professional graphics programs have various colour profiles to try and emulate what CMYK looks like when printed, but each different combination of printer and paper has a different profile which converts to different RGB values and displays differently on a monitor.

    Without a custom paper / printer profile, CMYK is converted more directly so CMYK magenta (0% C, 100% M, 0% Y, 0% K) *IS* RGB Magenta (100% R, 0 G, 100% B). They are literally the same colour when viewed on a PC monitor. Same goes for 50% M 100% Y, it’s identical to 100% R 50% G. If you had a printer profile, which one would you use? The user’s printer (So everything looks different on everyone’s PC)? A set custom profile (but which one?)

    Basically for screen use it makes absolutely no sense to specify in CMYK, because PCs can only display RGB. It would be better design a site in CMYK in your favourite graphics editor with your preferred CMYK profile, then convert it to RGB and grab the colours for CSS use ( It seems slightly strange to be designing directly in CSS rather than creating a design in a graphics package and then building the CSS from that anyway)

    Now where CMYK would be useful in CSS is where you are creating a webpage that’s meant to be printed, which is how I actually found this page. Unfortunately as of 07/2011 there is still no browser support for CMYK colours.

    • http://leaverou.me Lea Verou

      Nice writeup, liked :)

      I was thinking of the print profile that Photoshop uses, since most people are accustomed to that (I’d argue that a very small precent changes the color profiles).

      • Anonymous

        brainflakes hit the nail on the head.  What you would have is a double color conversion.  Web output has the same hang up as the Print Industry does – color is dependent on who outputs it and how.  Lea since you have some background in Print – you know that you can tweak the color space until it can’t be tweaked anymore for a project then send that same project (with standard colors) to several different print vendors and still get several different results with CMYK output.  The only real way to avoid this in print is to specify Spot Colors – but that becomes a costly affair – especially for low budgets.

        The only major issues I ever had w/ Print and color came from the new “pre-press guy” that had his skillset for around a year (every Printhouse has one) that always wanted to argue with me that the lime gren on the proof he gave me visually matches and is the same as the ‘forest green’ in the color-spec’d PDF  I gave him (he usually didn’t mix the color correctly).  Then I made him either do it again or get me someone else that can.  Most of the time 2nd try worked and rarely ever got to the 3rd attempt.

        Jumping over to the Web side of things – this same problem becomes almost exponential just viewing the same page from one Monitor to the next.  Then you throw in other factors – Web Browers – Web Browser versions – user operating system – graphics cards – calibration profiles – monitor type – etc… Even the infamous ‘web safe’ colors are not really web safe.

        I found (and am still finding) that color issues far more out-weigh development for me than switching gears to writing web code instead of building layers in PS. Usually on larger projects where it matters vs smaller clients that just say that any medium blue works fine.

      • Evert Albers

        Not exactly. The ‘default’ color profile for print is different in the US and Europe (not to mention Asia). The calibration of your screen may also effect the conversion. In Europe, converting between sRGB and Fogra39 cmyk seems to be the safest bet.

        Currently preparing a presentation on color management for webbies (color spaces, profiles, conversion). Or plainly said: “What to do with all the colour profiling popups that Adobe apps show when you open the file supplied by the designer”. I’ll bookmark this post and dicussion and hope to get back here once I’ve got it al lined up. May take some time.

        Please also note that some browsers now support colour profiles. Could be interesting for sites focusing on photography.

        • http://lea.verou.me/ Lea Verou

          That talk sounds super interesting. Will there be a recording? Or slides anywhere? Which conferences are you giving it at?

  • http://twitter.com/ScottKellum Scott Kellum

    Interesting. I was just getting ready to do the research on a Sass function that does this, as well as RYB. RYB is another color mode that most designers/artists are taught. It is not technically correct but has it’s following. CMYK will be difficult to interpolate as it is subtractive color while all other CSS colors are additive color.

  • leumas2855

    Hi just looking at cmyk-rgb issue for/from web point of view, hopefully this makes helpful sense: As pointed out elsewhere, the rgb gamut is much wider than the cmyk one, but e.g. when you print offset/Litho cmyk and sometimes spot cols is your only option. So, if you design in cmyk, your values are totally convertable to RGB, the other way round, colours can go VERY flat indeed if not handled correctly (a very handy program for just that, when customers produce stuff in MS Word etc which hasn’t ever heard of CMYK is “Quite a box of trix”, which makes a very acceptable conversion) If you happen to look in photoshop, going to the colour panel, you’ll find that in certain areas a warning triangle will show, telling you that this colour isn’t going to come out right if printed cmyk! If you are required to emulate a Pantone colour in CMYK, go for the e.g. PMS123 PC version (btw the same colouring, box of trix happens to be using). Even if your screens are not colour corrected, with a pantone swatch you will see exactly what col you get unless your papers colour is vastly different from white. Nowadays any Good class Printshop will produce what’s known as contract proofs (large inkjet output carefully calibrated to match Litho print (Machine operators colour densitometers will read values off that synchronising colour use and machine settings)
    Hope that’s of some use, I was 20 yrs Prepress operator till Jan this year and machine operator before that

  • Web Design

    Your blog is very helpful… I am happy to find this post
    very useful for me, as it contains lot of information. I always prefer to read
    the quality content and this thing I found in you post. Thanks for sharing.

    Web Design