When I was in first grade I was presented with a distressing problem for a 6 year old. My father, a television technician, had taught me that the primary colors are Red, Green and Blue. My teacher insisted that it was Red, Yellow and Blue. A few years later as my reading level increased I hit upon the answer - both are right depending on what you are talking about.

You are watching: Which of these is not a primary color of light

Red, Yellow and Blue are the primary colors of pigment. But Red, Green and Blue are the primary colors of light. If you are coming to web page design from a print background this distinction is very important to learn because color codes on the web mix light, not paint.

In CSS you’ve no doubt ran across color codes. #f00 is red, and #900 is a darker shade of red. Learning to mix and alter these codes without resorting to an eyedropper and art tool is a useful skill, but to teach this skill I need to explain why we evil programmers did things this way (I am a programmer with an art degree - somewhat rare I’ve found).

Colors on the web these days are in 24-bits. So what does that mean? Well, a bit is a 1 or 0 value in the computer. A 24 bit value means that each color has 24 of these 1 or 0 switches involved.

Why 24? Well, bits aren’t that useful by themselves so they are usually grouped together in bytes. Bytes are typically 8 bits long, meaning a byte can store a value 0 to 255. (storing 256 requires a 9 digit base 2 number as 256 is 2 to the power of 8 - the first digit is 2 to the power of 0).

24 bit color because one byte is used for each of the three primary colors of light. Now writing out 000000000000000000000000 for a color code is, ahem, cumbersome - so coders long ago (back in the 50’s) used octal and hexadecimal (colloquially “hex”) numbers. A hex number can stand in for four digits of a binary number, a two digit hex number can represent all possible values of a byte from 00 to ff.

(The reason for hexadecimal and not decimal is that you don’t have do any carrying when converting the numbers - it’s easy to do for human or computer)

Ok, I hope I haven’t scared off all the designers with all the math here - I’m trying to get to a point. The codes you see in CSS and elsewhere divide up as follows, the first two digits are the red value, the second two are the green value and the last two are the blue – so


That’s 24-bit. Older computers can’t display that many colors and many of them where still around when the web was born so CSS also accepts a 12bit color designation.

See more: Dividing A Circle Divided Into 3 Equal Parts, Dividing A Circle Into Thirds

Personally I tend to write out colors in 12bit fashion. #ff0000 is harder to read than #f00, further the difference between #ff0000 and #fd0000 is very, very slight and not likely to matter enough. Also, 12bit values are considered “web safe” colors though that distinction hardly matters as much as it once did, but if an older device limited to web safe colors displays your page it will round off a 24 bit color assignment to the nearest 12bit value.

Now, some demonstrations since vbulletin does permit users to post colors

#F00 - Red#0F0 - Green#00F - BlueThe secondary colors is where things start getting BAD if you are coming from a print background…#FF0 - Yellow#F0F - Magenta#0FF - Cyan

Yellow we all know. Cyan is “sky blue” Magenta is this weird rose shade of purple. Orange is nowhere to be seen. But don’t despair, mixing light is not too unlike mixing paint. Even better, it isn’t ruined by mixing - get it wrong and you just change the codes


Saturation is the easiest to manipulate for primaries and secondary colors, just walk through the values. Here we’ll go through magenta in steps of two.000202404606808A0AC0CE0EF0F

(Note, A = 10, B = 11, C = 12, D = 13, E = 14 and F = 15 in hexadecimal.)

If the base color isn’t a primary and tertiary then stepping through saturation values is tricker since you must be proportionate. Orange is #F80. To step through it’s saturation shades each time we add 1 to the green value we add 2 to the red as follows.000210420630840a50c60e70f80

Finally shifting to complementary colors is easy if you are willing to learn how to subtract in hexadecimal - you simply subtract the value in hex from FFF (white) to get the compliment. Red and Cyan are compliments in light - So FFF - F00 = 0FF. Orange (F80) has a compliment of Baby Blue (07F)

(Convert to decimal until you’re used to it. Orange is 15,8,0; to get it’s compliment 15-15, 15-8, 15-0. This gives us 0, 7, 15, the 15 converts back to F for 07F)