Color Converter
Convert colors between hex, rgb(a) and hsl(a), with a live swatch, locally.
Convert between hex, rgb() and hsl() with a live swatch
This tool parses a color written as hex (#rgb, #rgba, #rrggbb or #rrggbbaa), rgb()/rgba(), or hsl()/hsla(), and shows the equivalent in all three notations plus a swatch to check it visually. It's useful when a design file gives you an HSL value but your CSS needs hex, or when you're reading rgba() out of computed styles and want the hex equivalent. Parsing and conversion happen locally as you type; nothing is sent anywhere.
How to use the Color Converter
- Type or paste a color in any supported format into the input field.
- Watch the swatch update to preview the parsed color.
- Read the equivalent hex, rgb() and hsl() values in the output panel.
- Copy whichever notation you need with the copy button next to it.
Alpha is supported throughout: an 8-digit hex, an rgba() alpha channel, or an hsla() alpha channel all carry through to the other two formats, and the output switches to the rgba()/hsla() form automatically once alpha is below 1.
Percentage channel values in rgb() (like rgb(50%, 0%, 100%)) are accepted, as is the modern space-separated rgb() syntax with a slash before alpha.
Frequently asked questions
- What color formats can I paste in?
- Hex in 3, 4, 6 or 8 digit form, rgb()/rgba() with either commas or spaces, and hsl()/hsla(), all with or without a leading #, and with percentage or numeric channels.
- Does it support colors with transparency?
- Yes. An 8-digit hex, rgba() alpha, or hsla() alpha all convert correctly, and the hex and rgb/hsl outputs include the alpha channel once it's below 1.
- Is the color value sent to a server to convert it?
- No, parsing and math run in plain JavaScript in your browser, so the color string you type never leaves the page.
- Why does my input show an error instead of converting?
- The parser only recognizes hex, rgb()/rgba() and hsl()/hsla() syntax; named colors like "red" or unsupported formats like CMYK will throw an "unrecognized color" error.