Your customers pick a brand color. Your app looks good. Every time. No per-customer design reviews, no manual tuning, no edge cases where "that shade of yellow" breaks your UI.
Why Hextimator exists
You are shipping a B2B, B2B2C, or white-label app. Every tenant brings their own brand color. The options today are:
- Let them pick any hex. Now legal-pad yellow buttons become unreadable; cheeto tangerine toasts look identical to your warning state.
- Curate a palette. Now you are telling a paying customer their brand color is not allowed.
hextimator is option three. One color in, whole theme out. Light and dark. Semantic roles and surfaces. Foregrounds tuned against their backgrounds for WCAG contrast by default (AAA targets unless you opt down). Even for yellow.
hextimator.com
Hextimator
Try it in the playground: pick a brand color and watch the whole theme regenerate.
What's under the hood
RGB and HSL lie about brightness. Yellow looks loud. Blue looks quiet. A +10% lightness tweak on yellow does not match the same tweak on blue.
It parses your input color and converts it to OKLCH. That becomes the anchor for the accent scale. Strong and weak variants step lightness and chroma from that anchor. Surfaces stay low chroma so backgrounds read as neutral, not tinted mud.
Semantic colors get their own hue arcs. Positive sits around 120 to 160 degrees. Negative around 5 to 30. Caution around 45 to 70. The engine picks a base inside each arc, then builds the same strong, weak, and foreground variants.
Not every OKLCH color fits on a screen. Hextimator gamut-maps back to sRGB with binary search on chroma. It keeps lightness and hue. It drops chroma until the color fits.
Foregrounds are tuned separately. Each one must hit your contrast target against its background. The default is WCAG AAA at 7:1. You can lower it to AA or a custom ratio. Light and dark mode each get their own lightness ranges and surface rules.
brand-exact, with a matched foreground.Get started
30-second integration
npm i hextimator
import { hextimate } from 'hextimator';
const css = hextimate('#ff6677').format({ as: 'css' });
npmjs.com
hextimator - npm
github.com
fgrgic/hextimator
7
