Skip to main content
L
Leonie5FA9
Inspiring
April 24, 2021
Answered

How does Illustrator’s Color Picker compute HSB and CMYK values?

  • April 24, 2021
  • 3 replies
  • 3528 views

I have a Illustrator document with default RGB color mode. The Color Picker displays the RGB values of selected object and it also displays HSB (Hue, Saturation, Brightness) and CMYK (Cyan, Magenta, Yellow) values of the selected object. But I do not understand how Illustrator calculates these (HSB and CMYK) values. I found RGB-to... conversion functions on the web which all seem to be based on the same algos (for example: https://gist.github.com/felipesabino/5066336 ) but the CMYK and HSB value obtained with these do not match with the values from Color Picker ? Can anybody please tell me how (algo?) Illustrator calculates the HSB and CMYK values from the RGB values in the Color Picker?

So far I understood that RGB to CMYK conversion depends on the type of printer which is used, but I thought that, as long as there is no printer selected the RGB to CMYK shall follow a default scheme/algo? I’m asking for help because I would like to use the HSB and CMYK values which are displayed in the Color Picker as guidelines for manually mixing colors for hobby painting purposes (on a ‘real’ palette and canvas). I found the CMYK and HSB values displayed in the Color Picker more realistic than the ones computed by the algo from URL above, for example for RGB color R=246 G=109 B=164 the Color Picker displays S=55%, B=96%, C=0%, M=70%, Y=3% K=0% whereas the algo from URL above calculates/converts to C=0%, M=54%, Y=32%, K=4% ?

Actually, I have a little JavaScript which creates a separate, dedicated Illustrator document which I call “color palette” document. The script creates as many squares filled with unique colors (associated with text labels indicating the ID of the color) as colors used in the original document. I would like to add additional text labels per color square to indicate CMYK and HSB values, ideally these calculated internally and displayed by the Color Picker but I don’t know how these are calculated.

Many thanks in advance for your time and advice!

This topic has been closed for replies.
Correct answer Test Screen Name

Happily HSB is actually defined as a simple mathematical transform of RGB. So there is no such thing, for example, as an HSB profile; HSB is always qualified by the RGB space it is transformed from. Just convert to RGB with suitable profile, and then use the standard formula to convert to HSB. 

3 replies

Silly-V
Silly-V
Legend
April 28, 2021

Use app.convertSampleColor()

    N
    Nick Combs
    Inspiring
    August 15, 2022

    I'm not seeing HSB as one of the ColorSpace options. Maybe it's undocumented?

     

     

    T
    Test Screen NameCorrect answer
    Legend
    August 15, 2022

    Happily HSB is actually defined as a simple mathematical transform of RGB. So there is no such thing, for example, as an HSB profile; HSB is always qualified by the RGB space it is transformed from. Just convert to RGB with suitable profile, and then use the standard formula to convert to HSB. 

      T
      Test Screen Name
      Legend
      April 24, 2021

      I looked at your code. Part of RGB to CMYK processing is this:


      result.k = Math.min( 1 - r, 1 - g, 1 - b );
      result.c = ( 1 - r - result.k ) / ( 1 - result.k );
      result.m = ( 1 - g - result.k ) / ( 1 - result.k );
      result.y = ( 1 - b - result.k ) / ( 1 - result.k );

       

      This is nice simple code. I know, I have used it myself. But from the point of view of colour accuracy it is a joke. (Sadly, a joke repeated all over the internet, and it doesn't get any funnier). It supposes (for example) that RGB cyan and CMYK cyan are equivalent colours. Well, only from the point of view of the person looking for easy code. Anyone who ever printed anything will know this is just false.

      L
      Leonie5FA9Author
      Inspiring
      April 26, 2021

      Hi and thank you all for your replies! I have one more question: I wonder if its possible to get CMYK and HSB values of shapes in my javascript ? It’s actually possible/easy to get values for RGB using RGBColor type:

       

      var fill_color = new RGBColor();

      …

      fill_color = selectedItems[i].fillColor;

      color_string = fill_color.red.toString() + "_" + fill_color.green.toString() + "_" + fill_color.blue.toString();

       

      but it seems there is no such equivalent  CMYL or HSB color type in JavaScrip Object reference ?

       

      Thank you in advance for your help! Kind regards

      T
      Test Screen Name
      Legend
      April 26, 2021

      JavaScript has no colour management, the RGB values are just to be delivered to an output. To match the conversion done by colour managed apps you need to what they do: use a CMM (Colour Management Module), which takes input profile, output profile and rendering intent to make a conversion environment. I have never heard of a JavaScript API to any CMM. On Windows, the ICM2 system component will do this. On Mac, ColorSync will do this (though the documentation is abysmal).

        T
        Test Screen Name
        Legend
        April 24, 2021

        "I found RGB-to... conversion functions on the web which all seem to be based on the same algos (for example: https://gist.github.com/felipesabino/5066336 " Yes, these are ALL WRONG . Every web page, I have ever seen to make this conversion is wrong. These are made by people who can read a formula, but do not understand color management.

         

        Conversion depends on the RGB and CMYK profile in use. Sites which offer to convert without choosing a profile are like - well, like a site offering to convert between currencies without asking you the currency! "Hey, 3.00 is worth 7.54! That's great, What currency? I don't know, some currency or other."

          Monika Gause
          Community Expert
          Monika GauseCommunity Expert
          Community Expert
          April 24, 2021

          I love this comparison.

          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices