Using hsl for colours has already been mentioned but here is the full explanation. The hue is the distance around a full colour wheel (0 to 360).
The saturation is the amount of that colour:
- orange (hsl(30,100%,50%) is as much orange as possible
- orange (hsl(30,50%,50%) uses less orange so looks greyer and duller
- orange (hsl(30,0%,50%) uses no orange so is actually grey
The lightness (or luminescence) is how bright the colour is. This is achieved by adding equal amounts of the colours:
- orange (hsl(30,100%,50%) the same shade as before
- orange (hsl(30,100%,80%) a lighter version of the same shade
- orange (hsl(30,100%,20%) a darker version of the same shade
Using rgb might seem easier and gives the same results because hsl(0,100%,50%) is the same as rgb(75,31,31). However, in rgb could you easily guess what colour would contrast nicely with that one? In hsl you can as explained next.