Let’s Add Some 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:

• 000 as 00
• 010 as 0a
• 015 as 0f
• 016 as 10
• 017 as 11
• 031 as 1f
• 032 as 20
• 050 as 32
• 100 as 64
• 150 as 96
• 200 as c8
• 250 as fa
• 255 as ff

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 the amounts of red, green, and blue in every value.

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.

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

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

Going Further

For more information on hexadecimal numbering, visit:

• Hex Number System
• Math is Fun: Hexadecimal Numbers
• Decimal to Hex Converter

{ TODO: }

1. Read the “7 Step Guide to Understanding Color Theory”.
2. Read pages 246-249 of Chapter 11 in Duckett.

---