The HSL method describes a color with three easy-to-tune ingredients: hue, saturation, and luminance. Instead of thinking in red, green, and blue amounts, think of choosing a spot on a color wheel, deciding how vivid it should be, and then making it lighter or darker. section 17.1
Build an HSL color one value at a time:
- Hue is the color-wheel position, from 0 to 359 degrees. Red is 0, green is 120, and blue is 240. section 17.1
- Saturation is color purity, from 0% to 100%. At 100%, the hue is pure; at 0%, it becomes grayscale. section 17.1
- Luminance is lightness, from 0% to 100%. A value of 0% produces black, while 100% produces white. section 17.1
Color an element with hsl()
Use hsl(hue, saturation, luminance) as a CSS color value. For example, hsl(300, 100%, 25%) gives an h1 heading a dark, fully saturated purple. The first number selects the hue; the percentages control its purity and lightness. h1 { color: hsl(300, 100%, 25%); } section 17.6 section 17.7
HSL is especially handy when you have a hue in mind and want to make quick visual adjustments. A color chooser can let you drag controls for hue, saturation, luminance, and transparency while showing the matching hsl() value alongside RGB, hexadecimal, and keyword forms. section 17.14
The hue value also makes color relationships easier to plan. Complementary colors are 180 degrees apart, analogous colors are about 30 degrees apart, and triadic colors are 120 degrees apart. Keep one hue as the main color and use related hues as accents when more contrast is wanted. section 17.15
For transparent text or other colors, use hsla(), which adds an alpha channel after the HSL values. Alpha runs from 0.0 for fully transparent to 1.0 for fully opaque; use transparency carefully when readability matters. section 17.9
Try making a blue color and a white color with hsl(). Then keep the same hue and change only saturation or luminance to see exactly what each control contributes. section 17.8
