Overview

Colors are one of the most prominent and ubiquitous style properties. They are used for text, backgrounds, borders, and outlines, and are applied to most every HTML element. So, it important that to have a good understanding of color specifications.

Color Names

The simplest way to specify a color is to use a color name. The complete list of named colors is available in our color name table here. With color names, we can specify a color by simply writing its name: red, green white, etc. However, the drawback to using names is that only a limited number of color can be specified via their names. To be able to specify all of the colors, we need to use one of the other specifications.

Named Colors

Hexadecimal Numbers

Hexadecimal numbers are base 16. So, in addition the ordinary decimal digits, 0-9, hexadecimal uses the letters a-f to represent the numbers 10-15. In this way, each digit can represent 16 distinct values, rather than 10. Two hexadecimal digits can represent 256 values instead of the 100 values that we can with represent with two ordinary decimal digits. The second digit in hexadecimal represents a multiple of 16, just as the 9 in 97 in decimal represents 9 × 10 or 90. So, A4, in hexadecimal, equals 10 × 16 + 4 = 164, since A is 10. The highest number that can be represented with two digits in hexadecimal is FF, which equals 15 × 16 + 15 = 255. We can consider more digits, but two hexadecimal digits are sufficient for our purposes.

Hexadecimal Color Values

Colors can be represented by three two digit hexadecimal numbers with a # prepended as shown: #B4C902. The specification of the color #B4C902 is the color that is shown here. The first two digits, B4 = 11 × 16 + 4 = 180, represent the intensity of the red channel in the color. The second two digits, C9 = 12 × 16 + 9 = 201, represent the intensity of the green channel. The third pair of two digits, 02 = 0 × 16 + 2 = 2, represent the intensity of the blue channel. All three of these are combined in the hexadecimal color specification #B4C902 to generate the color that looks like this:     . All of the named colors can also be specified via a hexadecimal specification and our named colors table contains all of the conversions.

Hexadecimal

RGB and RGBA

Like the hexadecimal specification, the RGB specification uses the three color channel values (red, green, and blue) to specify a color: rgb(189, 104, 255). However, in this case, the channel values are are given in decimal with values from 0 to 255, rather than the hexadecimal 00 to FF. So, when we specify a color as rgb(180, 201, 2), it is exctly the same color as the hexdecimal specification #B4C902, and it looke like this:     . So, there is a one-to-one correspondencce between the hexadecimal specifications and the RGB specifications and the conversion is direct numeric conversion of each color channel value.

There is an RGB variant that add an alpha channel value. The value of the alpha channel are from 0 to 1. Alpha indicates a level of transparency. So, an alpha value of 0 means that the color is entirely transparent or not visible and a value of 1 indicates that the color is totally opaque, like the normal colors. In between values are semitransparent, as shown below in the example with the alpha value of .5.

RGB and RGBA

HSL and HSLA

The HSL specification uses three values, like the RGB specification, to specify a color. The three values represent hue, saturation, and lightness. This specification is not as commonly used, but it is important to be able to recognize it when you see it in code. The HSL format requires some time to get acquainted with it. The hue is a value from 0 to 360, where 0 in means red, 120 means green, 240 means blue, and 360 is red again. All of the values between are hues between these. The saturation and lightness values are in the range 0% to 100%. Saturation represents how vibrant or dull a color is. Lightness represents how dark or light a color is. For illustration, the values are varied in the animations below.

Like RGB, HSL has an alpha channel variant. The semitransparent variant is illustrated below with the HSLA specification.

HSL and HSLA

Animated Hue, Saturation, and Lightness