Color Converter
Convert colours between HEX, RGB and HSL with a live preview swatch.
- HEX
- —
- RGB
- —
- HSL
- —
HEX, RGB and HSL
The same colour can be written three common ways on the web. HEX like
#3b82f6 is compact and used in CSS. RGB lists red, green and blue from 0
to 255. HSL describes hue, saturation and lightness, which is often the most intuitive
model when you want to lighten, darken or shift a colour.
How the conversion works
Enter a HEX value (three or six digits) or an rgb(r, g, b) string and the tool parses
it to red/green/blue, then computes the HSL equivalent with the standard formula. A live swatch shows
the result, and the native colour picker stays in sync so you can nudge the value visually.
How to use the Color Converter
- Enter a colour. Type a HEX value or an rgb(r, g, b) string.
- Or use the picker. Pick a colour visually to fill the field.
- Read all three formats. See HEX, RGB and HSL update together.
- Check the swatch. Confirm the live preview matches what you want.
Frequently asked questions
What input formats are accepted?
Three-digit HEX (#abc), six-digit HEX (#aabbcc) with or without the hash, and rgb(r, g, b) where each channel is 0 to 255.
How is HSL calculated?
The RGB channels are normalised to 0-1 and converted with the standard hue, saturation and lightness formula, then rounded to whole numbers.
Does it support alpha or opacity?
This converter focuses on solid colours. An rgba() value is accepted but the alpha channel is ignored in the output.
Is my colour data sent anywhere?
No. All parsing and maths run locally in your browser.