Color Converter (HEX, RGB, HSL)
Convert colors between HEX, RGB, HSL and OKLCH.
Type a color in any format (HEX, RGB, HSL, or OKLCH) and the others update live. Perfect for design tokens, CSS variables, and brand kits.
rgb(10 124 255)
hsl(212 100% 52%)
oklch(0.608 0.215 257.4)
Best contrast vs
black text → ratio 5.34:1 (WCAG AA needs 4.5:1)
How to use it
Type a colour in any format
Drop a HEX, rgb(), hsl() or oklch() value into the matching field. Every other field updates live.
Adjust channels directly
Tweak individual R/G/B sliders or HSL components to dial in a shade.
Copy the format you need
Use the copy button next to the format your destination expects.
What is it?
A color converter translates between the formats CSS, design tools and image editors all use slightly differently. HEX (#0a7cff) is the legacy shorthand for an RGB triplet. RGB describes a colour in red/green/blue intensities. HSL (hue, saturation, lightness) is friendlier for tweaking shades. OKLCH is the new perceptually-uniform model in CSS Color Level 4 - adjusting lightness or chroma doesn't accidentally shift the hue the way HSL does.
When to use it
Whenever a colour value needs to move between contexts: copying a brand colour from a logo SVG (HEX) into a CSS variable system (often HSL or OKLCH), translating a screenshot pixel value (RGB) into a design token, or generating accessible variants of a base colour. Also helpful when checking contrast against WCAG thresholds.
Common mistakes
Don't assume HSL lightness is perceptual - it isn't. hsl(60 100% 50%) (yellow) and hsl(240 100% 50%) (blue) have the same lightness number but look wildly different in luminance; OKLCH fixes this. And don't lose precision by truncating HEX channels mid-conversion: round once at the end.
FAQ
- Why OKLCH?
- OKLCH is the new CSS Color Level 4 format. Unlike HSL it's perceptually uniform, which means adjusting lightness or chroma doesn't accidentally shift the hue.