Web tokens
Copy sRGB fallbacks followed by native OKLCH variables inside an `@supports` block.
Browser-local · No signup · No image upload
OKLCH Color Palette Generator
Turn one color or image into a perceptually even palette. See gamut mapping and contrast before you copy production-ready CSS, Tailwind, or design tokens.
- 3–15 steps
- sRGB + P3
- WCAG + APCA
- Shareable URLs
Build your OKLCH color palette
0 inside sRGB
0 inside P3
0 mapped
Live UI preview
OKLCH
Build with color you can explain.
Predictable steps, visible gamut decisions, and tokens ready for the next commit.
New palette ready
Inside target
Chroma mapped
WCAG ratio uses the selected surface · APCA Lc is a developing
preview
Production output
Copy clean tokens
Method, not magic
What the generator does with your color
Every result keeps the decision visible. You can inspect the original OKLCH value, the selected-gamut result, its fallback HEX, and the contrast against your chosen surface.
-
01
Convert
Parse HEX, RGB, HSL, or CSS OKLCH into perceptual lightness, chroma, and hue.
-
02
Shape
Build a lightness ramp or move through named harmony angles while keeping the relationship readable.
-
03
Map
Reduce chroma when needed to fit sRGB or Display P3 while holding lightness and hue as steady as possible.
-
04
Deliver
Export CSS fallbacks, Tailwind v4 variables, DTCG 2025.10 tokens, or a labelled SVG.
Why OKLCH
Equal numbers should feel like equal steps
HSL lightness is not perceptually uniform. A yellow and a blue at the same HSL lightness can look very different. OKLCH gives palette work a more useful lightness axis, then makes gamut limits explicit instead of hiding them.
Learn the L, C, and H channels
OKLCH · same L and C
Brightness stays more consistent across hue.
HSL · same S and L
Yellow feels brighter; blue and purple feel darker.
Built for real handoff
One palette, four useful destinations
Tailwind v4
Generate the familiar 50–950 scale directly inside an `@theme` block.
Design tokens
Export the stable DTCG 2025.10 color object with OKLCH components and HEX fallbacks.
Accessible UI
Compare each mapped swatch with your actual surface using WCAG 2 and signed APCA Lc.
Straight answers
OKLCH palette questions
What is an OKLCH color palette?
An OKLCH palette describes colors with perceptual lightness (L), chroma (C), and hue (H). Light and dark steps behave more predictably than equivalent changes in HSL or RGB.
Does this generator upload my image?
No. The browser decodes the file, samples pixels, and clusters colors locally. The image, filename, and extracted colors are not sent to our analytics.
Why can an OKLCH color be outside sRGB?
OKLCH can describe more colors than sRGB and even colors beyond Display P3. When a color does not fit your target, this tool reduces chroma and reports the resulting ΔEOK rather than silently clipping channels.
Can I use the palette in Tailwind CSS v4?
Yes. Keep the 11-step setting to produce 50–950 labels, choose the Tailwind v4 export, and copy the generated `@theme` variables.
Is APCA the same as WCAG 2 contrast?
No. WCAG 2 reports a ratio with fixed thresholds. APCA reports a signed Lc value and its guidance depends on font size and weight. APCA and WCAG 3 remain developing work, so the result here is a preview, not a WCAG 3 compliance claim.
Can I install the generator as an app?
Yes. After the first visit, use your browser’s Install app or Add to Home Screen action. The cached interface and color engine can then open offline.
Field notes
Use OKLCH with fewer surprises
Short guides connect the color math to a specific design or developer decision.
Conversion
Browse all OKLCH guides
OKLCH to HEX without hiding gamut loss
Why one OKLCH value may need a mapped sRGB fallback.
Color theoryRead an OKLCH color wheel
Separate hue relationships from the gamut boundary.
EngineeringHow this generator is built
Color conversion, gamut mapping, contrast, and local images.
ResearchFive OKLCH tools compared
A first-hand feature and mobile audit from July 2026.