Convert colours between HEX, RGB, and HSL
#e85d3drgb(232, 93, 61)hsl(11, 79%, 57%)
Paste a colour as HEX (#E85D3D) or RGB (rgb(232, 93, 61)) and instantly see it converted to all three common formats — HEX, RGB, and HSL — with a live colour swatch. Everything runs in your browser; nothing you enter is sent anywhere.
Three ways of describing the same colour
HEX and RGB are the same thing in different notation — both specify red, green, and blue channel intensities, one in hexadecimal and one in decimal. HSL is genuinely different: it describes hue as a position on the colour wheel, saturation as intensity, and lightness as brightness. That makes HSL far easier to reason about when adjusting a colour, because darkening something means lowering one number rather than recalculating three.
Why HSL is useful for design systems
Building a consistent palette is much simpler in HSL. Keep hue and saturation fixed and vary lightness and you get a coherent set of tints and shades of the same colour. Try that in HEX and you are guessing at three values at once. This is why most modern design token systems express colours in HSL even when the final CSS output is hex.
Shorthand hex
Three-digit hex like #f00 is shorthand where each digit is doubled, so #f00 expands to #ff0000. It only works when all three channels have matching digit pairs, which is why most colours cannot be written short. This tool accepts both forms and always outputs the full six-digit version, since that is unambiguous and works everywhere.
Frequently asked questions
- What input formats are accepted?
- 3 or 6-digit HEX (with or without #) and rgb()/rgba() strings.
- Does this support HSL input?
- Not yet as input — HSL is available as an output format only.
- Is my data sent anywhere?
- No, conversion happens locally in your browser using JavaScript. Nothing is transmitted.
- Can I enter an HSL value?
- Not as input currently — HEX and RGB are accepted, and HSL is provided as output. HSL input would be a reasonable addition.
- What about alpha and transparency?
- Alpha is not handled. An rgba() value will have its alpha ignored and the RGB channels converted.