1. Ditch hex for HSL

Using hex or RGB, colors that have a lot in common visually look nothing alike in code.

HSL fixes this by representing colors using attributes the human-eye intuitively perceives: hue, saturation, and lightness.

Hue is measured in degrees, where 0° is red, 120° is green, and 240° is blue.

Saturation is how colorful or vivid a color looks. 0% saturation is grey (no color), and 100% saturation is vibrant and intense.

Lightness measures how close a color is to black or to white.

The Chrome DevTools colour picker supports HSL, shows contrast ratio.

2. Greys don't have to be grey

True grey has a saturation of 0% — it doesn’t have any actual color in it at all.

But in practice, a lot of the colors that we think of as grey are actually saturated quite heavily.

If you want your greys to feel cool, saturate them with a bit of blue:

To give your greys a warmer feel, saturate them with a bit of yellow or orange:

3. Don't rely on colour alone

Use other visual cues to communicate important information to the user.