Color Converter

The formats and what each is good for

HEX is compact and universally supported, which is why it dominates design handoff, but the digits carry no intuition: you cannot look at #3A7BD5 and know how to make it slightly lighter. RGB is the same information in decimal and shares that weakness. HSL separates hue, saturation and lightness, so adjusting one aspect is a single-number change, which is why it is the practical choice for generating variants in CSS.

HSL lies about lightness

This is the important limitation. HSL lightness is a mathematical midpoint, not perceived brightness. Yellow at 50 percent lightness looks far brighter than blue at 50 percent lightness, because human vision is much more sensitive to green wavelengths. A palette built by holding HSL lightness constant will not look evenly weighted, and text contrast derived from HSL values will be inconsistent.

OKLCH fixes that

OKLCH is a perceptually uniform space, now supported in all major browsers. Its lightness axis corresponds to perceived brightness, so two colours with the same L value genuinely look equally bright regardless of hue. This makes it the right space for generating accessible palettes and for interpolating gradients, since an OKLCH gradient does not pass through the muddy desaturated middle that RGB interpolation produces. It also reaches colours outside sRGB on wide-gamut displays.

Contrast is not about the format

WCAG requires 4.5:1 contrast for normal text and 3:1 for large text and interface components. That ratio is computed from relative luminance, which weights the channels unevenly and is unrelated to which notation you wrote the colour in. Converting HEX to HSL does not change contrast; only changing the colour does.

Alpha

All the formats support transparency: eight-digit HEX, rgb() and hsl() with a slash-separated alpha in modern CSS syntax, and the same in oklch(). Note that a semi-transparent colour has no fixed contrast ratio, since the result depends on whatever sits behind it. Test against the actual background rather than assuming.