Colour Converter - HEX, RGB, HSL
Enter a colour in HEX, RGB, or HSL and see it instantly converted to the other two formats, with a live swatch preview.
Maintained by Hirantha Sandaruwan Lakshan. Updated 31 July 2026.
How it works
HEX and RGB both describe a colour as red, green, and blue intensities - HEX just encodes each channel as two hexadecimal digits instead of a base-10 number.
HSL describes the same colour differently, as hue (a position on the colour wheel), saturation, and lightness - often easier to reason about when you want a lighter, darker, or more muted version of a colour.
All three formats are mathematically equivalent descriptions of the same colour, so converting between them is lossless - nothing is approximated or rounded away.
Worked examples
Converting a design tool's HEX value for CSS
Paste a HEX code copied from a design tool to get the equivalent RGB or HSL value for a stylesheet that uses a different format.
Adjusting lightness without changing the hue
Convert a colour to HSL, then edit just the lightness value to get a lighter or darker version of the same base colour.
Checking what a colour looks like before using it
Type in any value and see the live swatch update, useful for previewing a colour without opening a design tool.
Frequently asked questions
Is my input sent anywhere?
No, all conversion happens entirely in your browser tab.
Does this support alpha transparency?
Yes - an optional alpha value is supported and carried across HEX (8-digit), RGB, and HSL formats.
Why do RGB and HSL values look so different for the same colour?
They describe colour along different axes - RGB by channel intensity, HSL by hue, saturation, and lightness - so the numbers don't resemble each other even though the colour is identical.
Can I paste a named CSS colour like 'rebeccapurple'?
Not currently - only HEX, RGB, and HSL input formats are supported.
What is the difference between HSL and HSB/HSV?
Both use hue and saturation, but HSL's third value is lightness (50% is the pure colour) while HSB's is brightness (100% is the pure colour). Design tools tend to use HSB, CSS uses HSL.
How do I pick an accessible text colour?
Contrast between text and background is what matters, and it needs a ratio of at least 4.5:1 for normal body text. Adjusting lightness in HSL is the easiest way to reach it while keeping the hue.
What does the alpha value mean?
Opacity, from 0 (fully transparent) to 1 (fully opaque). An alpha of 0.5 lets half the background show through.
Can I convert to CMYK for printing?
No. CMYK conversion depends on the specific printer, ink, and paper profile, so any value produced without that profile would be misleading rather than useful.
Sources & references
Updated Jul 31, 2026