modern CSS color · OKLCH first
Free color tools for designers who ship
Create palettes, generate perceptual color scales, convert between every color space, check accessibility, and copy production-ready OKLCH CSS, Tailwind themes and Figma variables.
Every tool, one place
Harmony-based palettes generated in OKLCH with locking, reordering and instant copy.
Open toolTurn one color into a 50–950 ramp, export as CSS variables, JSON or Tailwind theme.
Open toolPrimary, neutral, success, warning, danger ramps plus semantic light/dark tokens.
Open toolWCAG ratios plus perceptual OKLCH repair suggestions when a pair fails.
Open toolHEX, RGB, HSL, HSV, HWB, LAB, LCH, OKLAB, OKLCH, CMYK and Display-P3 in one view.
Open toolA large OKLCH picker with lightness, chroma and hue sliders and gamut warnings.
Open toolLinear, radial and conic gradients interpolated in OKLCH, LAB, HSL or sRGB.
Open toolExtract dominant colors from any image locally and build a UI palette from them.
Open toolPreview palettes as protanopia, deuteranopia, tritanopia and achromatopsia.
Open toolName any color: descriptive name, closest CSS keyword and closest Tailwind shade.
Open toolExperiment with color-mix(), light-dark(), contrast-color() and relative color syntax.
Open toolPopular colors
Why OKLCH is the default here
Classic hsl() lies about lightness: hsl(60 100% 50%) (yellow) looks far brighter than hsl(240 100% 50%) (blue) even though both claim 50% lightness. OKLCH is a perceptually uniform space, so equal lightness values look equally light. That makes ramps, hover states and accessible text pairs predictable instead of hand-tuned.
Built for the 1970 CSS color stack
oklch()andoklab()for authoring color directly.color-mix()for tints, shades and blends interpolated in OKLCH or LAB.light-dark()for single-declaration light and dark themes.contrast-color()for automatic foreground picking — with a WCAG check to back it up.color(display-p3 …)for wide-gamut accents that stay in gamut on sRGB screens.
Everything runs in your browser
No accounts, no uploads, no API calls. Images you drop into the palette extractor are processed locally on a canvas and never leave your device, so the tools stay instant and work offline once loaded.