Color converter
freeConvert colors between HEX, RGB, HSL, OKLCH, HSB with live preview.
Paste any colorHEX · RGB · HSL · OKLCH · CMYK · LAB · LCH · or a CSS name
#509BE6
α 100%
Last 5 this session · click to restore
Aa
The quick brown fox
Small body text · 12px
Convert colours between every common format: HEX, RGB, HSL, HSB, OKLCH, OKLab, and named CSS colours. Live preview shows the colour itself plus accessibility metadata: contrast against black and white, WCAG ratings, and a perceptual lightness scale. Round-trip accuracy is preserved by working in OKLab internally where the colour space supports it.
Common use cases
- Building a design token system. Drop a brand HEX, get the OKLCH equivalent for use in Tailwind v4's @theme directive. The perceptual colour space gives you smoother gradient interpolation than HSL.
- Verifying accessibility contrast. Check whether your text + background pair meets WCAG AA (4.5:1) or AAA (7:1). The ratio updates as you tweak either colour, so you can find the closest passing variant.
- Translating between design tool formats. Figma uses HEX, CSS uses HSL / OKLCH, design specs use RGB — the converter handles the round-tripping without precision drift.
- Generating dark-mode pairs. Use the inverted-lightness view to see what your colour looks like flipped for dark mode. Useful when designing palettes that need to read correctly in both themes.
Frequently asked
What's OKLCH and why use it?
OKLCH is a perceptual colour space designed to match human vision. Interpolating between two OKLCH colours produces visually smooth gradients, unlike HSL which can pass through muddy mid-tones. Tailwind v4, the latest CSS specs, and most modern design tools support it natively.
Why do RGB → HSL conversions lose precision?
HSL has fewer representable values than RGB at the edges (very dark / very light). The converter uses high-precision math internally and only rounds for display.
What's the difference between HSL and HSB?
HSL: Hue, Saturation, Lightness — `hsl(0, 100%, 50%)` is pure red. HSB (a.k.a. HSV): Hue, Saturation, Brightness — `hsv(0, 100%, 100%)` is pure red. They have the same H but different S/L vs S/B semantics.
Why is the WCAG ratio just a number?
The ratio is the relative luminance ratio between two colours, ranging from 1 (no contrast) to 21 (pure black on pure white). WCAG AA requires 4.5:1 for body text, 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.
Can I sample a colour from an image?
Use the system colour picker (eyedropper icon when available in supporting browsers) to sample any pixel on screen. Otherwise paste a HEX directly.
Does it support P3 / wide-gamut colours?
Yes — OKLCH and OKLab can describe colours outside the sRGB gamut. The preview swatch shows a clipped sRGB version when your screen can't render the wider gamut, with a hint that the colour exceeds sRGB.