Color Picker.
Convert between HEX, RGB, HSL, OKLCH. Validate WCAG contrast. Build accessible palettes.
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.
- 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
- 01Validate button contrast on a landing
- 02Build accessible brand palettes
- 03Convert Figma colors to CSS variables
- 04Preview a color for color-blind users
- 05Generate hover/active variants from a base color
hex.util.ar
We're finishing this one. Landing will live at hex.util.ar.
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.
How does the color blindness simulation work?
We apply validated transformation matrices (Brettel-Viénot-Mollon) for the 3 common types. It's a useful approximation, not a medical diagnosis.