Color Palette
About the Color Converter
This tool converts a colour between the formats you use in design and code — HEX (#4c6ef5), RGB (rgb(76,110,245)) and HSL (hsl(228,89%,63%)). Each describes the same colour in a different way, and different tools expect different formats.
Enter a colour in any format and see it in the others instantly, with a live preview, all in your browser. HSL is especially handy for tweaking a colour by hue, saturation or lightness.
How to use the Color Converter
- 1Enter a colour as HEX, RGB, or HSL (or pick one).
- 2See the equivalent values in the other formats and a live swatch.
- 3Copy the format your CSS or design tool needs.
Common uses
CSS & theming
Get the exact HEX/RGB/HSL a stylesheet or design token expects.
Adjusting shades
Use HSL to nudge lightness/saturation for hover and active states.
Matching brand colours
Translate a brand HEX into RGB for other software.
Frequently asked questions
What's the benefit of HSL over HEX?
HSL describes hue, saturation and lightness separately, so it's intuitive to make a colour lighter or less saturated — much harder to do by eye in HEX.
Do the formats describe the same colours?
HEX and RGB are equivalent (both sRGB). HSL is a different representation of the same sRGB colours, so conversions are exact aside from rounding.
Can I convert a colour with transparency?
Alpha is expressed as RGBA/HSLA or an 8-digit HEX. This tool focuses on the opaque HEX/RGB/HSL trio.
Is anything uploaded?
No. Conversion runs entirely in your browser.