How HEX, RGB and HSL relate
All three notations describe the same sRGB colour, which is why the converter can move between them without loss of meaning. A HEX code is just three bytes written in base 16: #3366FF splits into 33, 66 and FF, which are 51, 102 and 255 in decimal. A three-digit code such as #f60 is shorthand that doubles each digit, so it expands to #ff6600. RGB is the same three numbers in decimal, each from 0 to 255.
HSL is calculated from RGB. The channels are scaled to 0–1, then the converter finds the largest and smallest of them. Lightness is their average. Saturation is the gap between them divided by how far the lightness is from black or white. Hue is the angle on the colour wheel, worked out from whichever channel is largest, then multiplied by 360 and rounded. All three results are rounded to whole numbers, so HSL is shown as an integer approximation.
Worked example
For #3366ff the scaled channels are 0.2, 0.4 and 1.0. The largest is blue, the smallest is red, so lightness is (1.0 + 0.2) / 2 = 0.6, which is 60%. The gap is 0.8, and saturation is 0.8 / (2 − 1.2) = 100%. Because blue is largest, hue is (0.2 − 0.4) / 0.8 + 4 = 3.75 of 6 steps, which is 225 degrees. The converter reports hsl(225, 100%, 60%).
| HEX | RGB | HSL |
|---|---|---|
#ff0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
#3366ff | rgb(51, 102, 255) | hsl(225, 100%, 60%) |
#6366f1 (the starting colour) | rgb(99, 102, 241) | hsl(239, 84%, 67%) |
#808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
The grey row shows a quirk: when all three channels are equal there is no hue, so the tool reports 0 degrees and 0% saturation. Any hue would draw the same colour.
What this converter accepts and prints
- Input: the HEX box takes 3, 4, 6 or 8 digits (
#RGB,#RGBA,#RRGGBBor#RRGGBBAA), with or without the#. You can type digit by digit: the colour updates as soon as the digits form a valid value, and while the value is still incomplete the box stays as you typed it with a hint underneath. When you leave the box it reverts to the current colour. The RGB and HSL boxes are read-only; change the colour with the picker, the HEX box or the three R, G and B sliders. - Output: lowercase six-digit HEX,
rgb(r, g, b)with comma separators, andhsl(h, s%, l%). Each has a copy button. - No transparency: there is no alpha channel. If you enter a 4 or 8 digit code, the alpha digits are read but ignored and the colour is shown fully opaque. Add opacity by hand, for example
rgb(51 102 255 / 0.5)in modern CSS.
Choosing a format
HEX is the compact form for design hand-offs. RGB suits canvas and image code. HSL is easiest to adjust: nudge lightness by 10% for a hover state, or keep the hue and drop saturation for a muted variant. Remember that HSL lightness is not perceived brightness, so a yellow and a blue at the same L value look very different. To check whether text on a colour is readable, use the contrast checker. To build a matching set of colours, try the colour palette generator or the CSS gradient generator.