Color Converter
Convert colors between HEX, RGB, HSL and OKLCH with live preview
About this tool
Enter a color in any common notation — #hex, rgb(), hsl(), or a CSS named color — and get all formats at once: HEX, RGB, HSL and OKLCH, next to a live swatch. Alpha channels are preserved across formats, and output uses modern CSS syntax (space-separated channels) that pastes cleanly into current stylesheets.
OKLCH is included because it is where CSS color is heading: unlike HSL, its lightness axis is perceptually uniform, so two colors with the same L actually look equally bright, and adjusting hue does not accidentally change perceived brightness. Converting an existing palette to OKLCH is the first step to building consistent color scales.
Conversion math runs locally using the published sRGB↔OKLab transforms, and values round-trip: the RGB you get back from an HSL input is exactly what the browser would compute.
Frequently asked questions
- Why do HSL and OKLCH lightness values disagree?
- HSL lightness is a geometric property of RGB values, not of human vision — hsl(60 100% 50%) yellow looks far brighter than hsl(240 100% 50%) blue despite identical L. OKLCH's L axis is designed to match perception, so equal L means equal apparent brightness. The disagreement is the entire reason OKLCH exists.
- What does the alpha value mean and where does it go in each format?
- Alpha is opacity, 0 (transparent) to 1 (opaque). In 8-digit hex it is the final byte (#RRGGBBAA); in modern functional syntax it follows a slash: rgb(76 141 255 / 0.5). This converter carries alpha through every format automatically.
- Can every OKLCH color be shown in sRGB?
- No — OKLCH covers wide gamuts, and some chroma/lightness combinations have no sRGB equivalent. Converting from sRGB (as this tool does) always stays representable; going the other way, out-of-gamut colors must be clipped or mapped, which is why a vivid P3 green looks duller on an sRGB screen.
- Why space-separated rgb(76 141 255) instead of commas?
- CSS Color Module Level 4 standardized space-separated channels with an optional /alpha, and every modern browser supports it. The comma form still works, but the space form is what new specs (and this tool) use.