rgb(128 128 128)
A common task in web design is generating brighter and darker shades of a colour, for example to render a button in a hover state, or bright text on a dark background.
We achieve this by moving the colour closer to white or black in some form or another; but it turns out it’s not easy to do this in RGB, and really hard to do it well.
Even if I tell you which colour the darker shade is, the process of getting there is not straightforward.
It sure would be nice to have a single “luminance” slider that takes a colour and makes it lighter or darker.
If we tip the RGB cube on its side such that the black corner is on the bottom and the white corner is on the top, colours will be roughly sorted by “lightness”.
If we then morph the cube into a cylinder with some clever maths, we can define a colour space called HSL, which mirrors more closely how we tend to think about colour. We get three new numbers to index into the space:
HSL and its brother HSV have been around since the 1970s, and are both attempts to make a colour space that is more intuitive than RGB. They are widely used in design software, and are the basis for many colour pickers on the web, so it’s fair to say that they have been successful in that regard.
A big plus of HSL is that it is easy to transform back to RGB, and RGB is the ground truth for what your screen will actually display.
However, HSL’s lightness slider is deceiving.
In particular, we’d assume that two colours with the same lightness would appear equally bright on your screen, but this is clearly not the case in HSL!
This is bad, because brightness often signifies importance in a design, and with no good way to make colours appear equally bright, we are left with a design that may end up inconsistent and confusing. And without having detailed knowledge of colour science, it is hard to know how to fix it.