Tailwind CSS v4 Plugin

One variable.
Infinite themes.

tailwind-hue-theme remaps your entire Tailwind color palette — slate, indigo, and cyan — to OKLCH values that track a single CSS variable, --brand-h. Drag the color wheel in the corner and watch everything update live.

Documentation GitHub npm
Current hue: --brand-h: 250 ← drag the wheel →

Live palette

All three scales shift together. Slate stays neutral; brand and secondary follow the hue.

Slate
Brand (primary)
Secondary (+40°)

Components

Real UI elements, all using the same CSS variables — zero JS re-renders needed.

Alerts

Primary accent — follows --brand-h directly.
Secondary accent — always +40° ahead.

Tags & Badges

Design system Tailwind v4 New Deprecated OKLCH Open source

Form Input

Progress

Design tokens100%
Color system82%
Dark mode61%

Usage

Works in three steps.

/* 1. Install */ npm install tailwind-hue-theme /* 2. Add to your Tailwind CSS */ @import "tailwindcss"; @plugin "tailwind-hue-theme"; /* 3. Shift the entire palette at runtime — no rebuilds needed */ document.documentElement.style.setProperty('--brand-h', '155'); // Emerald document.documentElement.style.setProperty('--brand-h', '10'); // Rose document.documentElement.style.setProperty('--brand-h', '250'); // Indigo (default)

The HuePicker widget (what you see in the corner) is an optional extra — import from tailwind-hue-theme/widget.