Color Picker
The flagship color tool: HEX, RGB, HSL, OKLCH, LAB, CMYK, P3 with alpha, 8 harmonies on an interactive color wheel, WCAG + APCA contrast, color-blindness simulation, and one-color → full design system export.
What is OKLCH and Why It Matters?
OKLCH is a perceptually uniform color space — defined as Lightness, Chroma, and Hue in the Oklab model — where equal numeric changes correspond to equal visual changes, unlike RGB or HSL which distort hue and brightness across the gamut. That property is why modern design systems (Tailwind v4, Radix Colors, Apple's HIG) build their shade ramps in OKLCH or LAB rather than HSL: a 10-step lightness scale actually looks evenly spaced, and contrast checks against WCAG 2.1 or the newer APCA algorithm stay predictable. This picker exposes OKLCH alongside HEX, RGB, HSL, LAB, CMYK, and Display-P3, with 8 harmony schemes, WCAG + APCA contrast, color-blindness simulation, and one-click export to CSS variables, Tailwind palettes, ASE swatches, and W3C Design Tokens. Need a starting palette? Try the Gradient Generator, or animate transitions with the CSS Animation Generator.
How to use this tool
- 1Pick a base colorUse the wheel, the OKLCH/HSL sliders, the EyeDropper API, or paste a HEX/RGB/OKLCH/LAB string. The tool converts between every space in real time.
- 2Generate harmonies and shadesSwitch between complementary, analogous, triadic, tetradic, and split-complementary schemes, then expand any color to a Tailwind 50–950 shade scale.
- 3Check contrast and exportPair swatches for WCAG 2.1 and APCA scores, simulate CVD, then export to CSS, Tailwind, JSON, ASE, SVG, or W3C Design Tokens.