Color Converter

About Color Converter

Paste a color in HEX, RGB or HSL and the tool detects the format and shows all three. It accepts three-digit shorthand like #fff, the modern space-separated CSS syntax rgb(255 0 0), and even a bare 255, 128, 0. Values with an alpha channel (#rrggbbaa) are accepted, but the alpha is dropped and only the color is converted.

All three formats describe the same sRGB color space. HEX and RGB carry exactly the same information; HSL rearranges that RGB into an angle on the color wheel, a saturation and a lightness. The math is simple. What trips designers up is that HSL's lightness is not the brightness people actually see.

50% lightness in HSL is not equal brightness

Yellow #ffff00 is hsl(60, 100%, 50%); blue #0000ff is hsl(240, 100%, 50%). Same L, yet on screen the yellow is glaring and the blue is dark. HSL's L is just the average of the largest and smallest channel, so it ignores the fact that human vision is most sensitive to green and least sensitive to blue.

The relative luminance WCAG uses for contrast ratios weights linearized R, G and B by 0.2126, 0.7152 and 0.0722. By that measure yellow is about 0.93 and blue about 0.07. If you build a set of button colors by keeping L fixed and rotating the hue, white text will be readable on some and unreadable on others for exactly this reason.

How HSV and OKLCH differ

This tool handles HEX, RGB and HSL only. HSV (also called HSB), common in graphics-app color pickers, shares HSL's hue angle but defines its brightness axis as the largest channel value. So pure red is L 50% in HSL but V 100% in HSV. The saturation value also uses a different formula in each model, so an S of 100% does not mean the same thing.

OKLCH is the cylindrical form (lightness L, chroma C, hue H) of Oklab, a color space published by Björn Ottosson in 2020 and adopted into CSS Color Level 4 as the oklch() function. Its L is designed to track perceived lightness: yellow comes out near 97%, blue near 45%. Keep L fixed and rotate H, and the colors stay roughly equally bright, which is the main thing HSL cannot do. This tool does not convert to OKLCH.

The sRGB gamut and what HEX cannot express

HEX and 0–255 rgb() values can only describe colors inside the sRGB space (IEC 61966-2-1). Many current phones and laptops can display the wider Display P3 gamut, and the most saturated greens and reds there have no HEX equivalent. In CSS you need color(display-p3 …) or oklch() to reach them.

Each channel has 8 bits, so 256 steps. If HSL were rounded to whole numbers, HEX → HSL → HEX would not always return the original value, so this tool shows HSL to one decimal place. Checked against all 16.7 million sRGB colours, one decimal is enough for every one of them to come back to the same HEX. HSL written as whole numbers elsewhere has already been rounded, so it can still land a channel one step away.

Practical uses of HSL anyway

HSL is still handy for quick adjustments: lowering S desaturates toward gray, raising L moves toward white. It is fine for hover states and tints of a single hue. It is the wrong tool for building a multi-hue palette with consistent contrast, where you should check contrast ratios directly or work in OKLCH.

Worked examples

How to use it

1. Paste a HEX, rgb() or hsl() value as you have it.
2. Check the three converted values and the preview swatch.
3. Copy the format you need.

Frequently asked questions

Related guides

• Color Contrast and Accessibility: Where the WCAG Formula Comes From, Its Limits, and the Law