Your color, in every format.
A color picker that understands modern formats: alongside classic HEX and RGB, it shows OKLCH (perceptually uniform color space, ideal for natural-looking gradients). Validate contrast against white/black per WCAG AA/AAA and generate palettes that hold up at any brightness.
Your color
Accepts #abc, #aabbcc, rgb(…), hsl(…), oklch(…) and CSS names like rebeccapurple.
Adjust in OKLCH
Formats
- hex#28d6df
- rgbrgb(40, 214, 223)
- hslhsl(183, 74.1%, 51.6%)
- oklchoklch(79.9% 0.130 200.5)
WCAG contrast
Contrast ratio of the color as text on a background. AA requires 4.5:1 (normal text) and 3:1 (large); AAA requires 7:1 and 4.5:1.
Tonal palette
Light/dark variants of the same hue, stepped in OKLCH lightness. Great for hover, active, borders and backgrounds. Click a swatch to copy its HEX.
Color blindness
How your color reads under the three common types of color blindness. A useful approximation, not a medical diagnosis.
OKLCH mixer
Perceptual interpolation between two colors in OKLCH — without the muddy grays you get when mixing in RGB. Click a swatch to copy its HEX.
What it does
- Convert between HEX, RGB, HSL, OKLCH
- WCAG AA/AAA contrast against any background
- Tonal palette generator (light/dark variants)
- Color blindness simulator (deutan, protan, tritan)
- Mix two colors in OKLCH (perceptual interpolation)
- Quick copy in any format
Use cases
- Validate button contrast on a landing
- Build accessible brand palettes
- Convert Figma colors to CSS variables
- Preview a color for color-blind users
- Generate hover/active variants from a base color
FAQ
What is OKLCH and why is it better than HSL?
OKLCH is a perceptually uniform color space: two colors with the same L look equally bright to the eye — not true in HSL. Much better for gradients and harmonious palettes.
What do WCAG AA and AAA mean?
Contrast accessibility levels. AA requires ratio ≥ 4.5:1 for normal text and 3:1 for large. AAA requires 7:1 and 4.5:1. AA is the legal minimum in many countries.
Wide gamut (P3) support?
Yes. OKLCH can express colors beyond sRGB. If your monitor supports it and your CSS uses OKLCH directly, they look more saturated. Here we flag colors outside sRGB and show the gamut-mapped version in HEX/RGB/HSL.
How does the color blindness simulation work?
We apply validated transformation matrices (Machado, Oliveira & Fernandes 2009) for the 3 common types. A useful approximation, not a medical diagnosis.