Bringing the Tailwind CSS philosophy of atomic utility classes to the color variables that power OKLCH. Tailwind OKLCH lets you set full color values or change one parameter at a time – no more opacity hacks required. Re-theme your whole app with just a variable or a class.
Tailwind OKLCH gives you Tailwind-style, fine-grained control over your colors. Every color is built from three independent dimensions — hue, luminance, and chroma — each adjustable with utility classes or CSS variables.
Chroma controls saturation intensity — from nearly neutral (lo) to fully vivid (hi).
bg-5-mid-primarybg-lc-5bg-c-midbg-h-primaryEach matrix shows chroma (rows, hi→lo) × luminance (columns, 0→10) for a given hue. Hover to see the class name.
hue-primary on the container. Badges swap hue — L and C stay identical:
Parent sets bg-3-mhi-accent. Children inherit chroma + hue, override only luminance — no need to redeclare the full color.
On hover, these buttons increase chroma and get a little shadow. Subtle, pleasing, unlikely to distract.
Every element in his card uses the same chroma and hue. Other elements only change luminance. Excellent for accessibility.
hue-danger on the container — every child inherits the hue. Only L and C vary per element.
Parent sets hue to primary. Children swap only the hue axis — luminance and chroma stay inherited.
hue-[180] for a custom hue, chroma-[15] for exact chroma. Luminance auto-flips between light and dark mode.
Set hue-*
once on a container and every child inherits it. Elements only specify
luminance and chroma via two-axis
shorthands like bg-5-mhi
— no hue suffix needed. Click a hue to re-theme the showcase.
Manage your project configuration and team preferences.
3 new notifications
You have unread messages from your team.
Email notifications
Receive updates about activity.
2,847
Users
$48k
Revenue
+12%
Growth
One hue-primary class on the container. Every element inside uses two-axis shorthands like bg-5-mhi and text-10-lo — no hue suffix needed. Click a different hue above and the entire showcase re-themes instantly.
Sometimes you don't need an absolute luminance step — you just want
a little lighter or a little darker than whatever
the parent set. bg-lc-up-1
pushes toward the viewer (brighter in dark mode, darker in light mode)
while bg-lc-down-1
recedes. Perfect for hover states, active items, and subtle depth — the
same classes work on every base color.
Each navbar sets a single base color. bg-lc-up-1 and
bg-lc-down-1 nudge luminance toward or away from the
viewer — the direction flips automatically in dark mode. Same utility classes, every hue.
/* ── your-project.css ────────────────────────────────────────
Import tailwind-oklch into your Tailwind v4 project. */
@import "tailwindcss";
@import "tailwind-oklch";
@plugin "tailwind-oklch/plugin";
/* That's it. You now have:
SHORTHAND bg-5-hi-primary one class, full color
DECOMPOSED bg-lc-5 bg-c-hi bg-h-primary per-axis control
CASCADING parent sets color, child overrides one axis
Luminance contrast 0–10 scale:
0 / base = close to the page color (blends in)
10 / fore = high contrast with the page (stands out)
1–9 = evenly distributed increments
To customize hues, override in your own @theme block: */
@theme {
--hue-primary: 180; /* teal instead of purple */
--hue-accent: 320; /* pink instead of orange */
}
/* To shift the luminance contrast range: */
:root {
--lc-range-start: 0.95; /* light-mode base/0 */
--lc-range-end: 0.15; /* light-mode fore/10 */
}
.dark {
--lc-range-start: 0.12; /* dark-mode base/0 */
--lc-range-end: 0.92; /* dark-mode fore/10 */
}