CSS3 guide: 5.3. numeric colors

This is a post in a series, please see the Table of Contents [webmasterworld.com] for the other posts in the series.

5.3. numeric colors

Colors in CSS3 can be either from a number of sets of named values or numerical in a number of formats.

These numerical values are in a number of different color schemes (RGB and HSL).

#RRGGBB (CSS2.1)

with RR the red value in hexadecimal, GG the green and RR the red. this gives a range of 00 (0) to FF (255) for each of the 3 primary colors. e.g. #AABBCC

#RGB (CSS2.1)

A shorthand notation for the above the numbers given need to be doubled to get the value. So #ABC is the same as #AABBCC.

rgb(r,g,b) (CSS2.1)

A notation allowing the values of the primary colors to be entered in decimal or percentages. E.g.: rgb(170,187,204) or rgb(67%,73%,80%)

hsl(h,s,l)

Example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <title>test</title>
  <style type="text/css">
   * { padding: 0; margin: 0; }
   span {
    width: 100px;
    height: 100px;
    display: inline-block;
   }
  </style>
 </head>
 <body>
  <ul>
   <li>#aabbcc: <span style="background-color:#aabbcc">A</span></li>
   <li>#abc: <span style="background-color:#abc">A</span></li>
   <li>rgb(170,187,204): <span style="background-color:rgb(170,187,204)">A</span></li>
   <li>rgb(67%, 73%, 80%): <span style="background-color:rgb(67%, 73%, 80%)">A</span></li>
   <li>rgb(66.67%, 73.33%, 80%): <span style="background-color:rgb(66.67%, 73.33%, 80%)">A</span></li>
   <li>hsl(210, 17%, 75%): <span style="background-color:hsl(210, 17%, 75%)">A</span></li>
  </ul>
 </body>
</html>

hsl circle example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <title>test</title>
  <style type="text/css">
   * {
    padding: 0; 
    margin: 0; 
   }
   #circle {
    list-style: none;
    position: relative;
    width: 420px;
    height: 420px;
    -moz-border-radius: 210px;
    -webkit-border-radius: 210px;
    border-radius: 210px;
    background-color: hsl(0,0%,50%);
    margin: 50px;
   }
   #r, #g, #b, #y, #c, #m {
    width: 100px;
    height: 100px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    position: absolute;
    line-height: 100px;
    text-align: center;
   }
   #r, #c { left: 160px; }
   #b, #m { left: 30px; }
   #y, #g { right: 30px; }
   #y, #m { bottom: 235px; }
   #g, #b { top: 235px; }
   #r {
    top: 10px;
    background-color:hsl(0,100%,50%);
   }
   #y {
    background-color:hsl(60,100%,50%);
   }
   #g {
    background-color:hsl(120,100%,50%);
   }
   #c {
    bottom: 10px;
    background-color:hsl(180,100%,50%);
   }
   #b {
    background-color:hsl(240,100%,50%);
   }
   #m {
    background-color:hsl(300,100%,50%);
   }
  </style>
 </head>
 <body>
  <ul id="circle">
   <li id="r">red</li>
   <li id="y">yellow</li>
   <li id="g">green</li>
   <li id="c">cyan</li>
   <li id="b">blue</li>
   <li id="m">magenta</li>
  </ul>
 </body>
</html>

Support:

hsl colors

Supported in most recent standards compliant browsers
Not supported by IE (including IE8)

Graceful fallback:

Mostly one can convert the colors to rgb and use that in the conditional comment.

Practical use

hsl colors are easier to choose color schemes that have matching colors and contrasting colors (keep the hue the same for matching colors or rotate it 60 or -60 degrees for contrasting colors).

CSS3 guide: 5.3. numeric colors

swa66

swa66

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week