Color converter

How it works

A hex code is three pairs of hexadecimal digits, one each for red, green and blue, with each channel running from 00 to ff — that is 0 to 255 in decimal. The three-digit form expands by doubling each digit, so #f00 becomes #ff0000. HSL re-expresses the same colour as hue in degrees from 0 to 360, saturation from 0 to 100% and lightness from 0 to 100%. Lightness is the midpoint of the brightest and darkest channels divided by 255, saturation comes from how far apart those two channels are, and the hue follows which channel is highest. The swatch is a background colour set in the page — no image is loaded, and nothing is requested from anywhere.

Worked example

#1e90ff is rgb(30, 144, 255), because 1e is 30, 90 is 144 and ff is 255. The lightest channel is 255 and the darkest is 30, so the lightness is (255 + 30) ÷ 2 ÷ 255 = 56%. Blue is the highest channel, which puts the hue at 210°, and with the channels far apart the saturation is 100%, giving hsl(210, 100%, 56%). The shorthand #f00 expands to #ff0000: rgb(255, 0, 0) and hsl(0, 100%, 50%).

Questions and answers