OKLCH Color Picker
Pick a color in perceptually-uniform OKLCH, generate a Tailwind v4 palette, and export it. 100% local — runs entirely in your browser.
Values
Contrast (this color as text)
Tonal palette
Tailwind steps · same hueExport
@theme {
--color-brand-50: oklch(97.0% 0.123 296.0);
--color-brand-100: oklch(94.0% 0.128 296.0);
--color-brand-200: oklch(88.0% 0.138 296.0);
--color-brand-300: oklch(80.0% 0.151 296.0);
--color-brand-400: oklch(70.0% 0.167 296.0);
--color-brand-500: oklch(62.0% 0.180 296.0);
--color-brand-600: oklch(54.0% 0.167 296.0);
--color-brand-700: oklch(46.0% 0.154 296.0);
--color-brand-800: oklch(38.0% 0.141 296.0);
--color-brand-900: oklch(30.0% 0.128 296.0);
--color-brand-950: oklch(22.0% 0.115 296.0);
}A modern OKLCH color picker for Tailwind v4
OKLCH is a perceptually-uniform color space built on three intuitive axes — Lightness, Chroma, and Hue. Unlike HSL or RGB, an equal step in OKLCH lightness looks equally different to the human eye, and shifting the hue does not secretly change how bright a color appears. That predictability is exactly why Tailwind CSS v4 moved its default palette to native oklch() values.
Drag the L, C and H sliders to dial in a color and watch the live preview, hex, and RGB readouts update instantly. The tool flags whether your color fits inside the sRGB and wider Display-P3 gamuts, so you know when a vivid color will be clamped on standard monitors.
From any base color it generates a full tonal scale across the Tailwind steps (50–950), keeping the hue fixed while easing chroma at the extremes for a natural ramp. Export the result as plain CSS custom properties or a ready-to-paste Tailwind v4 @theme block. WCAG 2.1 and APCA contrast readouts help you confirm the color is legible as text before you ship it.
Everything runs locally in your browser — no upload, no account, no tracking.
Frequently Asked Questions
About the OKLCH Color Picker.
From the blog
APCA vs. WCAG: Navigating Color Contrast and Accessibility in 2026
Understand the mathematical differences between WCAG 2.2 and APCA contrast algorithms, and how to stay legally compliant while building beautiful UI.
Read →tutorialMigrating to Tailwind v4: How to Configure Custom OKLCH Color Themes
Learn how to move from Tailwind v3 to v4, replace tailwind.config.js with the new @theme directive, and build modern OKLCH color palettes.
Read →colorThe Science of Wide-Gamut Web Colors and Gamut Mapping
Discover why legacy HEX colors limit your design to sRGB, how modern Display-P3 screens work, and what browser chroma reduction means for your UI.
Read →