Color System Lab
Engineer color systems with perceptual color spaces. Convert between OKLCH, OKLab, HSL, and RGB. Compare color space interpolation side-by-side, generate accessible palettes, check WCAG contrast ratios, and export design tokens.
#8b5cf6rgb(139, 92, 246)hsl(258deg, 90%, 66%)oklch(60.6% 0.2190 292.7deg)oklab(60.6% 0.0846 -0.2020)oklch(60.6% 0.2190 292.7)Frequently Asked Questions
Why use OKLCH instead of HSL?
OKLCH is perceptually uniform — equal numerical changes produce equal perceived color differences. HSL interpolation creates muddy colors at hue boundaries. OKLCH interpolation stays vivid and predictable.
What is WCAG contrast?
WCAG (Web Content Accessibility Guidelines) defines contrast ratios for readable text. AA requires 4.5:1 for normal text, 3:1 for large text. AAA requires 7:1 for normal text.
How is the palette generated?
Starting from your chosen OKLCH hue and chroma, the tool generates 11 steps (50–950) by varying lightness while keeping hue and chroma perceptually consistent — similar to how Tailwind and Radix palettes are built.