5

Being a webdesigner I learned that Green= 00FF00 Blue= 0000FF Red= FF0000 Yellow=FFFF00 Correct ?

And color theory says that Red is the complementary color of Green. Yet when I use http://kuler.adobe.com/ I get FF007F which is still far from Red. However when I use http://www.colorschemer.com/ I get true Red. For Yellow kuler gives me 7D00FF while colorshemer gives me 8800CC which are different enough for the naked eye to notice. For Blue kuler gives me FFD100 while colorshemer gives me FFBD00

A third tool colorschemedesigner.com give slightly different values (once adjusted to max saturation & brightness).

So as you can imagine, I'm confused as to what are the values of the complementary colors that aren't easy to guess with hex such as Orange and Violet and which color wheel is the most faithful.

5 Answers 5

15

I think you should be using RGB complements (in the "Light" answer). The RYB complements were from an era when people didn't know of light's primary colors being RGB. RGB complements look nicer, in my opinion. Here what some random dude named Lira had to say:

RYB is the traditional colour wheel, used by artists. Sir Isaac Newton was the first one to come up with this sort of thing. And it was kind of fun. Here, take a look:

enter image description here

Recognise it? It's the colour wheel Jason Beaird used in his "Color for Coders" article. Remember that, when we're in kindergarten and stuff, we're taught stuff like "Yellow plus Red equals Orange"? It all comes from this colour wheel, whose primary colours are red, yellow and blue (they're touching the darker triangle, poiting upwards). Warm colours occupy half of the space and cold colours the other half. That's like a colour Yin Yang. Almost too perfect to be true.

Indeed, it was too perfect to be true.

Scientists then find out that biologically, it doesn't really work that way. Anyway, after studying, researching, analysing, chopping and cooking colours, we ended up having the RGB colour model, ubiquitously present in stuff like computer monitors, TV's and so on.

As you might be assuming, the colour wheels are a bit different. The opposite of "red" in the RYB colour wheel is "green", whereas the opposite of "red" in the RGB colour wheel is cyan - you can test the latter by staring at something red (focus, try not to blink) and then looking at a white surfice: the afterimage is cyan. Here's an example:

http://faculty.washington.edu/chudler/after.html

That means you have two different colour wheels to choose your colours from. So, which one of them do you guys prefer?


Light

A trivial definition of a complementary color regarding the RGB color space is as follows: given a color (RR, GG, BB), the complement is (FF - RR, FF - GG, FF - BB), where each component is given in hexadecimal. As an example:

color      = (12, 4A, FF)

complement = (FF-12, FF-4A, FF-FF)
           = (ED, B5, 00)

Adobe is using a slightly different definition from this "trivial" method of calculating complements. Perhaps it is more appeasing to the eye, or perhaps it aligns more closely with how the human eye works.

EDIT: Looking at this answer a few years later, I have to say that color spaces, monitors, and the human eye work in weird ways. This means that there is no one "correct" way to calculate complements. Your monitor can only display a certain range of colors, and the human eye is sensitive to certain colors more than others. This leads to many valid formulas to calculate complements.

enter image description here

As you can see, there's a fair amount of gap between 460 - 500nm, leading to a different human perception of expected color mixing than what is shown using actual scientific measurements.

I believe there are certain color spaces which allow for linear additive color mixing that matches our expectations...?

Here, I made a small quick web "app": http://jsfiddle.net/rXsAT/

Looks like someone already made a nicer version.


Pigments

This is a rather complicated subject involving a bit of chemistry, biology, and physics.

Just know that additive color mixing with pigments is fairly different from light.

6
  • Thx for the formula, but I'm looking for a tool that would tell me the answer from the color I picked, just like those color wheels but one that is truthful. Mar 16, 2011 at 2:15
  • @user855 Do you have Google Chrome? Maybe I'll make an extension for that. Mar 16, 2011 at 2:18
  • Thx again for you web app but gain this is not what I'm looking for. BTW, FFFFFF - 0000FF = FFFF00 meaning Blue's complementary color is Yellow, which is false. Mar 16, 2011 at 2:53
  • @user855 I just realized this is true for light, not "pigments". I'm working on that... Mar 16, 2011 at 3:21
  • @user885 I'd just use RGB's complements. ("Light") Mar 16, 2011 at 3:43
3

Colour scheme generators such as Kuler don't give you the exact values because they are focused on giving you a scheme and they are design based. A colour scheme of the exact opposites would look rather garish and over the top. Kuler is a tool to allow you to contrast colours whilst still keeping the scheme looking nice.

Summary: If you want a true colour conversion tool, don't use a colour scheme generator, because they are focused on getting things to look nice for you, not to give you exact measurements.

6
  • 1
    right, and don't focus too much on it because your grandmother's crt is not going to render them anywhere near your chosen value anyhow
    – horatio
    Mar 16, 2011 at 14:14
  • @horatio I hear that, brother! If it's not "web-safe" then at least make some attempt to reconsider.
    – Dan Hanly
    Mar 16, 2011 at 14:19
  • How could color scheme generators give a nicer result since there's only one color theory ?! and the aim of this theory is to tell what colors are harmonious together ! Anyway, which tool am I supposed to use then ? Do you too use a biased tool ? Mar 16, 2011 at 15:39
  • If I had to guess, they will quite often lower the intensity of some colours or add more black to the colour to give it a bit more/less contrast. They are based upon a "leading" colour and then (in kulers case) 4 sub-colours. The use of this tool is almost strictly for websites where one colour would be the focal point and then darker variations and lighter variations of it's colour wheel opposite (depending on what scheme type you choe) will be used in many ways to accent that colour. It's true that if you had 2 leading colours they would be exact opposites but that's not quite how it works
    – Dan Hanly
    Mar 16, 2011 at 15:51
  • They wouldn't give you a colour that would overpower your leading colour whether it's a colour wheel opposite or not.
    – Dan Hanly
    Mar 16, 2011 at 15:52
2

There is a lot of confusion over various color models because the physics of color and light and the biology of the eye were not well understood when the predominant theories emerged in the arts. The red, yellow, blue model is a holdover from years of trial and error with imperfect (and hard to find/expensive) pigments that is useful to a point, but is not entirely accurate.

You can use any three colors to define what's called a color gamut, a subset of all possible colors (http://en.wikipedia.org/wiki/Gamut). These colors make up a triangle with each one marking out a point. You can then combine these colors to make all possible colors inside the triangle, but you can never make a color that falls outside the triangle, so, in whatever medium you're working in, you want to choose colors that are as far apart as possible to make the widest gamut. Whatever three colors you use are called the primary colors of your color system.

When you're working with light, the colors that make the widest gamut are red, green and blue, so these are called the primary colors of light. This system is called additive color because you start with black (darkness) and add different amounts of red, green and blue to make the various colors. When you have equal parts of all three, you get white. (http://en.wikipedia.org/wiki/Additive_color)

If you're working with ink or dyes or paint, the widest gamut uses cyan, magenta and yellow. This system is called subtractive color because you start with white (say, a piece of paper that reflects all light evenly) and the pigments you add absorb light, keeping some color from reflecting off the paper. So a cyan ink really just absorbs red, leaving the green and blue light to reflect. When you have equal amounts of all three, you get black. (The reason for k - black - in the cmyk system is that the inks are imperfect - don't absorb all of the light they should - and adding a black ink makes the darks darker.) (http://en.wikipedia.org/wiki/Subtractive_color)

Turns out that because the subtractive system absorbs the light from the additive system, the primary colors of light are the compliments of the primary colors of ink and vice versa.

On the web, you're using light (generated from the computer monitor) so you should think of red (#ff0000), green (#00ff00) and blue (#0000ff) as the primary colors and cyan (#00ffff), magenta (#ff00ff) and yellow (#ffff00) as the complimentary colors.

2

I think another basic, physiological way to visualize a complimentary color is the following. In a room that is totally dark, shine a bright spotlight onto a swatch of colored paper. Stare for a while at the color and while you are still staring, shut the light off quickly. The complimentary color will appear and remain for a short while.

1
  • Ha, that's a fun experiment. :) Welcome to GD.SE, Charlie! If you have any questions about how the site works, have a look at the help center or feel free to ping one of us in Graphic Design Chat once your reputation reaches 20. Keep contributing and enjoy the site!
    – Vicki
    Oct 15, 2015 at 2:18
0

Ok I'm answering myself:

For documents to be displayed by a light system such as screens, the RGB color model should be used. It tells us what are the complementary colors for the three primary colors: Cyan for Red, Magenta for Green, Yellow for Blue.

Now if you want a tool that tells you which color is the complement of the color you picked, you first need to verify that whatever tool you chose, its color wheel gives the same result as the RGB model. One such tool for Mac is Painter's Picker (a plugin for Apple's Color Picker). Color schemer tools however usually give false results. Basically, any tool that can invert a color can tell you the complementary color (most complex image editing softwares have such feature, it's also built in Mac OS X Universal Access preferences).

RGB

1
  • @Farray I was looking for a tool (the right one). Sep 9, 2011 at 5:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.