Colors in CSS can be defined in four different ways: using a six digit hex number, three digit hex number, a preset color, or RGB values. There are a few properties that allow you to define colors and thus it is important to discuss how these work in detail.

How Color Works

The computer outputs visual information through small pixels arranged in an array on the screen. A pixel is simply a picture element, or the smallest unit of capturable detail. Hence, each pixel is represents one distinct color.

However, how does a computer actually display the colors? From where does a pixel get its glow? Well, to put this into perspective, depending on your computer's color settings, up to 16,777,216 different colors can be represented. That is a lot of colors! However, each pixel doesn't have a single light that will operate every color, nor does it have 16 million different color filters. Rather, each pixel uses three different lights each with varying brightness.

A pixel uses three different color lights: red, green, and blue. By varying the level of intensity of these lights, many different colors can be formed. Now, let us say that each color can either be on or off, so each light therefore has two intensities. How many colors can be formed? In the chart below, the color code is represented with RGB, or red green blue. A 1 means that color is on and a 0 means off.

That is 8 different colors that can be formed if each color can be represented in two ways. Now imagine each color represented in 256 ways! That is why so many colors can be represented on the computer through pixels.

As such, when we are defining the color to be used in properties, we are defining what intensity each color should have. In the following sections, each method of defining color will be explained in better detail using this as the background.

Preset Colors

A preset color is a color name that the Internet is able to recognize and automatically assign pixel values in order to yield the particular color. For instance, let us say that you wanted every word "jello" to be maroon in color. Simple, define the color to be "maroon". You would use this code: [[span style="color: maroon;"]]jello[[/span]] to make the word "jello" maroon.

Only 16 colors are accepted to be W3C standard and should thus work universally. There are other color codes found at w3schools that may work, but it is recommended you use hex values for those colors rather than their name.

The 16 preset standard colors are as follows:

Hexadecimal Code

Using hexadecimal code is the standard syntax for defining a color. An example of a hexadecimal number is #F54B81. This yields an interesting shade of pink. But how on earth does that number work? How can a number contain letters? And finally, how do I know what color I get from a particular code?

The first thing you need to know is that a hexadecimal number is not your average-joe number. First, let us consider our normal number system. Our normal number system uses ten symbols in order to represent all the possible numbers. Thus, our number system is base 10. The ten symbols we use are 0, 1, 2, 3, 4, 5, 6, 7, 8, and 9, and with those we can represent all the numbers.

In a hexadecimal system, base 16, sixteen symbols are used instead of ten. The ten symbols from before are used with the addition of the letters A-F. Hence, we get letters in numbers. Counting in hexadecimal is a little more complex. You would of course start off with the first nine numbers, but after 9, what is next? In the normal base 10 system, a 10 would, but not in hexadecimal. The next symbol is A, then B, then C, and so on until F is reached. After that, then we reach 10, 11, etc.

This means that in hexadecimal, A=10, B=11, a 10 in hex is a 16 in the normal system and so forth.

So then, how does this relate to color? Let us split up the hex number into three parts: the first two digits, the middle two, and the last two. The first two digits make up the red component of the total color. The middle two represent the green component, and the last two represent the blue component, like so:

Let us first look at the red part of the color. We have the number F5. The smallest number allowed would be 00 meaning absolutely no red. A FF would be the most red possible. Other values in between represent varying shades of red. Therefore, F5 is quite a bit of red.

4B for green is not quite as big. It is closer to 00 than it is FF, so we can imagine it as a bit of a dark green. For blue, we have 81 which is pretty close to halfway (80). Therefore, it is sort of a medium blue. To get the overall color, we add these three luminosities of light to get the overall color.

Remember from above? Every pixel is three different shades of red, green, and blue, and thus here are the three components spelled out! This hexadecimal reads, "We want a lot of red, not a lot of green, and some blue." Thus, we get our final color.

Here are the individual colors. Hopefully you can see how they add up:

Here are some examples of color codes using hexadecimal numbers.

Three-digit Hex Value

Sometimes, you can shorten a hexadecimal value to only three digits, like in #4D5. When you do this, you are selecting one of 4096 colors, such would be the equivalent of 4-bit color (as opposed to 8-bit color above).

The translation between a three digit value and six digit value is easy. If #4D5 is the three digit hex number, then its equivalent six digit hex number is #44DD55. Note that if you have a number #447790 that you cannot shorten this to #4790. That would be bad!

Here, you can see how two numbers are equivalent in color:

Here are more examples of three digit hex numbers in use.

RGB Definitions

There is one last way to define color that is rarely ever used since it is longer to write or harder to visualize. This is simply defining what specific luminosity of each of red, green, and blue with values from 0-255. Remember that a single color can have 256 different luminosities, and so therefore for each color you define which specific luminosity you want.

The syntax for doing this is as follows:

color: rgb(red,green,blue);

You would replace red with a value between 0 and 255 for redness, green with a value between 0 and 255 for greenness, and blue with another value between 0 and 255 for blueness. To make the shade of pink above, we need a lot of red, a little green, and medium blue. We end up with this:

Rainbow-Themes Base Colors

Here is documentation of the colors used for the Wikidot Rainbow themes.

Late Harvest

Green Grass

Cherry Red

Deep Blue

Orange Juice

Pretty Pink

Royal Purple

Sky Blue

Tropical Seas

Midnight Coal

Silent Silver

Pale Snow