Color Palettes

September 2, 2004 12:31 PM

I am familiar with many of the sites on the web which generate a color palette from any given base color, but I don't understand how they determine which colors "go" with each other. What's the theory behind this? Is there any easy way to generate this kind of palette in Photoshop, Freehand, Fireworks, etc.?
posted by signal to computers & internet (8 comments total)

Here's a pretty cool way to create your own tool that does this, and also shows you how to incorporate the palette in CSS. (Canned php script)
posted by luser at 1:22 PM on September 2, 2004

I'm not an expert on this, but I'd say that there are two parts to this: a subjective part and a nut-and-bolts part.

The subjective part, which doesn't necessarily have anything to do with computers, is deciding which colors go well together. The most "scientific" one can get is to say certain combinations seem to please/effect many people in specific ways.

But once you've decided that certain colors DO go well together, then you can get a computer to generate those colors -- assuming that there's a describable pattern to which colors fo well together.

To start this process, you have to assign numbers to colors. Again, I'm not an expert, but I assume these numbers could (do?) come from a color's place in the light spectrum. In any case, on computers, a color is a mixture of some, all or none of three primary colors: red, green and blue (which are also the "primary colors" of human vision -- our eyes/brain has receptors for red, green and blue).

Once you've assigned numbers to the colors, then you can come up with a simple procedure of choosing complimentary colors, i.e. two colors go together if they are a specific number of numerical-steps apart.

Usually, in graphics apps, colors are represented as three values -- the red, green and blue values -- each one ranging from zero to 255. So pure red would be 255r, 0g, 0b and pure blue would be 0r, 0g, 255b. Alternately, percentages are sometimes used, i.e. pure green would be 0%r, 100%g, 0%b.

In addition to these primary colors, there are secondary colors, which you get by mixing two primaries together. The secondary colors (if r, g and b are the primaries) are cyan, yellow and magenta.

You can arrange the primaries amount a circle -- a "color wheel" -- with red at the top, and green and blue at the sides:

                   RED

GREEN
                                 BLUE

You can then add in the secondaries, between the primaries:

                   RED
       yellow                

GREEN                           magenta

                                     BLUE

                     cyan 

(sorry, that's a bad "circle" -- see a better color wheel here. ) As you can see, red and cyan are across the circle from each other, so they are opposite colors (as are green/magenta and yellow/blue).

Numerically, we can look at the primaries and secondaries this way:

RED: 100%r, 0%g, 0%b
magenta: 100%r, 0%g, 100%b
BLUE: 0%r, 0%g, 100%b
cyan: 0%r, 100%g, 100%b

GREEN 0%r, 100%g, 0%b
yellow: 100%r, 100%g, 0%b

Notice that the opposite of red, cyan, has the two other primaries -- green and blue -- set to 100% and red at 0%. All the opposing pairs work this way.

One (simply) color-matching system involves using opposites together (the opposition creates a kind of exciting punch!). As you can see, the opposites can be worked out purely numerically.
posted by grumblebee at 1:24 PM on September 2, 2004

Well first I'd read this page, then I'd go here and in particular look at the "Scheme" pull down menu at the top of the page and see how different options in the menu change the graphic to the right of the menu.

pwb.
posted by pwb503 at 1:28 PM on September 2, 2004

I would love to hijack this thread (any objections, signal? ;-) and make it a repository for the shared color expertise/lore of AskMe brains. I suggest posts of both the scientific & practical natures.

I will say that, having worked in the "graphics" game for years, one of the most important under-the-hood things for me to understand has been how to work with shades of gray. The individual "color" channels are generally represented as grayscale images, as are alpha channels. And if you work at all in video, grayscale "masks", "keys" or "mattes" become vital.

In the RGB scheme, you get gray any time the three primary values are the same -- with the exception of when they're all at 100%, in which case you get white, or all at 0%, in which case you get black.

0%r, 0%g, 0% ------------> BLACK
20%r, 20%g, 20%b ------> DARK GRAY
50%r, 50%g, 50%b ------> MEDIUM GRAY
80%r, 80%g, 80%b -------> LIGHT GRAY
100%r, 100%g, 100%b -->WHITE

One of the places this is really useful is in doing color correction. Let's say you have a photo, and the color looks a bit wonky. See if you can identify something in the photo that you know SHOULD be gray. Photographers sometimes hold gray cards up to the camera (or, in a pinch, you can use a newspaper).

In Photoshop (or a similar app), hover your mouse over one of the pixels of the supposed-to-be-gray object and look at the rgb values in the info pallette.

Let's say you see numbers like this:

red: 116
green: 119
blue: 240

(Photoshop uses the 0-255 range for rgb values.)

This is telling you that the image has an incorrect blue cast to it. Try fixing it by using a Curves tool in the blue channel only. Bring the blue (on the supposedly-gray-object) down to aproximately the r and g values. This will turn the object to a more natural gray, and -- in theory, at least -- correct color problems in the entire image.

Figuring out rgb values in your head can be difficult, so it's great to have that all-values-the-same-for gray goalpost in your head. Get the grays right, and you'll improve the whole image.
posted by grumblebee at 1:52 PM on September 2, 2004

luser: you're right, that is pretty cool.
grumblebee: thanks for the explanation, though I understood most of that already. Hijack away, the whole topic interests me.
pwb503: that's basically what I was asking, thanks.
posted by signal at 2:11 PM on September 2, 2004

Color Theory Basics - try that out....!
posted by SpaceCadet at 3:26 PM on September 2, 2004

There is no one correct school of colour mixing theory. Indeed, it can be quite a contentious issue among artists.

Further confusing issues are factors involving colour purity, greyness, luminosity, interaction, and even social factors.
posted by five fresh fish at 4:50 PM on September 2, 2004

I know what you mean. I am right into creating palettes before I start a project and I use this (and occasionally this) to help me out. You can save the pages whole for later use offline.
posted by Bdave at 6:59 PM on September 2, 2004