Some other points programmers should be familiar with (not an expert here, everyone feel free to correct me)
1. In typical situations, 256 shades of brightness of a single color hue are the most we can distinguish and will form a smooth gradient without banding. If you're dealing with Green and related colors in the RGB spectrum (i.e. yellows and blue-greens, and near-white colors) it can go a bit higher, to 512 shades- This is why many compression algorithms compress reds and blues more than greens, because it's less noticeable.
2. Many artists will use opposite colors on the color wheel to darken colors- So to make a darker yellow, they'll mix in purple paint (or use purple dithering, depending on the medium.) How this relates to color theory from a psychological standpoint is unclear, but using this approach in UI design (for instance, adding purple detail to the shadow of a yellow object in an icon) often gives clean, elegant results.
3. Sometimes, when designing something, you say to yourself, "I want a red here that is just as bright as the blue over there". However, the psychological basis as to when colors of different hues appear to have the same brightness is a very complex problem- You can't just add R+G+B intensities and think that will tell you that two different colors have the same brightness, perceptually. Your best bet is to just "eyeball" colors in this case, unless you have the time to go down some very deep rabbit holes.
4. If you are designing for paper printing, expect all colors in an RGB image to look much, much darker and less vibrant than on a monitor. Going from RGB->CMYK and getting perfect results is another really hard problem out of reach for most programmers (I actually think there's low hanging fruit for people to write libraries that help optimize this conversion- Everything I've personally seen that is designed for a layman, such as Photoshop's conversion process, seems to be sub-par at helping laymen do this well.)
5. There are exotic color spaces like the TSL color space that most programmers are completely unfamiliar with and are designed for better modelling of human perception of color. We programmers should probably be using these color spaces a lot more.
6. A good rule for UI design is to only use two colors at most (besides gray tones) on the screen at a single time and maybe one extra color in a very limited way. If you don't do this, you'll end with an "angry fruit salad" interface (http://www.urbandictionary.com/define.php?term=angry%20fruit...) Microsoft Metro and some of the new "flat UI" stuff is a major deviation from this rule, for better or worse.
7. When in doubt, leave the background of a website white. You should have a very, very good reason before using a black or dark green/blue/brown background on a website. (or so most UI designers will tell you, though of course you're free to ignore their advice.)
The original article didn't teach me anything new (perhaps because I've paid attention to color in the past... it's a minor interest of mine). But YOUR points here taught me several new things. Thanks!
Yeah, I think the article went in the wrong direction. It's easy to understand the basic mathematics of color. Understanding how to use color and how to avoid common pitfalls is a lot more valuable to me.
>1. In typical situations, 256 shades of brightness of a single color hue are the most we can distinguish and will form a smooth gradient without banding.
This is less true than you might think. You rarely have a gradient from pure black to pure white, so in practice a useful gradient will have much fewer than 256 shades in it, few enough that banding can be noticeable to a trained eye. Add in the fact that most consumer TN panels are actually 6-bits per component with temporal dithering (rapidly flickering between two colors, basically) to compensate, and it's even worse. A lot of AV enthusiasts have switched to 10-bit (1024 possible values) per channel encodings for this reason: it preserves subtle gradients which improves compression and allows them to be displayed with dithering on lesser displays.
>2. Many artists will use opposite colors on the color wheel to darken colors- So to make a darker yellow, they'll mix in purple paint (or use purple dithering, depending on the medium.) How this relates to color theory from a psychological standpoint is unclear
It's just a simple way to desaturate the darker tones. If saturation is the degree that a color's strongest components deviate from its weakest, then it follows that adding a bit of the opposite mix of components to a color will even the components out and thus reduce saturation. If you tried to do the same by mixing black or grey into it, you'd go beyond evening the components and also reduce what were the dominant ones, and get a much duller color than you probably intended. Beginning artists often do this with skin tones, where it looks dull and lifeless to the point of being disturbing.
>6. A good rule for UI design is to only use two colors at most (besides gray tones) on the screen at a single time and maybe one extra color in a very limited way. If you don't do this, you'll end with an "angry fruit salad" interface
Heh, I'll have to remember that one. Pretty much sums up how I feel about syntax highlighting.
Regarding point #2, I've found it usually balances it a bit more and while keeping the same values, makes it more colorful. If working with a limited palette, a neutral grey can be used dually with warm or cool colors on the object to cast an opposite cool/warm shadow - which usually looks quite complementary, although I can't recall seeing a warm shadow cast from a cool-colored object very often - seems unnatural as shadows are generally cooler.
http://androidarts.com/art_tut.htm - this link touches a bit on color theory from a digital-painting standpoint, though it's pretty applicable. Color and Light for the Realist Painter by James Gurney is also a good book that has some info about creating unified palettes.
We find it pleasing to depict shadows as slightly cooler because the shadows we are most familiar with behave this way; those cast on a sunny day outside. Daylight from the sun is a strong source of yellow (warm color) while the remaining sky is a source of blue (cool color), and it is the sky's ambient light that you see when see a stark shadow cast by the sun, which makes the colors seem cooler in contrast with sunlight areas.
Professional artist whose work is very much about color here.
2. It's better to pick a single color to use to darken everything when shading; this gives a more unified feeling. Usually the best way to do this digitally is what most art programs call the "multiply" transparency mode, which I believe is simply r1xr2, g1xg2, b1xb2.
4. If you are designing for paper printing then work in the CMYK color gamut from the start. You will save yourself tons of headaches. That said modern high-end printers DO have a wider gamut than older ones, if you're going to be doing professional reproduction then talk to the people doing the printing and get color profiles.
5. Personally I do almost ALL my color choosing in HSV, it's a much better match for the way humans think about color than any other I've used. Hue: the color. Red orange yellow green purple. Saturation: how greyed out the color is. Pink is a low-saturation red, brown is a low-sat orange. Value: how dark it is. Poppy red vs. brick red. (HSV is also known as HLS, hue luminance saturation. IIRC there is a slight difference to this model, mathematically, but in practice it is much the same.)
The human eye is MUCH more drawn to contrasts in value than in hue. Two colors with the same value but different hues will vibrate uncomfortably when placed against each other. You can check for this by going to greyscale (in art programs, create a layer at the top of the stack, fill it with white or black, and set it to saturation mode); if two colors become the same grey then change one of them.
Thanks leeoniya, I had been looking for exactly this kind of treatment on the subject for years, I'll be using the info from that link in several projects immediately.
1. In typical situations, 256 shades of brightness of a single color hue are the most we can distinguish and will form a smooth gradient without banding. If you're dealing with Green and related colors in the RGB spectrum (i.e. yellows and blue-greens, and near-white colors) it can go a bit higher, to 512 shades- This is why many compression algorithms compress reds and blues more than greens, because it's less noticeable.
2. Many artists will use opposite colors on the color wheel to darken colors- So to make a darker yellow, they'll mix in purple paint (or use purple dithering, depending on the medium.) How this relates to color theory from a psychological standpoint is unclear, but using this approach in UI design (for instance, adding purple detail to the shadow of a yellow object in an icon) often gives clean, elegant results.
3. Sometimes, when designing something, you say to yourself, "I want a red here that is just as bright as the blue over there". However, the psychological basis as to when colors of different hues appear to have the same brightness is a very complex problem- You can't just add R+G+B intensities and think that will tell you that two different colors have the same brightness, perceptually. Your best bet is to just "eyeball" colors in this case, unless you have the time to go down some very deep rabbit holes.
4. If you are designing for paper printing, expect all colors in an RGB image to look much, much darker and less vibrant than on a monitor. Going from RGB->CMYK and getting perfect results is another really hard problem out of reach for most programmers (I actually think there's low hanging fruit for people to write libraries that help optimize this conversion- Everything I've personally seen that is designed for a layman, such as Photoshop's conversion process, seems to be sub-par at helping laymen do this well.)
5. There are exotic color spaces like the TSL color space that most programmers are completely unfamiliar with and are designed for better modelling of human perception of color. We programmers should probably be using these color spaces a lot more.
6. A good rule for UI design is to only use two colors at most (besides gray tones) on the screen at a single time and maybe one extra color in a very limited way. If you don't do this, you'll end with an "angry fruit salad" interface (http://www.urbandictionary.com/define.php?term=angry%20fruit...) Microsoft Metro and some of the new "flat UI" stuff is a major deviation from this rule, for better or worse.
7. When in doubt, leave the background of a website white. You should have a very, very good reason before using a black or dark green/blue/brown background on a website. (or so most UI designers will tell you, though of course you're free to ignore their advice.)