Turn a list of HEX colors into a ready-to-paste theme.extend.colors block for your tailwind.config.ts — with WCAG contrast checks baked in.
What you give it. One HEX per line. You can optionally prefix a name: brand: #3b82f6, primary: #10b981. Bare HEX values get auto-named color1, color2, etc.
Naming schemes.
- Scale (50–950): Each input color generates a full 11-step palette (50, 100, 200, …, 950) by lightening toward white and darkening toward black. Best for
bg-brand-500 / text-brand-700 usage.
- Single name: Each input becomes a single token (
brand: '#3b82f6'). Use when you don't need shades.
- Object nesting: Same as scale but emitted as nested objects (
brand: { 500: '...', 700: '...' }) — the idiomatic Tailwind form.
WCAG contrast. For every shade, the tool computes the contrast ratio against white and black backgrounds and labels it AAA (≥7), AA (≥4.5), AA-Large (≥3), or Fail. This tells you at a glance which shades are safe for body text vs. accents, so your palette is accessible by construction, not as an afterthought.
Dark mode. Optionally paste a second set of HEX values. The tool emits a separate dark-mode config you can wire into your dark: variant or a CSS variables strategy.
The math. Lightness tints use HSL-space lightness interpolation toward pure white (for 50–400) and toward pure black (for 600–950); the input color anchors step 500. This produces visually even ramps, closer to Tailwind's own palette generation than naive RGB mixing.