StringMash.com

Hex to HSL converter

Hex colour codes to hsl(), with the working.

Conversion
7 characters
Updates as you type
Hex#3366CC
RGBrgb(51, 102, 204)
HSLhsl(220, 60%, 50%)
CMYKcmyk(75%, 50%, 0%, 20%)
Nearest CSS nameroyalblue
Contrast with white5.37:1 (AA)
Contrast with black3.91:1 (AA large text only)
The swatch and working are below

Show the steps
Aa blackAa white
  1. Split the code into pairs: 33 66 CC. Each pair is a number from 00 to FF, which is 0 to 255.
  2. Red: 33 = 3 × 16 + 3 = 51.
  3. Green: 66 = 6 × 16 + 6 = 102.
  4. Blue: CC = 12 × 16 + 12 = 204.
  5. Divide each channel by 255: red 0.2, green 0.4, blue 0.8. The largest is 0.8 and the smallest 0.2.
  6. Lightness is halfway between them: (0.8 + 0.2) ÷ 2 = 0.5, so 50%.
  7. Saturation is the spread divided by (1 − |2 × lightness − 1|): 0.6 ÷ 1, so 60%.
  8. Hue comes from which channel is largest, blue here, as an angle round the colour wheel: 220°.
  9. Contrast: 5.37:1 against white and 3.91:1 against black, so white text reads better on it.

Using the converter

Paste a hex code such as #3366CC and the HSL value appears, ready to copy into CSS as hsl(220, 60%, 50%).

Swap the boxes to go back. The rows below give RGB and CMYK as well, and the contrast with black and white text.

How hex becomes HSL

Turn the hex pairs into red, green and blue, then divide each by 255. Lightness is the average of the largest and smallest of the three. Saturation is how far apart they are, scaled by how close the lightness is to the middle, so very dark and very light colours can still be fully saturated.

Hue is an angle round the colour wheel, with red at 0°, green at 120° and blue at 240°. Which channel is largest decides the part of the wheel, and the other two decide how far round. #3366CC is mostly blue with some green, so it sits at 220°.

Why designers use HSL

HSL is easier to change by hand than hex. Keep the hue and saturation and lower the lightness for a darker shade of the same colour, or keep the lightness and turn the hue for a matching colour with the same weight.

Lightness in HSL isn't how bright a colour looks, though. Yellow and blue at 50% lightness look very different, which is why the contrast rows use a separate measure.

Questions

Why is the hue 0 for grey?

A grey has no hue, because red, green and blue are equal. CSS writes it as 0 by convention.

Does converting to HSL and back change the colour?

It can by one or two in a channel, because HSL is rounded to whole numbers.

Sources

Written, edited and reviewed by .

Added and reviewed . What's new