Color Code Converter

Convert between HEX, RGB, and HSL color formats with auto-detection and a live preview.

Client-side

About this tool

The Color Code Converter auto-detects whichever color format you paste in — HEX (#RRGGBB or the #RGB shorthand), rgb(r, g, b), or hsl(h, s%, l%) — and immediately shows the same color in all three formats, plus a matching CSS named color when there's an exact match against a curated list of common names.

HEX and RGB describe color as red/green/blue channel intensities. HSL (hue, saturation, lightness) describes the same color perceptually, which makes it far easier to reason about programmatically: "make this 10% darker" is a trivial HSL edit but an awkward RGB one. This tool implements the standard HSL↔RGB math directly, so you can go from a HEX value pulled off a live site straight to the HSL numbers you'd tweak in a CSS custom property.

Alongside the text input, a native browser color picker lets you pick a color visually and see it converted the same way. A live swatch shows the resolved color, and each output format has its own copy button.

FAQ

What color formats does this tool support?

Input: HEX (#RGB or #RRGGBB), rgb()/rgba(), hsl()/hsla(), and a curated set of ~30 common CSS named colors. Output: HEX, RGB, and HSL are always shown together, plus a matching named color when there is an exact match.

Does it support HSB/HSV?

Not currently. HSL, RGB, and HEX cover the vast majority of day-to-day CSS and design-tool workflows.

How does auto-detection work?

The input string is matched against a set of patterns in order: hex, then rgb()/rgba(), then hsl()/hsla(), then a named-color lookup. Whichever pattern matches first determines the detected format.

Why does the named color field sometimes show nothing?

The named-color list is intentionally small, not the full CSS specification. If your color does not land on an exact match, no name is shown — HEX/RGB/HSL remain accurate regardless.

Can I use the color picker and the text field together?

Yes. Picking a color with the native picker updates the text field with the resulting HEX value, and typing a valid color string updates the picker to match.