A color utility system for Tailwind v4 that decomposes every color into three independent axes — luminance, chroma, and hue — and lets them cascade through the DOM. Set a color on a parent, override one axis on a child. No opacity hacks. Re-theme your entire app by changing one variable.
Each matrix shows all combinations of luminance (rows) and chroma (columns) for a given hue. Hover to see the class name.
bg-hi-lo-primary + text-lo-mid-primary. Low chroma background, strong text. Portable anywhere.
Parent sets bg-mid-hi-accent. Children inherit chroma + hue, override only luminance — no need to redeclare the full color.
bg-hi-lo-success with mid-chroma border. Same pattern, different hue — instant semantic color.
bg-lo-mid-danger. Deep, saturated backgrounds that read correctly regardless of context.
Primary container with accent and warning badges, no transparency needed:
Parent sets hue to primary. Children swap only the hue axis — luminance and chroma stay inherited.
/* ── 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-mid-hi-primary one class, full color
DECOMPOSED bg-l-mid bg-c-hi bg-h-primary per-axis control
CASCADING parent sets color, child overrides one axis
To customize hues, override in your own @theme block: */
@theme {
--hue-primary: 180; /* teal instead of purple */
--hue-accent: 320; /* pink instead of orange */
}