AniUI Pro
Docs/Theming

Custom palettes

Override the default palette with your brand colors.

AniUI's color system is built on OKLCH — a perceptually uniform color space. That means moving lightness up or down keeps perceived saturation consistent, and an 11-step scale generated from a single base hue feels balanced without manual tuning per step.

Generating a scale

Pick a hue (0–360) and chroma (0–0.4). The lightness curve and chroma falloff are pre-tuned to match Tailwind-style 50–950 ramps:

import { generateScale } from "aniui/colors";

const indigo = generateScale(269, 0.18);
// {
//   50: "oklch(0.97 0.045 269)",
//   100: "oklch(0.94 0.072 269)",
//   ...
//   950: "oklch(0.18 0.063 269)",
// }

Apply your palette

Map the generated scale to AniUI's semantic tokens. The minimum you need to override are --primary, --primary-foreground, and the neutral surface tokens:

:root {
  --primary: oklch(0.6 0.18 16);          /* warm orange 500 */
  --primary-foreground: oklch(0.97 0.045 16);
  --background: oklch(0.18 0.005 240);
  --foreground: oklch(0.96 0.01 240);
}

Tested hue suggestions

  • Indigo — hue 269, chroma 0.18 (the default)
  • Violet — hue 295, chroma 0.20
  • Sky — hue 230, chroma 0.16
  • Emerald — hue 155, chroma 0.18
  • Rose — hue 15, chroma 0.20
  • Slate — hue 240, chroma 0.04 (near-monochrome)

Tweak the values until the contrast looks right against your background. The light + dark backgrounds AniUI ships work well with chroma between 0.14 and 0.22 on the brand color.