Working With HSL In CSS

The CSS3 Color Model

RGBCSS3 supports a wider range of color definitions and the most important new feature is HSL support. The HSL color model stands for Hue, Saturation and Lightness / Intensity and is a non-linear deformation of the RGB colour system. It does not include a wider or more limited range of colors, it is simply a more human way to code colors than RGB ever was. The Hue is defined using an angular integer ranging from 0 to 360 degrees. This represent a base color from the HSL cone ranging from red (0°) to green (120°) to blue (240°) and then back to red. Saturation and lightness is defined using percentages from 0 - 100% and complements the hue to create the full color. So for example, if I have a bright blue base color like this:

  hsl(240, 100%, 50%);

I can simply adjust the two percentages to make it less or more saturated/darkened.

In my humble opinion, HSL is a lot easier to use than RGB and I’m quite surprised that CSS hasn’t been recognizing this before. Basically all graphic software are using HSL or the similar HSV and its fundamental simplicity makes it much more sensible for a human to understand and adapt. Just pick a color using the wheel, then adjust it’s subtleness, instead of crazy hex values and additive integers.

Here is a simple reference list for HSL values to create basic colors, with a 60 degrees interval. Memorize this and you can produce almost any color just by adjusting the numbers slightly:

• 0 - red
• 60 - yellow
• 120 - green
• 180 - turquoise
• 240 - blue
• 300 - pink
• 360 - red

In addition to HSL, CSS3 also introduces rgba and hsla. It is basically the same as rgb and hsl, except that it also includes a fourth integer for opacity (or alpha) ranging from 0 to 1.

|= Vertical Line Operator - CSS3

Operator: |=

Description: Using the vertical line operator will allow the selector to match elements whose attribute values form a hyphenated list of words in which the specified value is present. The vertical line operator is primarily intended for the lang="" attribute. The following CSS will select a link element with a lang="" attribute value that contains en- and place an American flag after it. (CSS 2.1)

The CSS Example:

  a[lang|="en"] {
    padding: 0 20px 0 0;
    background: #fff url(icon_lang-en.gif) no-repeat right center;
  }

The HTML Example:

  <a href="http://www.example.com" lang="en-US">target link</a>

{ ^= } Caret Operator - CSS3

Operator: ^=

Description: Using the caret operator will allow the selector to match all elements that have an attribute that begins with the specified value. The following CSS will grab any link that has an href="" attribute value that starts with http, and place an icon after it.

This example shows how useful this selector is, using CSS for highlighting external or absolute links on your site. (CSS3)

  a[href^="http"] {
    padding: 0 20px 0 0;
    background: #fff url(icon_external-site.gif) no-repeat right center;
  }

And The HTML For The Example:

  <a href="http://www.sitepoint.com">SitePoint</a>