Color Converter
Convert colors between HEX, RGB, HSL, OKLCH, and LAB. Live swatch preview, EyeDropper API, and WCAG contrast checker. All in your browser, no upload.
#3b82f6
rgb(59, 130, 246)
| HEX | #3b82f6 |
| RGB | rgb(59, 130, 246) |
| HSL | hsl(217.22, 91.22%, 59.8%) |
| OKLCH | oklch(0.623 0.188 259.8) |
| LAB | lab(54.62 8.76 -65.79) |
R
59
G
130
B
246
H
217°
S
91%
L
60%
Supported color formats
- HEX —
#rrggbbor#rgb. Most common format for web design. - RGB —
rgb(255, 0, 0). Red, green, blue channels 0–255. - HSL —
hsl(0, 100%, 50%). Hue (0–360°), Saturation, Lightness. Intuitive for designers. - OKLCH —
oklch(0.628 0.258 29.2). Perceptually uniform. Native CSS Color Level 4. - LAB —
lab(53.23 80.11 67.22). Device-independent CIE L*a*b* color space.
Why OKLCH?
OKLCH (Oklab Lightness Chroma Hue) is the recommended color space for modern CSS. Unlike HSL, changes to Lightness in OKLCH are perceptually uniform — doubling the L value actually looks twice as bright to a human observer. This makes it far more predictable for creating accessible color palettes and smooth gradients. CSS Color Level 4 added native oklch() support, available in all modern browsers.
WCAG contrast checker
The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios for text legibility:
- AA — 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt bold).
- AAA — 7:1 for normal text, 4.5:1 for large text. Highest accessibility standard.
Switch to the WCAG Contrast tab, enter your foreground and background colors, and see the ratio and pass/fail status instantly.
Frequently Asked Questions
How do I convert HEX to RGB?
Paste or type your HEX color (with or without the # prefix) and RGB values appear instantly alongside HSL and OKLCH.
What is OKLCH?
OKLCH is a perceptually uniform color space supported by modern CSS. Lightness, Chroma, and Hue values map more predictably to human perception than HSL.
How does the WCAG contrast checker work?
Enter a foreground and background color. The tool calculates the contrast ratio per WCAG 2.1 and tells you if it passes AA (4.5:1) or AAA (7:1) for normal text.
What is the EyeDropper API?
The EyeDropper API (available in Chrome/Edge) lets you pick any color from your screen. Click the eyedropper icon to sample a color from anywhere on your display.