13 Replies Latest reply on May 16, 2016 9:21 AM by Utopia Creative Group

    Complementary color rule

      I was using your application and i realize that the rules that you are using to find the complementary color is different than the rule that I know and find it everywhere I was looking.
      I was using the base color FF00FF (rgb: 255,0,255; hsv:300,100,100) and the complementary color find it by your set of rules is 59FF00 (rgb: 89, 255, 0; hsv: 99,100,100). The rule for the complementary color in HEX is FFFFFF - FF00FF that means 00FF00. The rule in HSV for the complementary color is adding 180 to the hue if the hue is smaller than 180, or subtract 180 if the hue is bigger than 180, which means that the complementary color is hsv: 120,100,100. 00FF00 is the same color with 120,100,100.
      Is there something that I miss?
      I really wait an answer from you guys.
        • 1. Re: Complementary color rule
          Sami@Adobe Adobe Employee
          Hi, I asked a special guest, our color guru, to respond to your HSV/HSB question.

          The reason that the hue number of the HSB color model does not correspond to the angle on the wheel is because kuler uses a red-yellow-blue color wheel. This wheel corresponds to the color wheel that many artists are familiar with where red/green, blue, orange, and magenta/yellow are compliments. This wheel was invented by by Johannes Itten, a Swiss color and art theorist. The color wheel does not correspond with the different types of color receptors in the human eye and instead reflects how pigments are mixed when painting. Adding a color's complement with this wheel mutes the color.

          Here are some references with more info:

          This is why complementary colors are not 180 degrees apart in HSB apart (where hue = angle). The hue distribution on the wheel is a different than a pure hue to angle mapping. This mapping corresponds to the RYB color wheel (Red, yellow, blue) rather than the RGB color wheel.
          • 2. Re: Complementary color rule
            madalinacoco Level 1
            I see.
            Thank you.
            • 3. Re: ... so what is the kuler wheel?

              According to the kuler wheel, the complement to Blue is RGB:(255,209,0)


              in RYB, the complement to Blue is Orange - RGB:(255,128,0) which should be on the "traditional" wheel from colour theory

              (the one where yellow is complement to violet, red - green, blue - orange)




              even if it is a pigment simulation you need to have -  half of the wheel with warm colours, and their complements should be cool colours,


              where the kuler wheel clearly on occasions gives cool complements to cool colours, which is wrong any way you look at it (harmonies there will not work).  

              ex: FF0035 is given as complement to 00FF2A



              ... so what is the kuler wheel?



              • 4. Re: ... so what is the kuler wheel?

                So basically we artist like this wheel because it is like the one in the stores we used in design school. . . What you need to understand with all your code quoting is that it is all that code is made up to match something that only exists in cyber reality,  light is a tad different on a computer screen, than the color wheel that you are talking about. RGB is more or less a mutation, it started with computers which use light to mix color and you know if you mix all light you get white, so you are using codes used to simulate colors in rgb for websites. This wheel is an invaluable tool for all of us who design for print(offset swop ICE not digital)and print to web, they never match, clients want the colors on their publications to look like the screen versions and that great blue or red is impossible to print in cmyk so they came up with a numbered pantone solid inks (toyo colors etc to use with CMYK. I'm digressing.


                So take these colors and import them as ASE swatches into photoshop or  illustrator or directly into CS5 and the ICE profiles (standards in industry) will give you the actual color that prints, the color range that would fall into the gamut of printed colors(about half of what you see in the chart) on the real color wheel that cannot be simulated unless it is only for print, which leaves out all the internet, video, animation users. So believe me Adobe who made computer graphics for print WORK on screen as far as reliable ways to manage color—knows exactly what they are doing. This wheel has millions of colors more than a print or paint wheel, or rather if printed half would look like mud. I am fortunate to have come up from the ranks---the first mac no memory, limited html pallets like 200 colors that's it, a program like "ready set go"---this was only 25 years ago at, I have no idea what must have gone into this flash program, I'm impressed, from the standpoint that this is a free actual "design" tool for all of us.  Thank You for including all us print people, by including CMYK even though we can only dream or laugh at those impossible numbers---maybe some people do have the budget for pantone ink bumps(overprint) or of course digital which is a tad better, At first I was going to complain whoe all these out of gamut colors, I could never use in print, well, I guess that's why we have other software. And I'd rather have millions of colors, at least a choice.

                So use this tool, it was so easy to install and use and I have an old sawtooth Mac(nothing is original in it of course no pentium but just as fast). I have learned to read the system requirements, all those people, who don't go the the forums are missing out, it's sad, one person was complaining about Adobe Air not working --he installed 2.0(wrong) and has power PC-- saying he wasted his money buying CS5 software just to use with it. CS5 won't run on PPCs either!!!  He was running 10.4.11 and lambasting Adobe for all his woes. I won't even start on those poor new windows graphic users at least they have OS 7 now.

                So I doubt many will read this, but I got it off my chest.

                Thanks Adobe, for the wheel etc.---   I just wish you wouldn't upgrade creative suites for a few new options, it's killing me, upgrades are so expensive. It's not like you have tons of competition. Oh well I had to complain about something.   

                • 5. Re: ... so what is the kuler wheel?
                  PhotonMayhem Level 1

                  Even if it is CMYK, "Designers wheel" is actually RYB colour model, which should be half with warm colours and other half in cool.

                  Where here you can see a too much blue in the kuler-wheel and cool colours have cool complements which should not be the case even in CMYK.


                  For all those who design for web, media or grading movies... CMYK is unnecessary limitation.


                  And as it stands right now if you lookup the complement to skin colours you will get "teal", where a blue-violet is much closer to what it should be, and in reality the blue-violet produces higher colour contrast. (at least from my observations and the small survey I did)


                  .. and as things go, and even magazines switch to digital versions for the "pads", and soon most of the print will be a thing of the past.

                  Of course some exceptions like the Lambdas that print with light on photo-paper will never disappear.


                  In any case, it looks like the wheel is not correct even for CMYK since it gives cool-to-cool complements.

                  • 6. Re: ... so what is the kuler wheel?
                    Teri_P Level 1



                    Can you give an example of some color pairs where you classify it as a cool-cool complement?


                    Also, can you describe what your definition of the border between cool and warm is? Obviously blue is cool and yellow and red are warm, but there is no single definition for where the boundaries fall in the green and magenta ranges.


                    In fact, there really isn't any single definition of "correct" for a color wheel. Different wheel spacings are useful for different purposes.


                    The RGB color description, and the HSB one based on it, don't correspond to the human eye's color perception very well. As others have said in this thread, RGB just specifies strengths in the power levels sent to different light emitters standard in computer displays. All G=FF means is "push your green emitter to its max". They aren't even specific colors scientifically!  An RGB value on one device is a different color on a different device, because different device emit in different wavelengths and have different responses to power levels. That's why Color Calibration is necessary. So I suspect that in your understanding of "correct", you may be attaching way too much significance to the 00 and FF points in what are essentially arbitrary numbers.


                    Even if RGB were a true color space instead of a signal control space, our eyes do not have a linear and equal response to those three channels. So if you are basing your definition of "cool" and "warm" on numbers that fall neatly into round numbers in that triad, it does not necessarily reflect what the eye perceives as cool and warm.


                    One of the big problems with a wheel based on direct linear placement of the H values, with each H unit being a degree, is that what the eye perceives as neon green takes up a very large angular region (about 40 degrees), and what the eye perceives as cyan becomes a little sliver (about 10 degrees.) This makes it difficult to "hue shift" groups of colors around the wheel. Two colors that look quite different on one side of the wheel will become visually indistinguishable when they are rotated around by 120 degrees or so. They will still have the same separation in H units, but the eye will respond to them as nearly identical.


                    What we did in Illustrator's Color Harmony feature, from which Kuler was derived, was compress certain regions of the H description and expand others to fulfill the following


                    Red, Yellow and Blue are 120 degrees apart, for what artists would think of as those colors

                    Green is opposite Red

                    Violet is opposite Yellow

                    Orange is opposite Blue


                    Then, to the extent that it is possible with the above constraints, stretch out the portions of the wheel where it seems to get banding because there is a large visual response to small frequency differences, and compress the regions of the wheel where it seems like a wide pie segment is nearly the same color.


                    This is partly done by taking advantage of some flexibility in what we call "Green", "Violet", and "Blue". (Yellow and Red people have strong intuitions for and they do correspond to the standard RGB definitions of yellow and red.)


                    But pure Blue, in particular, in an RGB definition, is more like what artists would classify as Blue-Violet. It isn't the color they would view as Primary Blue. And pure Green in an RGB color space is more what artists would call Yellow-Green, it isn't the color they would expect to see across from Red. They would view both of these colors that occupy a privileged position in RGB as at best Tertiary colors on their wheel. So for our Primary Blue, that is, the color that is 120 degrees from Red and Yellow, we pick a blue that looks like an artist's primary blue, one that is neither greenish like cyan nor tending to violet like RGB blue. And for the Green that we put opposite Red, we pick a green that is more Christmas green than it is RGB green, and that lets us compress the neon green range of colors to occupy less of the color wheel.


                    Specifically the 6 sector piecewise function from HSB to the Illustrator/Kuler color wheel is:


                    map [0, 35] to [0, 60]

                    map [35, 60] to [60, 120]

                    map [60, 135] to [120, 180]

                    map [135, 225] to [180, 240]

                    map [225, 275] to [240, 300]

                    map [275,360] to [300,360]


                    where "map [a,b] to [c,d]" means for any x between a and b, return c + (x-a)*((d-c)/(b-a))



                    Now, I'm not saying that this is "correct", because there is no such thing as correct or incorrect. Nor is it even a true color space, either, because it is just a piecewise mapping of the RGB numbers, which as I said in the introduction, are themselves not true scientific color descriptions in terms of wavelengths, etc. But it is a distortion that, for most RGB devices, does work better for using traditional artist's color harmony rules and for shifting color themes smoothly around the wheel while maintaining approximately equal perceptual color differences.


                    You say you perceive the Kuler/Illustrator wheel as having "too much blue". The undistorted HSB wheel has too much neon green and bright red, and too little cyan and magenta. Since our numbers were derived simply by empirical experimentation, there is certainly the possibility that they could be improved. There's nothing magic about them, they're just numbers we picked by interviewing many artists about what looked right to them and tweeking the functions.


                    One problem is that the goals are a little over-constrained. I think cyan may still be too narrow, for example, and red too wide, when considering the goal of making equal angular differences correspond to equal perceptual differences. But it is hard to make red narrower without making too much orange, or to make cyan wider without putting a shade of blue opposite orange that doesn't look like a primary blue.


                    So if you were going to devise a piecewise function, which portion of the blues would you compress, and where would you put them? Who knows, maybe you will come up with a function that works better than ours. Just don't attach too much importance to making the 00 and FF numbers fall in neat places on the wheel. Those numbers are not magic either! Judge by your eyes, not by round numbers! (And please, only attempt this if you have perfect color vision.)


                    By way of introduction, I was the engineer who coded the color transformation math in Illustrator's Color Harmony feature. A portion of that functionality was then ported to Kuler.

                    • 7. Re: ... so what is the kuler wheel?
                      PhotonMayhem Level 1

                      I did give an example of cool-to-cool combinations, and a bit more on the issue here: http://forums.adobe.com/message/3148470


                      "Judge by your eyes, not by round numbers!"

                      I absolutely agree,

                      and if something didn't look right I would have never looked in the issue.

                      • 8. Re: ... so what is the kuler wheel?
                        Michael Rutledge Level 1

                        OK I see the logic of your theory here. However practically speaking we use the tools we have to select or mix colors we need for out purpose.

                        Who are the people that use this tool? What percentage (if any) actually mix paint? The tools we use are based in light emmiters.

                        Additive light so RGB or video YUV or YPbPr

                        We LOOK AT and make color for light emitters . . . or we look at color emitters to make approximations of process color.

                        IF you subscribe to the idea that the idea of complementary is contrast and the most contrast would be the complementary.

                        So just by looking you'd have to say that Cyan is more of a contrast to red than green. At least that's true when I'm looking at light emitters.


                        Seems like you are saying that we have to think about color one way then use tools that mix color differently practically. I agree that there are many ways to theorize about color and the physics of color. However I need tools that work for the job I am doing.

                        To quote my grandfather. Work goes faster with better outcomes when you use the right tool for the right job.


                        My response to my discussion that refered me here:


                        OK I understand the logic of the HSB/HSV - which as was pointed out is not RYB though you color expert refers to it that way.

                        here's the logic I don't understand


                        "This wheel was invented by by Johannes Itten, a Swiss color and art theorist.

                        The color wheel does not correspond with the different types of color receptors in the human eye and instead reflects how pigments are mixed when painting." (by the way get a tube of magenta and cyan, mix equal amounts and see what happens)


                        Your color expert adds wikipedia as a source.

                        Did they look at the first two paragraphs?


                        "RYB (an abbreviation of red-yellow-blue) is a historical set of colors used in subtractive color mixing, and was once thought to be the set ofprimary colors. It is primarily used in art and design education, particularly painting.


                        It predates much of modern scientific color theory, which has demonstrated that magenta, yellow, and cyan is the correct set of colors to use when mixing pigment. Red can be produced by mixing equal parts of magenta and yellow, and blue can be produced by mixing cyan and magenta (though slightly more cyan than magenta is needed to produce the hue most commonly associated with the color blue)." ( http://en.wikipedia.org/wiki/RYB_color_model )


                        The people that use Kuler are not painters. We don't mix pigment. In fact how many ADOBE customers are? We use devices that use the Additive model RGB OR we are using Monitors to Determine process color for Printing. Subtractive CMYK.

                        I've been working in video and multimedia since 1995 In order to be able to use color effectively in those systems I Had to learn to use RGB . . . I could not mix color using RYB. That hasn't changed.

                        Now I'm trying to teach my students how to use color effectively for all types of graphic design and they don't understand that Kuler uses a different model.

                        Thanks for your time.


                        • 9. Re: Complementary color rule

                          So wouldn't it just be terribly useful to give an option of using the modified Kuler color wheel, which does have some merit for its approach, and the standard RGB (or HSB) color wheel? I would find about 1000% more usefulness if there were such an option. Not to mention that a few of the programs or websites in competition give such an option, although they do not have some of the other features of Kuler.

                          • 10. Re: ... so what is the kuler wheel?

                            Hi I found your info very useful, actually I implemented your formula to get this artistic pallete but I do not know what I'm doing wrong because I'm not getting Kuler colors. This is the code I'm using http://jsfiddle.net/cZ85P/ Could you take a look on it?


                            Thanks in advance!

                            • 11. Re: ... so what is the kuler wheel?
                              atjain Adobe Employee

                              Hi arrutime. The value you get from text input is a string. You need to either conver it to a number by passing it to the Number class, or to int by parseInt. See http://jsfiddle.net/cZ85P/2/ for the changes. You should probably also add a check to see if HSV are in expected ranges.



                              Kuler Team

                              • 12. Re: ... so what is the kuler wheel?
                                arrutime Level 1

                                Hi, thanks for the point that I was using string instead of number, the good thing is that JavaScript tries to convert a string into a number when there is an attempt of an arithmetical operation.


                                However, my point is that I'm not being able to get same values that Kuler does. For example, in Kuler if I get complementary of hue = 0 the result is hue = 137. My expectations are that if I calculate the complentary color of hue = 0 and then past the result (hue = 180) to the formula you provided, I would get hue = 137, but reallity is that I get hue = 210.


                                You can test my point in the jsfiddle you did http://jsfiddle.net/cZ85P/2/


                                Thanks again!

                                • 13. Re: Complementary color rule
                                  Utopia Creative Group

                                  I'm am duplicating this reply here from another  post as this is where Adobe pointed me after asking about Color Profiles and Adobe Color CC. While I understand the basics of what is being discussed and the answer that is given it does not help me on the technical side since I deal mainly with print and some web and need consistent numbers that I can pass along to both clients and fellow designers many of whom do not understand anything of color management beyond the fact that their monitor doesn't represent what is printed. Orginally posted Here: https://forums.adobe.com/thread/2004887


                                  Scenario: From what I know of  my color management the values that are not supposed to change no matter the device or profile are the LAB values. (This is why Pantone went to a Lab system v.s. a CMYK System)


                                  So if I take Lab values for a Pantone Color (I picked a Pantone to have a Known Target) and enter it in Adobe Color website what profiles or "other" method is it using to calculate the CMYK, RGB, and HEX. I know if I take the same LAB value and enter it in Illustrator or InDesign the values will be different depending on what RGB and CMYK color profiles I have selected. AdboeRGB vs sRGB will give different numbers for RGB and GRACoL will give different numbers v.s SWOP or Sheetfed for CMYK.


                                  So what I am trying to figure out is how Adobe CC calculates the values. What if any Profile or standard is it using? I have done comparison changing profiles and the numbers that are given by Adobe Color are not the same as those from Illustrator.


                                  What makes this even worse is that when you import those colors say into illustrator the values are changed again depending on the Profile and even worse it changes the Lab values. So basically if you go full circle and start in Illustrator using a Lab value and put that into Adobe Color and then save that out and re-import that color you end up with a totally different color which makes it kind of useless.


                                  So a secondary question is what is the base or master value that Adobe Color uses to base its values on? Is it the Lab, The RGB, The Hex?



                                  Pantone 279C   <<<This is the Target

                                  Lab = 57  -5  -49  <<<This is the Lab values no matter the profile


                                  Values based on GRACol and Adobe RGB

                                  RGB = 94  140  218

                                  HEX = 5e8cda

                                  CMYK = 72  35  0  0


                                  Values from Adobe Color based on Lab numbers entered

                                  RGB = 0  145  223

                                  HEX = 0091De

                                  CMYK = 100  35  0  12


                                  If in the end all your worried about is what looks good to you on screen it is fine but if you want to reproduce the results in Print or even on Screen in a relatively consistent manner (we know 100% color consistency in both print and on screen is impossible due to the number of variables) than it would be helpful if we knew what rules are being used so we can understand why numbers are the numbers they are.