Color Converter

About this tool

Type or paste a HEX color code to see its RGB and HSL equivalents and a live preview swatch. Useful when a design file, a CSS snippet, and a graphics tool each want the color in a different notation.

What each notation means. All three describe the same color; they differ in how they slice it up.

• HEX — #RRGGBB, two hexadecimal digits (00–FF, i.e. 0–255) each for red, green, and blue. Compact and the default in CSS and design tools.
• RGB — the same three 0–255 channel values written in decimal: rgb(15, 118, 110). Easier to reason about numerically.
• HSL — hue (0–360° around a color wheel), saturation (0–100%), lightness (0–100%): hsl(174, 77%, 26%). Best when you want to nudge a color — bump the lightness, drop the saturation — without hunting for new channel values.

Worked example. #0F766E splits into 0F, 76, 6E hex = 15, 118, 110 decimal, which is rgb(15, 118, 110). Converting that to HSL gives roughly hsl(174, 77%, 26%) — a dark, fairly saturated teal.

Shorthand HEX. A 3-digit code like #0FE is expanded by doubling each digit: #00FFEE. It can only represent colors where both digits of each channel match, so most colors need the full 6 digits.

Rounding. HEX/RGB is a whole-number grid of about 16.7 million colors. HSL is continuous, so converting HEX → HSL → HEX can land one step away from where you started. The visible difference is usually none, but don't treat a round-trip as guaranteed identical.

Alpha and other spaces. This tool covers opaque sRGB colors. Transparency (#RRGGBBAA or rgba()) and wide-gamut spaces like oklch() or display-p3 are separate topics.

To check whether two colors have enough contrast for readable text, use the color contrast checker. To build a set of related colors, see the color palette generator, and for CSS gradients the CSS gradient generator.

Frequently asked questions

Does it accept 3-digit HEX codes?

Yes. Shorthand like #0FE is expanded to its 6-digit form (#00FFEE) by doubling each digit.

What if I type an invalid code?

The swatch and conversions only update once the HEX value is valid. An incomplete or malformed entry shows a hint rather than a wrong color.

Why does a HEX to HSL and back conversion sometimes change the code?

HSL is continuous while HEX is a fixed grid of integer values, so rounding on the way back can shift the result by one step per channel. The color looks the same.

Which format should I use in CSS?

Any of them work. HEX is most common; HSL is handy when you want to tweak lightness or saturation directly. Modern CSS also supports oklch() for more perceptually even adjustments.

Does it handle transparency?

No. It converts opaque sRGB colors. For an alpha channel you'd use #RRGGBBAA or rgba() notation directly.

Do I need the leading "#"?

It's accepted with or without. The output RGB and HSL strings are formatted ready to paste into CSS.