In addition to the extended color keywords range, CSS 3 offers new color values, not only the existing hexadecimal, e.g. #ff0000 and RGB, rgb(0,120,46), color models but also an additional HSL model, plus additional Alpha values on HSL and RGB for specifying opacity levels.
The New HSL Color Model
The new HSL, consists of a set of 3 color wheel related values used to define Hue, Saturation and Lightness. Measuring units and valid ranges for HSL are:
- Hue: 0 – 360 °
The angle at which the color is on the wheel. Values start with 0°, which is red, and finish the complete circle, back to red, at 360° - Saturation: 0% – 100%
The amount of the color used, i.e. saturation, is defined as a percentage where the percent line runs along the radius of the circle from the center, 0%, to the outer edge, 100% - Lightness: 0% – 100%
Defines the amount of lightness, where 0% is no lightness and 100% is full lightness
The HSL syntax is written: hsl(hue, saturation, lightness), for example, the equivalent HSL value for #ccc on a P element, as an alternative to p { color: #ccc; }, would be:
p { color: hsl(0,0%,80%);}
where Hue=0 °, Saturation = 0%, Lightness = 80%. The value for hue is written as a whole number without degree symbol, values for saturation and lightness are written with the percent symbol (no space).
A great advantage of using HSL color values is in the creation of color pallets, where, after setting a base color, saturation or lightness levels can be adjusted to create the pallet. For example, with a base color of medium olive, the lightness level can be adjusted to create 2 colors darker and two lighter:
New Transparency Values: RGBA + HSLA
In addition to the new HSL is the new Alpha value (for Opacity / Transparency) which can be used to extend both RGB and HSL, offering exciting new ways for displaying any element.
To use the Alpha value extension with RGB and HSL, you need to use the extended versions, i.e. rgb() becomes rgba(), and hsl() becomes hsla().
Notice that 4 values are now required, the first three values are given in the same order as by rgb and hsl, the alpha value is declared last, each value is separated by a comma:
- rgba(red,green,blue,alpha)
- hsla(hue, saturation, lightness,alpha)
The alpha value defines the opacity (transparency) of a color. Valid alpha values are 0.0 – 1, where 0.0 is fully transparent and 1 is fully opaque. For example:
HSLA Example
The left color block in the example, right, has a color value equal to:
hex: #798900 or
rgb: 121,137,0 or
hsl: 67, 120%, 57%
Using the extended HSL Alpha value, the right color block has been given an opacity of 70% using an alpha value of 0.7. This is written:
Left color block without opacity, using HSL: hsl(67, 120%, 57%)
Right color block with opacity, using HSLA: hsla(67, 120%, 57%, 0.7)
Note: for the first block, we could have also used the extended hsla with an alpha value of 1 (100% opaque) – hsla(67, 120%, 57%, 1)
RGBA Example
Similarly, working with the RGB extended Alpha value, the left color block is fully opaque, whereas, the right color block has been given an opacity of 30% using the alpha value of 0.3, the rgba values are:
Left block, without alpha (opacity), using RGB: rgb(149, 13, 3)
Right block with alpha, using RGBA: rgba(149, 13, 3, 0.3)
Note: as for hsl / hsla, the first block could also be defined using the extended RGBA, where the alpha value would be 1 (fully opaque) – rgba(149, 13, 3, 1)
Did you know, there’s loads of new named colors available in CSS 3 spec, check out our listing.
Learn more about color models for CSS 3 at https://www.w3.org/TR/css3-color/
Or general information about HSL at Wikipedia: https://en.wikipedia.org/wiki/HSL_and_HSV
