CSS3 Colors: RGBA, HSL, and HSLA

With CSS, you can give color names, hexadecimal (#FFF, or #FFFFFF for white) and RGB (Red, Green, Blue) values providing either integers (0-255) or percentages. For example, white is rgb(255, 255, 255) or rgb(100%, 100%, 100%).

images/articles/css/css17.webp

In addition, CSS3 also introduces RGBA (Red, Green, Blue, Alpha) colors, HSL (Hue, Saturation, Lightness) colors, HSLA colors and opacity.

RGB Hex Values

Hexadecimal values range from 0-9 and a-f. Values include three couplets of hexadecimal values representing the levels of red, green, and blue. The color value couplets range from 00 (no color) to FF (full color).

RGB Decimal Values

This uses decimal values from 0 (no color) to 255 (full color) to represent the levels of red, green, and blue.

RGBA Colors

RGBA color values are extension of RGB color values with an alpha value, which specifies the opacity for a color. An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Unlike RGB, which can also be represented with hexadecimal notation as #RRGGBB, there is no hexadecimal notation for RGBA.

HSL Colors

HSL stands for Hue, Saturation and Lightness. HSL color value is specified with: hsl(hue, saturation, lightness). Unlike RGB, where you need to manipulate the saturation or brightness of a color by changing all three color values in concert, with HSL you can tweak either just the saturation, or the lightness, while keeping the same base hue.

Hue is a degree on the color wheel (from 0 to 360). 0 (or 360) is red, 60 is yellow, 120 is green, 180 is cyan, 240 is blue and 300 is magenta.

Saturation is a percentage value - 100% is the full color. Saturation of 100% will be the full hue, and saturation of 0 will give you a shade of gray, essentially causing the hue value to be ignored.

Lightness is also a percentage - 0% is dark (black) and 100% is white.  Lightness of 100% will be white, 50% will be the actual hue, and 0% will be black.

HSLA Colors

HSLA color values are an extension of HSL color values with an alpha valve, which specifies the opacity for a color. An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha)

The alpha parameter defines the opacity. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Opacity

In addition to specifying transparency with HSLA and RGBA colors, CSS3 also provides with the opacity property. The opacity sets the opaqueness of the element on which it is declared. Similar to alpha transparency, the opacity value is a floating point number between (and including) 0.0 and 1.0. An opacity value of 0 defines the element as fully transparent, whereas an opacity value of 1 means the element is fully opaque.