How colors work in CSS

We have already had a peak at how to change text colors and background colors, but so far, we have only used named colors. Obviously there can't be a name for each of the millions of colors that the human eye can perceive, so besides named colors for the most common colors, CSS comes with several different ways of expressing a color value.

RGB colors

Colors on computers are usually made up as a mix of the three core colors: Red, Green and Blue. Each of these can have a numeric value between 0 and 255, expressing the amount of the color in question to use in the mix. In CSS, you can define a color using a specific RGB syntax, like this:

<p style="color: rgb(0,0,0);">Black text</p>

Zero red, green and blue results in the black color. At the other end of the scale, we obviously have white, which is represented by a red, green and blue value of 255:

<p style="color: rgb(255,255,255); background-color: rgb(0,0,0);">White text</p>

As you can see, the syntax is fairly straight forward - the word rgb followed by a set of parentheses, which surrounds the three values for Red, Green and Blue, each separated with a comma.

Adding transparency with RGBa

As an extension to RGB, you can use RGBa, which allows you to define a fourth value which defines the level of transparency applied to the color in question. This allows you to get a semi-transparent element and is frequently used to create see-through overlays on websites.

The last part of an RGBa set needs to be a number between 0 and 1, where 0 is fully transparent and 1 is a completely solid color. I'm going to show you an example, but to give you a better impression about how it works, I'm going to use an image background - don't worry, this will be covered in one of the next chapters.

<style type="text/css">
.background {
	padding: 20px;
	background-image: url('http://www.css3-tutorial.net/images/random_grey_variations.png');
}

.box {
	width: 200px;
	height: 100px;
	background-color: rgba(128,128,128,0.3);
	padding: 10px;
	color: white;
}
</style>
<div class="background">
	<div class="box">
		This is a semi-transparent box
	</div>
</div>

Notice how the box has a transparent layer, on which you can have text and images, allowing you to see the background image behind it - pretty cool, right? You can regulate the last part of the RGBa value to make the box more or less transparent, depending on your needs.

HEX colors

As an alternative to the RGB notation, you may use HEX notation, which consists of a hash character (#) followed by either 6 or 3 characters/numbers. Each set of characters represent the hexadecimal representation of the Red, the Green and the Blue component of the color. Allow me to illustrate with an example:

<p style="color: #000000;">Black text</p>
<p style="color: #0000ff;">Blue text</p>
<p style="color: #ff0000;">Red text</p>

You can read the values by discarding the hash character and then dividing the remaining 6 characters up into sets of two. Each set defines the values for R, G and B, using the hexadecimal notation.

In cases where all three sets consists of the two same characters, individually, you can use the shorthand notation by only writing the first character for each set. So for instance, black becomes #000, blue becomes #00f and red becomes #f00.

The HEX notation may seem a bit harder to use, because you will have to convert the R, G and B numbers into the hexadecimal values, but most web editors can help you with this. They often do so by offering a color picker to let you pick the color visually and by converting between named color values, RGB colors and HEX colors for you. Also, remember that HEX values are not case sensitive - #F00 is the same as #f00.

Named colors

As already mentioned, CSS comes with support for a wide range of named colors. These can be easier to remember than HEX or RGB values. For a complete list of these colors, please have a look at one of the many online references, e.g. http://www.cssportal.com/css3-color-names/.

Summary

As you can see, there are many ways to define colors when using CSS. Which one to use really depends on the situation and your personal preference. Some people insist that only one type of color notation is used, other people mixes and matches depending on the context and the color they're looking for. It's really up to you!