Lesson 3: Colors

So far we’ve discussed how to specify the dimensions of something using CSS. However, it is still all black and white. It’s now time to add a little color.

Computer Color Basics

Color on monitors is produced by light. To be specific, there are three small lights per pixel for your computer. These three lights are red, green, and blue. As the light gets brighter, more of the specific color is added to that pixel. When all three are at their maximum brightness, you get white. When all three are off, you get black.

This is known as additive colors, and is in the color space RGB (Red-green-blue). Additive color differs from the type of color you learn about in your primary school art class, where you learn about colors on paper. When you use paint or crayons, it is subtractive color. As you add more material, the color gets darker. With additive color, the more material you add (which in our case is light), the lighter the color gets.

A color space simply refers to a method of defining a color. Some other color spaces are HSV (Hue-Saturation-Value) and YCbCr (Luminance-Chroma Blue-Chroma Red). They are all just different ways to define colors.

Currently, monitors can typically have 256 different values for each red, blue, and green, which gives you a total of 16,777,216 different colors. We can specify those values using one of three different methods.

Defining Colors

In CSS there are three ways to add define a color. They are:

• Predefined Color Constant
• Six-digit Hexadecimal Value
• Three-Digit Hexadecimal Value

Predefined Color Constants

There are a large number of color constants defined in CSS. A color constant simply means a name of a color which CSS has defined, such as black or white.

Below is a full table of predefined colors keywords and their equivalent six-digit hexadecimal values:

These color keywords are browser specific, so it is important to remember that all colors may not work in all browsers. Due to this, it is safer to use the hexadecimal value instead of the color keyword.

Six-Digit Hexadecimal Values

A six-digit hexadecimal value consists of six hexadecimal digits. Hexadecimal is a method of counting in which each digit has sixteen possible values (0-15). Our typical counting method is decimal, with ten possible values (0-9). For those digits above 9, we use the first six letters, A through F. A = 10, B = 11, C = 12, D = 13, E = 14, F = 15.

The six digits are actually three pairs of two hexadecimal digits. Each of these pairs represents a different amount of red, green, or blue respectively.

With two hexadecimal digits, they can have 256 different values each (0-255), the values that a monitor can display.

Hexadecimal values are always preceded by a pound symbol (#), which let’s the computer know that it is a hexadecimal value.

So, for example, the value #00CCFF has no red (red is 0), green at 80% of it’s maximum brightness, and blue at it’s maximum value. That means that we get a blue color with a bit of green.

There is a shorter method to represents some values, if a pair of values is the same. That is the three-digit hexadecimal value.

Three-Digit Hexadecimal Value

If the hexadecimal value is made of three pairs of repeating digits, you can use a shorter, three-digit version, by removing one of each of the digits.

That’s a bit complicated to understand. It’s a lot easier to see with an example. Let’s use #00CCFF. We’ll break each value up into it’s pairs, so we have 00, CC, and FF. If you notice, each of those pairs have the same digits that make them up. We can then shorten the hexadecimal into three digits by removing one of those digits from each pair, resulting in #0CF. These two are equivalent.

You can’t use the shorter version if one or more pairs have two different digits. For example, let’s use #0080FF. If we break it into pairs, we have 00, 80, and FF. 00 and FF could be shortened, but because 80 can’t be shortened, the whole value needs to remain six digits long.

Converting Hexadecimal to Decimal

Occasionally you may only have the RGB decimal values for a color, which are numbers ranging from 0-255, so it’s important to know how to convert decimal to hexadecimal.

To convert from decimal to hexadecimal, you find the largest value for x you can get within the decimal number for 16^x. You can find this by starting x at 0 (or just making an educated guess as to a starting point). Divide your decimal number by 16^x. If the quotient is greater than 15, your x is too small.

Once you have your starting x, divide the decimal number by 16^x. Subtract the whole number portion of that quotient from your decimal number. The whole number portion is your first hexadecimal digit. If it is bigger than 9, your digit will be a letter, as we discussed earlier.

Next, reduce x by one and repeat the same process until you get x equal to 0. You’ll now have your hexadecimal number.

Let’s do an example. We’ll convert the number 582,974,359. I just came up with that number by hitting several numbers on my keyboard. Well, I’m going to take an educated guess that x has to be at least 6. So, 16⁶ is equal to 16,777,216. 582,974,359 divided 16,777,216 equals 34 and some change, so I’m off a bit. I’ll try 16⁷ now, which is 268,435,456. 582,974,359 divided by 268,435,456 is about 2, so that’s our starting point, and our first digit is 2.

582,974,359 / 167 = 2 (Hex is now #20000000)
582,974,359 - 2 * 167 = 46,103,447

46,103,447 / 166 = 2 (Hex is now #22000000)
46,103,447 - 2 * 166 = 12,549,015

12,549,015 / 165 = 11 (Hex is now #22B00000)
12,549,015 - 11 * 165 = 1,014,679

1,014,679 / 164 = 15 (Hex is now #22BF0000)
1,014,679 - 15 * 164 = 31,639

31,639 / 163 = 7 (Hex is now #22BF7000)
31,639 - 7 * 163 = 2,967

2,967 / 162 = 11 (Hex is now #22BF7B00)
2,967 - 11 * 162 = 151

151 / 161 = 9 (Hex is now #22BF7B90)
151 - 9 * 161 = 7

7 / 160 = 7 (Hex is now #22BF7B97)
7 - 7 * 160 = 0 so we're done.

So, 582,974,359 in decimal is equal to #22BF7B97 in hexadecimal.

Luckily, you’ll probably never have to convert a number that large. For color specific values, the decimal value range is between 0 and 255. Thanks to this limit, we know you’ll only be working with 16¹ and 16⁰, so you can just start from there. Let’s work an example. Say we know the value of our color is 255 red, 103 green, 14 blue.

255 is the maximum value for a decimal color value, so we know it is FF (F is equal to 15). However, we’ll work it out. 16¹ is equal to 16, of course. We’ll divide 255 by 16 and we get 15, with a remainder of 240. 255-240 is 15. The first 15 is the first digit of our hexadecimal value. 15 decimal is equal to F hexadecimal. 16⁰ equals 1. 15 divided by 1 is 15, so our second value is also F. So, our red is FF in hexadecimal.

Green is 103 in decimal. 103 divided by 16 is 6, with a remainder of 7. 7 divided by 1 is 7. So, our hexadecimal value is 67.

Blue is 14. 14 divided by 16 is 0, with a remainder of 14. 14 divided by 1 is 14, which is E in hexadecimal. So, our blue is 0E.

So, our decimal color 255, 103, 14 is equal to #FF670E.

You could also multiply the three decimal values together and work it as one large hexadecimal value, though this is usual a bit tougher than the three smaller values. If you did this though, you would start at 16⁵ and work your way down.

There are also lots of online conversion tools, as well as conversions tools such as those found in Windows Calculator which you can use as well.

Colors Made Easy

Now that we know about how to convert hexadecimal from decimal it’s now time to get our colors. There are lots of color pickers available. If you have Photoshop or a similar program, they usually will show you the hexadecimal value for the color without you having to convert the color from decimal.

Even if you don’t, you still have a color picker on your computer. The built-in image programs on your computer will allow you to pick the color. These may or may not give you a hexadecimal value, but they will at least give you the RGB decimal value, which you can convert yourself.

Coloring Time

So, now you know all about colors, what can you actually apply color to? The following table is a list of properties that can have color applied to them, and what the color affects:

With only these few properties you can add a lot of color to your page. Here are a few example color applications:

body {
  background: #C0C0C0; /* Silver background to the whole page */
}

p {
  color: #F00; /* Red color for paragraph text. */
}

.snippet {
  border-bottom-color: #00FF00; /* Lime color bottom border for anything with class="snippet" */
}