Color Code Converter

Instantly convert HEX to RGB, HSL and view color previews.

Turn one color value into HEX, RGB and HSL

Design tools, stylesheets and brand guides rarely use the same color format. A designer hands you a HEX code, a chart library wants rgb(), and a theme file expects hsl(). This converter takes a single color and returns all three formats together, alongside a large swatch so you can confirm you have the color you meant.

Converting a color

Type or paste a color into the Input Data box. HEX (such as #3b82f6), rgb() values and other CSS color notation can be entered, and so can color names like tomato.
Click Sample to load #3b82f6 if you want an example, or Clear to reset.
Press Process Now.
Read the swatch and the table with the HEX, RGB and HSL values. Each value is set to select in one click.
Use Copy to copy the results as text, or Download to save them as result.txt.

How it interprets your input

The tool does not use its own list of formats. It hands your text to the browser as a CSS color, reads back the resulting RGB channels, and calculates HEX and HSL from those. That means anything your browser understands as a CSS color works, including the 140-odd standard color names, and results are consistent with what the page would show in a real stylesheet. HEX output is always uppercase and six digits, and HSL is rounded to whole degrees and percentages.

When you might use it

Translating a brand HEX code into rgb() for a canvas or chart configuration.
Finding the HSL form of a color so you can build lighter and darker shades by changing only the lightness.
Finding out what hex code hides behind a named color in old CSS.
Checking a color from a screenshot or mockup against a value in code.

Edge cases

The output has no alpha channel, so a semi-transparent value like rgba(255, 0, 0, 0.5) will be reported as its solid color. There is no CMYK, HWB or Lab output either; the tool covers HEX, RGB and HSL only.

Because the browser does the parsing, a value it cannot recognise may not always produce the red error message. Instead you can end up with the page's default text color. If a result looks like plain black when you expected something else, check the input for typos and compare it with the swatch. Rounding in HSL means converting back and forth between formats can shift a channel by one step.

Related Tools

Frequently Asked Questions

Which color formats can I paste in?

Any notation the browser understands as a CSS color: 6- or 3-digit HEX with a hash, rgb() and hsl() functions, and named colors such as navy or salmon. The results are always shown as HEX, RGB and HSL.

Does it support transparency or alpha values?

No. The output lists only red, green and blue channels, so an rgba() input is shown as its solid color and the alpha value is not reported. Keep the original opacity value with you if you need it.

Why did I get black instead of an error?

The tool relies on the browser to parse the input. An unrecognised value can leave the browser's default text color, which looks like black, and no error appears. Check for typos and always compare the swatch with the color you expected.

Is the HEX result uppercase or lowercase?

It is uppercase with six digits, for example #3B82F6. CSS accepts either case, so you can paste it directly into a stylesheet or lowercase it if your project's linting style prefers that.

Can I convert a whole list of colors at once?

The tool converts one color per run. It reads the entire box as a single value, so pasting several colors together will not work. Enter one, click Process Now, copy the result, then repeat for the next color.