Colour Converter

Convert a colour between hexadecimal, RGB and HSL, and see which background it reads better on.

Hexadecimal

—

Sample text

Hexadecimal—

RGB—

HSL—

For CSS—

Relative luminance—

Contrast on white—

Contrast on black—

How this was worked out

The formula

each hexadecimal pair is one channel from 0 to 255

Where it comes from

Hexadecimal is nothing more than RGB written differently: two digits per channel, each from 0 to 255. HSL reorders the same information into hue, saturation and lightness, which is far more intuitive for making variations of a colour.

How to work it out by hand

Split the hexadecimal into three pairs of digits
Convert each pair to decimal: those are the RGB channels
For HSL, find the highest and lowest channel
The hue comes from the dominant channel and the lightness from the average of the two extremes

What is worth knowing

HSL is the practical format for designing a palette: holding the hue and varying the lightness gives lighter and darker versions of the same colour that still work together. In hexadecimal that operation is done blind.

Frequently asked questions

How do you convert a hexadecimal colour to RGB?

Split the six digits into three pairs and convert each from hexadecimal to decimal. #1f5fd6 is rgb(31, 95, 214).

What does HSL mean?

Hue, saturation and lightness. Hue is the colour in degrees from 0 to 360, saturation its intensity and lightness how much light it carries.

Why do web colours have six digits?

Because each channel takes a byte and a byte is written with two hexadecimal digits. Three channels, six digits.