Working with HSL in CSS
119

Working with HSL in CSS

Kommentarer inaktiverade för Working with HSL in CSS

CSS2 and RGB

The RGB color system is an additive model in which red, green, and blue are combined in various ways to reproduce other colors. The RGB system was formally introduced in HTML3.2 and CSS1, but was used in HTML versions before that as well.

CSS2 has five ways of interpreting RGB colors:

  • using a full hex combination: #FF0000
  • using a shorthand hex combination: #F00 (equals #FF0000)
  • using a comma-separated list of three numerical integer values: rgb(255, 0, 0)
  • using a comma-separated list of three numerical percentage values: rgb(100%, 0%, 0%)
  • using a color keyword (sometimes referred as named color), f ex red or maroon

The shorthand hex notation is arguably most popular since it’s shorter and possibly easier to remember. It is worth noting that the so called web safe color palette persists of 216 combinations using the shorthand hex combination in steps of three, f ex #000 #333 #99C #F93 etc. Calling it “web safe” can be confusing though, since it’s origin is from the old days of limited video hardware that had a smaller range of 216 RGB colors. “Screen safe” might be a more appropriate definition. However, almost every display uses 24-bit RGB and 16.7 million RGB colors these days, and therefore it is probably “web safe” to use any RGB combination from the full spectra today.

HTML4 officially supports 16 named colors, but it has been a fact over the last few years that almost all major browsers supports 140 named colors.

The CSS3 Color Model

CSS3 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:

  1. hsl(240, 100%, 50%);

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

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.

That is all for this time about colors in CSS. I hope that you have found this guide to be useful. Try this out in your own project and create beautiful HTML5 pages with the help of your great knowledge in this area.