Ways to Set Color in CSS

There are various ways to set colors in CSS. This is a simple explanation of the options.

Using Color Names

Duh, well it seems pretty obvious. If you want a blue background on a div, for example, you can simply write this in your CSS:

div {background: blue;}

However, this is generally not considered the best option. Even though there are some 147 color names recognized in CSS, only 16 are thought of as “approved”—namely, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow. Any other color names than these—though they may work—won’t validate. And even if they did, 147 colors is still pretty limited, given the range of possible colors one could want to use.

So it’s generally recommended not to use color names in CSS, but instead to use one of the other options below.

Hexadecimal Color Values

Screen colors are made up of a mixture of red, green and blue. A hexadecimal (or “hex”) value is made up of three pairs of digits and letters that correspond to red, green and blue. A # sign is placed before these six characters to indicate that they are a hex value. For example, in a hex value like #bada55, ba stands for red, da stands for green, and 55 stands for blue.

For each one of those six characters, there are sixteen possible digits/letters: 0 1 2 3 4 5 6 7 8 9 a b c d e f—so, ten digits and six letters. That means that for each color—red, green and blue—there are 256 (16 x 16) possible variations, and that there are over 16 million possible hex values in all (256 x 256 x 256). That’s a lot more than 147 possibilities!

So at one end of the scale, there is white, whose hex value is #ffffff, while at the other end of the spectrum there is black, whose hex value is #000000.

But how can you find out the hex value of the color you want? Luckily, there are lots of tools to help with this. For example, if you have Photoshop, the color palette gives you the hex value for each color. And there are lots of online tools that help with this too, such as Color Scheme Designer.

To declare a blue background in CSS with a hex value, you would do something like this:

div {background: #0000ff;}

One last thing to note here: if the two characters in each pair are the same, the hex value can be abbreviated to three characters. For example, because blue is made up of 00 00 ff, it can be simplified to just 00f:

div {background: #00f;}

Decimal Notation

Another option is to use “decimal” notation, which looks like this:

div {background: rgb(0, 0, 255);}

In this case, the total value of the pairs for red, green and blue are listed. This can also be represented in percentages, like so:

div {background: rgb(0%, 0%, 100%);}

A tool like Photoshop also gives you these values.

With CSS3, these decimal values have the extra feature of opacity. For example, you can set the background color to 50% opacity (that is, make it see-though) lie this:

div {background: rgba(0, 0, 255, 0.5);}

Though CSS3 is still in development, this is pretty well supported in modern browsers now. CSS3 also allows for HSL and HSLA color values. Check out the second SitePoint link below for more details on those. They aren’t well enough supported for me to be interested in them just yet.

References

• The SitePoint Reference has more detailed information on color names and the other color values