Loading…
Loading…
The modern perceptually uniform color space. Pick, convert, and generate palettes in OKLCH.
oklch(75.0% 0.1500 300.0)#bd96fergb(189, 150, 254)hsl(263, 98%, 79%)color: oklch(75.0% 0.1500 300.0);color: rgb(189, 150, 254);#bd96fe
300°
#a2bb40
120°
OKLCH maintains perceptual uniformity — colors with the same lightness actually look equally bright.
OKLCH — L: 70%, C: 0.15
HSL — S: 70%, L: 60%
Notice how OKLCH colors appear evenly bright, while HSL varies wildly (yellow appears much brighter than blue).
Common questions about the OKLCH Color Picker.
OKLCH is a perceptually uniform color space where equal numeric changes produce equal perceived changes in color. Unlike HSL, where lightness 50% looks different across hues, OKLCH keeps perceived lightness consistent — making it ideal for design systems and accessible palettes.
Yes — oklch() is supported in all modern browsers (Chrome 111+, Firefox 113+, Safari 15.4+). Use it directly in CSS: color: oklch(70% 0.15 200). For older browser support, provide an HSL or HEX fallback.
OKLCH can describe colors outside the sRGB gamut that most displays show. When you pick a high-chroma color, the browser clamps it to the nearest displayable color. This tool shows gamut warnings so you know when a color won't render exactly as specified.
Keep the L (lightness) value constant and vary only the H (hue) component. For example, oklch(65% 0.15 0) through oklch(65% 0.15 360) gives you a full hue wheel where every color looks equally bright — impossible to achieve with HSL.
oklch, color-mix, and the future of CSS color
Understand perceptual color spaces
One file that carries your tokens as data and your taste as prose, checked into the repo next to the code. What goes in it, what stays out, how to keep it true, and the other DESIGN.md it should not be confused with.
SkillsWalks every rendered text node on a page, reads the real background from a canvas, and reports WCAG failures per theme. The full skill and its script are below, ready to copy.
SkillsImplement or edit UI using only the project's tokens for colour, spacing, radius and type. Reads the theme, maps every value, and stops to ask when nothing matches. Lives inside the tokens guide.
PromptsReplaces 'match the design' with a set of allowed moves: read the token file first, no literals, paired inks, and a report of every value that had no token.