Two hues, one theme

Drag two hues. They mix in OKLCH into one color, and that color becomes the design tokens: primary, surfaces, text, and status colors that stay together. Those tokens are the theme. The same set can be copied as HSL, RGB, HEX, or Figma variables. Pairs such as Rose to Orange, Sky to Indigo, and Yellow to Indigo are in the gradient library and open back on this page.

One token set, used as the whole theme

Colors that are not tokens

A screen full of bg-blue-500, text-slate-300, and shadow-indigo-500/20 is not a system. A dark-mode pass or a rebrand means hunting through markup by hand.

Take the theme with you

Copy the AI Prompt into the assistant's instructions or the chat. The assistant is told to use semantic variables such as bg-[var(--color-bg-base)] and to leave the HTML classes alone. Theme changes stay in the CSS tokens.

01
OKLCH first
OKLCH is the space this page mixes in. Tailwind CSS v4 can use those values as they are. HSL, RGB, and HEX are copies of the same theme. RGB and HSL midpoints often gray out. OKLCH keeps lightness even, so the theme stays clear instead of turning muddy.
02
From the mix to design tokens
The mixed color becomes primary, hover, active, page background, card surface, border, text, success, warning, and error. Neutrals keep a trace of that hue. Light and dark are the same set. Text and controls are checked against WCAG AA.
03
Moods
Balanced, Morandi, Neon, Nordic, Earthy, Cyber, Vintage, and Contrast each change chroma and lightness. Vintage holds lightness between 0.22 and 0.94 and still clears 4.5:1. Contrast targets WCAG AAA.

Color engineering and UI accessibility

What OKLCH changes

HSL treats lightness as a number, not as what the eye sees. The same lightness can make yellow glare and blue look dull, so generated text fails contrast. OKLCH (Oklab lightness, chroma, and hue) mixes along a path closer to human vision, which makes the steps from tint to text predictable. Mixing and contrast use chroma.js. When a mixed color falls outside sRGB, its chroma is lowered until the color fits on a screen. The theme uses that fitted color.

Accessible Vintage

Film palettes lift the black point and soften the white point, and that usually drops text under WCAG 2.2. Vintage mode keeps every generated color inside lightness 0.22–0.94 and chroma 0.02–0.06, shifts neutrals toward amber, and refuses a result under 4.5:1. The page badge reports the lowest ratio in that set.

Use the tokens in a project

For Tailwind CSS v4, paste the snippet into global.css under @theme. Shadcn and other CSS-variable setups can switch the same palette to HSL, RGB, or HEX. Light values live on :root. Dark values live on .dark. Add or remove that class on the root to switch theme. Do not rewrite the component classes. For Figma, download the Light and Dark JSON files and drop both into Variables.