Yellow is NOT a primary color of light!

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.

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

RRGGBB

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.

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 :slight_smile:

#F00 - Red
#0F0 - Green
#00F - Blue

The 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 :slight_smile:

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.

000
202
404
606
808
A0A
C0C
E0E
F0F

(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.

000
210
420
630
840
a50
c60
e70
f80

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)

That’s all for now - I hope this helps some.

Very nice summary. :tup:

I didn’t know about The Red, Yellow, and Blue. I was taught Red, Green, and Blue. But then again, my educational background isn’t in graphics or art.

Didn’t you ever do any finger painting etc when you first started school? That’s the age group that is taught about the Subtractive primary colours - 4 to 7 year olds.

I can’t remember if the Additive primary colours ever got mentioned while I was at school. I do remember reading about it in books about how TVs worked when I was 15.

No, I never did any of that. I never went to primary school.

Without actually testing… what happens when you get to zero for a particular color component? In your examples you have some that start at zero and remain there, and the rest stop when the first non-zero color gets to zero. But the compliments “wrap”…

I never even attempted to step through compliments manually before, this is great. Thanks.

When I was at primary school… many moons ago… we had primary colours as red yellow and blue, and secondary colours as green, purple and orange.

I always wondered what the tertiary colours were called, and my art teacher told me they didn’t exist :frowning:

Nice entry, Michael. It would make a good blog post. :wink: The relationship between RGB and CMY(K) is quite fascinating. I read a book on it a few years ago and it changed my concept of colors forever. If you wanted to start a series of posts, maybe go into that a bit more.

I’m not sure there’s really any point in web safe colors any more. I just use 24-bit color designations now (although I do abbreviate if possible, when using something like #222).

Not quite true - there is one tertiary colour in each case (where you mix all three primary colours together). Secondary colours are what you get when you mix two primaries together.

Subtractive primary colours - red, yellow, blue
Subtractive secondary colours - green, purple, orange
Subtractive tertiary colour - black

Additive primary colours - red, green, blue
Additive secondary colours - cyan, magenta, yellow
Additive tertiary colour - white

oh that’s so cool :smiley:

Nice entry, Michael. It would make a good blog post.

Bah, blog post. Expand on those ideas, maybe add a little bit more about how popular image editors and browsers deal with colours, maybe something about the alpha channel, and this can and should be a Sitepoint article.

Anyone can submit a SitePoint article. I think it would just need to be a bit longer. Ooh, and a table around that column of colour stepping examples with the full hex and decimal in the same row…

Thanks. I don’t know if I know enough about the subject to go into much more depth, but I could expand the examples. I have considered doing a CSS 3 blog series since I’ve been working with the working draft quite a bit of late. My job only requires I make it work in Firefox, and I take a couple moments to get it to work in the webkit browsers Safari and Chrome.

I’m not sure there’s really any point in web safe colors any more. I just use 24-bit color designations now (although I do abbreviate if possible, when using something like #222).

I’ve found the distinction between #222 and #212121 is so slight as to be almost imperceptible. I use quite a few math tricks to manipulate saturation, brightness and hue in my head when doing sheets, and the math of those tricks becomes much harder if you double the scope of all the numbers :slight_smile:

I do use 6 digit hexes on occasion, particularly when matching backgrounds to photos or jpeg gradients.

I was always taught a tertiary is the product of a primary and secondary color - such as red-orange. You are right though, pigments ‘subtract’ from the color leading to black if all are used equally, and light ‘adds’ leading to white.

I didn’t realize that.

As for alpha channel - that’s what separates 32-bit image files from 24-bit. Another byte is used for the opacity value.

I could do a blog maybe. I’ll have to think on it.

That would probably make more sense - then you’d have six tertiary colours in each case.

As a science teacher, I have to teach this stuff, and I have to admit I didn’t fully understand it all until I came round to teaching it. This sort of diagram helped me a great deal:

It’s useful to see pigments as subtractive colours and light as additive (you put all the light colours together and you end up with white). This is why my art teacher at school told me that “black is the absence of colour”, which seems counter-intuitive when mixing paint (you keep putting in colours) but if you think about it in terms of light, black is evidently the absence of light, and therefore of colour too.

Really great article Michael, If you are still investigating color theory I can highly recommend this website
It’s a series of articles on color theory and helped me through the process when I was learning: http://www.worqx.com/color/