About Color Values

Contact Us or call 1-877-932-8228
About Color Values

About Color Values

Color values can be specified using several ways.

Color Names

There are 17 basic keyword color names that are specified in CSS3. Modern browsers support many additional color names - everything from papayawhip to darkorchid .

<div style="color: red;">color: red;</div>

Hexadecimal Color Values

Hexadecimal color values take the format #rrggbb, where rr is the amount of red in the color, gg is the amount of green in the color, and bb is the amount of blue in the color.

<div style="color: #ff0000;">color: #ff0000;</div>

Short Hexadecimal Color Values

Hexadecimal color values can be abbreviated when a color is represented by three pairs of hexadecimal characters. For example, with #ff6600, you can remove one character from each pair. The shorthand color values take the format #rgb, where r is the amount of red, g is the amount of green in the color, and b is the amount of blue. For example, #f60 is the same as #ff6600.

selector {
	color: #f60;
}

Functional Notation

Functional notation takes the format rgb(n,n,n), where n is a number between 0 and 255 or percentage between 0% and 100% for the red, green, and blue intensities of the color, respectively.

<div style="color: rgb(255,0,0);">color: rgb(255,0,0);</div>
<div style="color: rgb(100%,0%,0%);">color: rgb(100%,0%,0%);</div>

CSS3 offers the use of RGBA-format color names, with the additional (the "a") parameter specifying the opacity (the "alpha" channel) of the color as a decimal between 0.0 (completely transparent) and 1.0 (completely opaque). Thus, the code

<div style="background-color: rgba(255,0,0,0.5)">
color: rgba(255,0,0,0.5)
</div>

would style the div with a red background with 50% transparency.

Also new in CSS3 is the HSL specification. Supported in modern browsers (Internet Explorer from version 9), we use HSL to specify hue (a degree on the color wheel, with 0=red, 120=green, and 240=blue), saturation (a percentage, with 0% a shade of gray and 100% the full color), and lightness (a percentage, with 0% as black and 100% as white). The following code displays a div with red background:

<div style="background-color: hsl(0,100%, 50%)"></div>

Recommendation

Our recommendation is to use three-character hexadecimal notation (i.e., #rgb) when you can get the color you want and to use the six-digit hexadecimal notation (i.e., #rrggbb) when you need to define the color more granularly.

Next