CSS Colors

There are several CSS properties which specify colors for parts of HTML elements. For instance, color, background-color, border etc.

You can also use CSS colors to set the color of SVG elements which are vector graphic elements rendered in the browser. In that case you use CSS to set the stroke and fill colors of the SVG elements. How to use CSS with SVG elements is explained in my tutorial about SVG and CSS.

When you specify a color you can do so using the following formats:

• Preset Color Codes
• Hexadecimal RGB
• RGB
• RGBA
• HSL

Each of these methods will be covered in the sections below. Here are first some examples of these different color formats used in CSS rules:

#one   {  background-color: red;  }
#two   {  background-color: #ff0000;  }
#three {  background-color: rgb(255, 0, 0);  }
#four  {  background-color: rgba(255, 0, 0, 1.0);  }
#five  {  background-color: hsl(0%, 100%, 0%); }

All of these CSS rules set the background color of an HTML element to the color red but they do so using a preset color code, hexadecimal color code, RGB color code, RGBA color code and HSL color code.

Predefined Color Codes

CSS contains a set of predefined colors like red, green etc. Here are some of the most common preset color codes:

• red
• green
• blue
• black
• white
• gray
• magenta
• purple
• violet

There are more predefined colors than these, but while these predefined color codes may seem handy, they rarely meet your needs. Your website's color scheme will most often require colors that do not have predefined codes. Most often you will therefore use a hexadecimal or RGB / RGBA color code.

Hexadecimal RGB

The hexadecimal RGB color notation is the oldest color notation (together with predefined color codes). The hexadecimal RGB color notation splits any given color nuance into three components: Red, Green and Blue. That is where the three letters RGB come from. Any color is composed of a certain amount of red, greeen and blue color.

When you specify a hexadecimal RGB color you write the red, green and blue color values in hexadecimal numbers. A hexadecimal color component number consists of a number between 0 and 255, but specified using 2 hexadecimal digits.

Here is a hexadecimal color code example:

#ff00ff;

This code consists of three color component values: Red (ff), green (00) and blue (ff). This color is thus a mix of red and blue, which results in a purple color.

Notice the # in front of the color code. This character signals to the browser that this is a hexadecimal color code.

RGB Colors

The RGB color format is very similar to the hexadecimal color format. Each color is specified as a mix between red, green and blue. Instead of using hexadecimal numbers, you use decimal numbers betwen 0 and 255. Here is an RGB color example:

rgb(255, 0, 255);

This example sets the red (first) color nuance to 255, the green (second) color nuance to 0 and the blue (third) color nuance to 255. This will result in the same purple color as the one listed in the hexadecimal color example.

RGBA Colors

RGBA colors mean Red, Green, Blue and Alpha. The RGB part is the same as in RGB colors. The A (alpha channel) specifies the opacity of the color. The alpha channel value can be set between 0 (fully transparent) and 1.0 (fully opaque). Here is an RGBA color example:

RGBA (255, 0, 255, 1.0);    

This example sets the red (first) color component to 255, the green (second) color component to 0, the blue (third) color component to 255, and the alpha (fourth) value to 1.0 meaning fully opaque.

A semitransparent / semiopaque color can be specified by setting the alpha value to 0.5 .

When a color is transparent or partly transparent then whatever is displayed under pixels having that color will be visible through these pixels. Thus, if you have a div element float on top of other HTML elments, and that div element uses a semi-transparent background color, then the HTML elements below the div element will be partly visible through the div element.

HSL Colors

HSL colors (Hue, Saturation, Lightness) are new in CSS 3.0. If you are a designer you might be more used to working with HSL colors than RGB colors. You can specify HSL colors like this:

hsl(0%, 100%, 0%);  

The code hsl tells the browser that you are specifying an HSL color. The three components inside the parentheses are the Hue, Saturation and Lightness values (in that order).

I will not explain how the HSL color scale works. You can find that online.