hextimator

One color in, whole theme out.

Your customers pick a brand color. Your app looks good. Every time. No manual tuning, no edge cases where "that shade of yellow" breaks your UI.

• Ship white-labeling without the design overhead — generate per-tenant branded themes at runtime from a single input color. No design review per customer.
• Every color just works — perceptually uniform color science (OKLCH) means electric blue looks as balanced as muted olive. No hue gets special treatment.
• Accessible by default — every foreground meets AAA contrast against its background, light and dark mode included.

hextimator.com — try it in the playground.

Installation

Add to your project:

npm i hextimator

Or quickly get a one-off theme:

npx hextimator "#ff6677"

Quick start

import { hextimate } from "hextimator";

const theme = hextimate("#6A5ACD").format();

With a preset

Presets configure hextimator for a specific framework in one call:

import { hextimate, presets } from "hextimator";

// shadcn/ui — generates --background, --primary, --destructive, etc.
const theme = hextimate("#6366F1")
  .preset(presets.shadcn)
  .format();

Presets set sensible defaults but you can override anything in .format():

const theme = hextimate("#6366F1")
  .preset(presets.shadcn)
  .format({ colors: "hsl-raw" }); // older shadcn format

See Presets for the full list and how to create your own.

Two-step API: generate, then format

hextimator separates palette generation (color math) from formatting (output shape). This lets you extend the palette before choosing how to serialize it.

const theme = hextimate("#6A5ACD")
  .format({ as: "css", colors: "oklch" });

Output formats

All formats return { light: { ... }, dark: { ... } }.

• "object" (default) — plain keys: accent, accent-strong, …
• "css" — CSS custom properties: --accent, --accent-strong, …
• "tailwind" — nested tokens: { accent: { DEFAULT, strong, … } }
• "tailwind-css" — @theme block with --color-accent, --color-accent-strong, …
• "scss" — SCSS variables: $accent, $accent-strong, …
• "json" — JSON string of the plain object

Color value formats

Flexible input

hextimate("#FF6666");            // hex string
hextimate("rgb(255, 102, 102)"); // CSS function
hextimate([255, 102, 102]);      // RGB tuple
hextimate(0xff6666);             // numeric hex

Note on alpha: Alpha values are intentionally ignored — rgba(255, 0, 0, 0.5) is treated as fully opaque rgb(255, 0, 0). Alpha tokens undermine accessibility guarantees because contrast ratios depend on the background, which hextimator does not control.

How it works

1. Parse any color input into a normalized Color object.
2. Convert to OKLCH (perceptual color space) so lightness and chroma adjustments look uniform across hues.
3. Generate accent, base, and semantic color scales — each with DEFAULT, strong, weak, and foreground variants.
4. Gamut-map back to sRGB via binary-search chroma reduction (preserves lightness and hue).
5. Format into your chosen output (CSS vars, Tailwind, SCSS, JSON, or plain object).

Utilities

hextimator also exports its parsing and conversion functions for standalone use:

import { parseColor, convertColor } from "hextimator";

const color = parseColor("rgb(255, 102, 102)");
const oklch = convertColor(color, "oklch");

Documentation

• Extending the palette — addRole, addVariant, addToken
• Presets — drop-in configs for shadcn/ui, or create your own
• Multiple themes — dynamic theming and .fork()
• Customization — generation and format options reference
• Color vision deficiency — simulate and adapt for CVD
• React — useHextimator hook, provider, dark mode strategies
• Tailwind CSS v4 — setup and usage with Tailwind
• Real-world examples — shadcn/ui, Stripe, Slack configurations

Contributing

Issues and PRs are welcome at github.com/fgrgic/hextimator.