Detect CMYK in Browser


 CMKY is supported in CSS3, but many browsers don’t provide support for it – and hence a problem if you have images rendered in it. CMKY as we well know, is used by designers and printing houses for it’s ease of use. As of CSS3 there is new color support; (with accompanying api calls) as below:

  1. HSL – hsl(hue, saturation, lightness)
  2. CMYK – cmyk(cyan, magenta, yellow, black)
  3. HSLA – hsla(hue, saturation, lightness, alpha)
  4. RGBA – rgba(red, green, blue, alpha)

A question in this direct context was asked on StackOverflow on how to detect CMYK support in the browser. 

Now there is three ways to resolve this:

  1. Server-Side Code (Asp.Net – Bitmap Api or Php – getImageSize – by looking at the image properties and maybe converting it to RGB to avoid this whole mess
  2. Browser Detection (jQuery/HTML Directive)  – mark those browsers that don’t support it, predominantly IE.
    1. if($.browser.msie && parseInt($.browser.version,10)<=8){}
      <!--[if IE 8]> <![endif]-->
  3. Javascript – validation by using the API and throwing an exception to validate it’s existence

I am going to be looking at the last method, number 3, as the prior two are real hacks and lead Alice down a Rabbit Hole she really shouldn’t traverse;




var IS_CMYK_SUPPORTED = (function(){

var value =‘cmyk(1%,1%,1%,0.5%)’,

el = document.createElement(‘p’),

result = false;

try { = value;

result = /^cmyk/.test(;

} catch(e) { }

el = null;

return result;




<bodyonLoad=‘alert(“IS CMYK Supported:” + IS_CMYK_SUPPORTED)’>



Simplistically, all that is happening here is a creation of an element to which we then try and set a color using the CMYK api. If the support is there we will return a valid result, if not the result will be false (via the exception thrown).
Hope this helps.
Reference the following URL for added information
Don't be shellfish...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on TumblrEmail this to someone

Leave a Reply