Color Converter
Convert colors between HEX, RGB and HSL, with a live preview.
Design tools and code speak different colour languages — HEX in CSS, RGB in some editors, HSL when you want to tweak lightness. Color Converter translates a colour between HEX, RGB and HSL with a live preview, so you always have the format you need.
How to use color converter
- 1. Enter a colour in HEX, RGB or HSL.
- 2. See it converted to the other formats with a live swatch.
- 3. Copy the value you need.
When to use Color Converter
Match a colour across tools
Convert a HEX from a design into the RGB or HSL a different tool expects.
Fine-tune with HSL
Switch to HSL to adjust hue, saturation or lightness intuitively.
Read a colour value
See a swatch of a colour code to confirm it's what you expect.
What you can type
HEX in short or long form (#f70, #ff7700, with or without the #), rgb() and hsl() with commas or spaces, or pick a colour with the swatch. Colour names such as "red" aren't recognised — use #ff0000. Each result has its own Copy button.
Why a round trip can shift by one
HSL values are rounded to whole degrees and percentages, so converting rgb(242, 114, 0) to HSL gives hsl(28, 100%, 47%), and that HSL converted back gives rgb(240, 112, 0). The difference can't be seen, but if you need an exact match in code, copy the HEX or RGB value rather than the HSL one.
Frequently asked questions
Which formats does it convert between?
HEX, RGB and HSL, in any direction, with a live preview of the colour.
Does it support transparency?
Yes. #rgba, #rrggbbaa, rgba(), hsla() and the modern rgb(242 114 0 / 50%) form are all understood, and the transparency is carried over into every format.
Is my input uploaded?
No — conversion happens in your browser.