Introduction to Color
Now that you are familiar with the basics or CSS, including how to apply rules, cascading, and selectors, lets start using it. The first major topic in CSS will focus on color. Specifically, how to specify colors for text and backgrounds.
Specifying Color
There are two common ways of specifying color in CSS;
- RGB
- hex values
Both work in a practically the same way, by specifying the amount of red, green, and blue that should be combined to make a color.
Each color has a possible range of 256 values (0-255. Remember in a 0-based system, ‘0’ counts as a value.)
RGB
In RGB, each of these three color values is represented as a decimal-based number, comma separated. These values are almost always wrapped in a rgb(rrr, ggg, bbb)
Hexadecimal
Hexadecimal (or hex) values, are written as a single string, prepended with a number sign, with digits for each color. #RRGGBB
THE MAJOR DIFFERENCE is that you can represent 256 values with a two-bit hexadecimal number. In hexadecimal numbering, each digit has 16 values (0-f). And, 16 * 16 = 256.
If we were translate this to binary;
| Binary | Hex |
|---|---|
| 0 | 0 |
| 1 | 1 |
| 2 | 2 |
| 3 | 3 |
| 4 | 4 |
| 5 | 5 |
| 6 | 6 |
| 7 | 7 |
| 8 | 8 |
| 9 | 9 |
| 10 | a |
| 11 | b |
| 12 | c |
| 13 | d |
| 14 | e |
| 15 | f |
So, in hex, we write the value;
000as00010as0a015as0f016as10017as11031as1f032as20050as32100as64150as96200asc8250asfa255asff
{ TODO: }
For more information on hexadecimal numbering, read;
Red, Green, or Blue
So, to specify a color of full red in either system, we set the first number to 255, and the other two to 0.
- RGB: rgb(255, 0, 0);
- Hex: #ff0000;
Likewise, to specify a color of full green or full blue, use a value of 255 for the color in question, and 0 for the others.
- RGB: rgb(0, 255, 0);
- Hex: ##00ff00;
- RGB: rgb(0, 0, 255);
- Hex: ##0000ff;
White & Black
We know from color theory, that white is the presence of all colors and black is the absence of all colors. Knowing this, we can deduce that black would be all 0’s and white would be all full value.
Black:
- rgb(0, 0, 0);
- #000000;
White:
- rgb(255, 255, 255);
- #ffffff;
Following from this principle, to get any color within the grey scale, we simply need to provide the same value for each color.
Complementary Colors
When we start to mix the ratios of red, green, and blue, we come up with the rest of the colors of the spectrum. Some of the first colors we should consider are the complementary colors of red, green, and blue. To get the complementary color for red, we use full green and blue. This creates Cyan.
Cyan:
- rgb(0, 255, 255);
- #00ffff;
Likewise, to get the complimentary colors for green and blue, which are magenta and yellow, respectively, we boost the values of the two other colors.
Magenta:
- rgb(255, 0, 255);
- #ff00ff;
Yellow:
- rgb(255, 255, 00);
- #ffff00;
Other Colors
Others colors are obviously some combination of these values. The exact ratios depend on
For more information on RGB colors, please read the corresponding Wikipedia Article.
Atom Tips:
If you are using atom, there are two packages you may want to consider installing.
-
Color Picker. The atom color picker lets you inspect colors, as any value type (rgb, hex, hsl, etc.), and navigate a color “picker” so that you can insert any color value. Once, installed, you can pull up this package with the “atom command palette” by typing color.
-
Pigments. The atom pigments package highlights color values in your code. This can make it easier to visually see in atom, while developing the colors that will appear.