<?xml version="1.0" encoding="utf-8"?>

HSLA color values in CSS

HSLA color values in CSS Bad Practice
HSLA color values in CSS Best Practice

The HSL color model stands for Hue, Saturation, and Lightness:

  • Hue defines the color position on a color spectrum, and its value specifies the degree from 0 to 360.
  • Saturation defines the color intensity and how bright or pale the color looks. It's a percentage value, where 100% means the full color, and 0%, on the contrary, represents the grayish color.
  • Lightness shows in percentage how much black or white mixed with the base color. 0% is dark (black), and 100% is white.

Like in RGBA colors, HSLA uses "A" for opacity with the highest value of 1.0. (opaque color) and the lowest — 0.0. (fully transparent color).

Top contributors

Andrea Illes
Sharon Ho

Topics

Share

Improve your UX & Product skills with interactive courses that actually work