🎨 Color Converter
Convert any color between HEX, RGB, HSL, and OKLCH. Live preview, instant copy, and named-color lookup — runs entirely in your browser.
Closest named color —
Recent
HEX
RGB
R · 0-255
G · 0-255
B · 0-255
HSL
H · 0-360
S · 0-100%
L · 0-100%
OKLCH
OKLCH gives perceptually-uniform lightness — great for accessible color palettes (used by Tailwind v4, Radix, etc.).
HEX, RGB, HSL, OKLCH — which should you use?
Every color you see on screen can be described in multiple equivalent formats. Each has different strengths:
- HEX (
#6366f1) — Compact and universal. Used everywhere in CSS, design tools, and brand guidelines. Easy to copy/paste but not human-readable for adjustments. - RGB (
rgb(99, 102, 241)) — Direct red/green/blue channel values. Useful when generating colors programmatically or when you need an alpha channel (rgba). - HSL (
hsl(239, 84%, 67%)) — Hue, saturation, lightness. Much easier to tweak by hand: change hue to shift color, change lightness for darker/lighter variants. - OKLCH (
oklch(0.59 0.21 280)) — Perceptually uniform color space. Equal lightness numbers actually look equally bright (unlike HSL). Modern design systems (Tailwind v4, Radix Colors) standardize on OKLCH for predictable contrast and palette generation.
How to use this color converter
- Type in any field — change HEX, RGB, HSL, or OKLCH and all other formats update instantly.
- Drag a slider — adjust individual channels (R, G, B, H, S, L) with live preview.
- Click the swatch — copies the current HEX value to your clipboard.
- Use the eyedropper — pick any color from your screen (Chrome and Edge only — uses the native EyeDropper API).
- Recent palette — every color you preview is saved locally so you can revisit it during the session.
Frequently Asked Questions
Does this tool support alpha / transparency?
Not yet — v1 handles opaque colors only. Alpha (RGBA, HSLA, OKLCH with alpha) is on the roadmap.
Why doesn't HSL → OKLCH give round numbers?
HSL and OKLCH are fundamentally different color models. HSL is a simple geometric rearrangement of RGB; OKLCH is built on the OKLab perceptual color space. The conversion goes through RGB and then linear-light XYZ, so you get decimal values. The numbers may look messy but the color is exactly the same.
Why does the named color sometimes say "—"?
It picks the closest match from the 147 CSS named colors. If your color is far from any of them (which is most colors), the closest match isn't useful, so we show "—" rather than mislead you.
Is the eyedropper available in all browsers?
No — the native EyeDropper API is currently Chrome/Edge only. The button is disabled in browsers that don't support it (Firefox, Safari).