Generate complete, accessible colour palettes from a single brand hex. Produces 11-shade scale (50-950), semantic tokens, dark mode variants, and Tailwind v4 CSS output. Includes WCAG contrast checking. Use when setting up design systems, creating Tailwind themes, building brand colours from a hex value, or checking colour accessibility.
Generate a complete, accessible colour system from a single brand hex. Produces Tailwind v4 CSS ready to paste into your project.
Ask for the primary brand colour. A single hex like #0D9488 is enough.
Convert hex to HSL, then generate shades by varying lightness while keeping hue constant:
| Shade | Lightness | Use Case |
|---|---|---|
| 50 | 97% | Subtle backgrounds |
| 100 | 94% | Hover states |
| 200 | 87% | Borders, dividers |
| 300 | 75% | Disabled states |
| 400 | 62% | Placeholder text |
| 500 | 48% | Brand colour |
| 600 | 40% | Primary actions |
| 700 | 33% | Hover on primary |
| 800 | 27% | Active states |
| 900 | 20% | Text on light bg |
| 950 | 10% | Darkest accents |
See references/shade-generation.md for the conversion formula.
Light mode:
--background: white;
--foreground: primary-950;
--card: white;
--card-foreground: primary-900;
--primary: primary-600;
--primary-foreground: white;
--muted: primary-50;
--muted-foreground: primary-600;
--border: primary-200;
Dark mode — invert lightness while preserving relationships:
--background: primary-950;
--foreground: primary-50;
--card: primary-900;
--card-foreground: primary-50;
--primary: primary-500;
--primary-foreground: white;
--muted: primary-800;
--muted-foreground: primary-400;
--border: primary-800;
WCAG minimum ratios:
Quick check: primary-600 on white and white on primary-600. See references/contrast-checking.md for formula.
@theme {
--color-primary-50: #f0fdfa;
--color-primary-100: #ccfbf1;
--color-primary-500: #14b8a6;
--color-primary-950: #042f2e;
--color-background: #ffffff;
--color-foreground: var(--color-primary-950);
--color-primary: var(--color-primary-600);
--color-primary-foreground: #ffffff;
}
.dark {
--color-background: var(--color-primary-950);
--color-foreground: var(--color-primary-50);
--color-primary: var(--color-primary-500);
}
Copy assets/tailwind-colors.css as a starting template.
| File | Purpose |
|---|---|
references/shade-generation.md | Hex to HSL conversion, lightness values |
references/semantic-mapping.md | Token mapping for light/dark modes |
references/dark-mode-palette.md | Inversion patterns |
references/contrast-checking.md | WCAG formulas, quick check table |
assets/tailwind-colors.css | Complete CSS output template |