What we did
October 2025 : This month we looked at the various ways we can discribe colour in CSS.
We looked at this article from "A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH" By Michelle Barker Smashing Magazine 21 November 21
First we have a simple colour name. In this case "red"
.red {background-color: red;}
Colour RED
Second we have the HEX defintion
.hex {background-color: #ff0000;}
Colour RED
Then we have the RGB (red,green,blue)
.rgb {background-color: rgb(255, 0, 0);}
colour RED
Then we have the HSL (hue, saturation, lightness)
.hsl {background-color: hsl( background-color: hsl(0deg, 100%, 50%); // medium red}
colour RED
Then we have the HWB (hue, whiteness and blackness)
.hwb { background: hwb(360 0% 0%);}
colour RED
Then there is LAB. To quote "LAB is a color space that can be accessed in software like Photoshop and is recommended if you want a color to look the same on-screen as, say, printed on a t-shirt."
It uses three axes: lightness, followed by the a-axis (green to red) and b-axis (blue to yellow).
.lab {lab(80% 100 50); // reddish pink}
colour RED
Then we have the LCH (lightness, chroma, and hue)
.lch { background-color: lch(53% 131 45)}
colour RED
The article has a link to a LCH colour picker.
Steve South
Web Design leader