After a while, you can get a feel for what a color will look like just by reading the 6 letter and number combination preceded by # that you use in web design known as the hexadecimal color value. Here’s how (after the jump):
Web color is additive color, as opposed to subtractive color. In subtractive color, like in tubes of paint, you mix all the colors and you get black. More precisely, you get grey. In actual reality with real actual paint, you usually end up getting a sort of dark mud color.
In additive color, all the colors add up to white. This is because you are working with light, not, pigment. If you get a green, a blue, and a red light and shine all three at the same spot, you actually do get white. It’s kind of an expensive experiment, but if you get all the props together, you can see that it is actually true. Think of adding a color as putting on a gel of that color over the white light, blocking out the rest of the spectrum. If you can get your hands on an old TV, turn it on, and get up really close to it, you can see that every pixel is actually a combination of these three colors.
In hexidecimal color encoding, the first set of two letters represent the red (#FF0000) value, the next two letters how much green (#00FF00) is in the color, and the last two, the blue (#0000FF). Looking at the chart I made above, you can see that if you combine Red and Blue, you get Magenta, or #FF0000 + #0000FF = #FF00FF. So you can do a sort of visual math where you add light depending on how much red, green, and blue is in the number.
A bit on hexadecimal notation
Hexadecimal notation is a base 16 number. It’s like instead of counting to 10, you count up to 16. But we don’t have a single digit for numbers 10 through 16, so we use letters A through F (A=10, B=11 and so on to F=15). In our normal base 10 (or decimal) system, we start at 0, then go to 9. If we need ten, then we add another digit, going from 9 to 10. In hexadecimal, once we hit sixteen, we need two digits, so we go from F to 10. In decimal notation, 99 is the same as 9*1 + 9*10. In hexadecimal, FF is equal to 255 in decimal, or 15*1 + 15*16.
If that isn’t making sense to you, check out this handy chart.
CSS to the rescue
In CSS, you can limit your pallet from millions of colors (16,777,216 to be precise) to thousands (4069) by writing red as #f00 instead of #FF0000. Another cool way to pick a color is to write one of the 147 named colors.
CSS can also use decimal instead of hexadecimal. #FF000 (red) would be written rgb(255,0,0) instead. Even better, you can write rgb with percentages, so it can be written rgb(100%,0%,0%). If you can’t wrap your head around hexadecimal, try visualizing it as a percentage instead of 00 through FF.
The special case of Green
The named color green, is not the same color as #0F0. That is because our eyes are really crappy about seeing green. The bright green light of full on F’s turns out to be a pretty annoying color. So green, the named color, is actually a bit darker at #080. The bright #00FF00 color is given the name lime.
Further down the colored rabbit hole
There is another way to name colors, and that is called HSL, or Hue Saturation Lightness. I’m not going to explain it here, but here is a good article on that.
With hsl and rgb in CSS, you get another value, ‘a.’ That stands for ‘alpha channel’ and is an opacity from 0 to 1, where 0 is invisible, 1 is fully visible (opaque), and 0.5 translucent. Thus this see through red would be written as rgba(255, 0, 0, 0.5) or hsla(0, 100%, 50%, 0.5) and is actually transparent.