Colour Palette Generator

Generate a complete, accessible colour system from a single brand hex. Produces Tailwind v4 CSS ready to paste into your project.

Workflow

Step 1: Get the Brand Hex

Ask for the primary brand colour. A single hex like #0D9488 is enough.

Step 2: Generate 11-Shade Scale

Convert hex to HSL, then generate shades by varying lightness while keeping hue constant:

See references/shade-generation.md for the conversion formula.

Step 3: Map Semantic Tokens

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;

Step 4: Check Contrast

WCAG minimum ratios:

• Text (AA): 4.5:1 normal, 3:1 large (18px+)
• UI Elements: 3:1

Quick check: primary-600 on white and white on primary-600. See references/contrast-checking.md for formula.

Step 5: Output Tailwind v4 CSS

@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.

Common Adjustments

• Too vibrant at light shades: Reduce saturation by 10-20%
• Poor contrast on primary: Use shade 700+ for text
• Dark mode too dark: Use shade 900 instead of 950 for backgrounds
• Brand colour too light/dark: Adjust to shade 500-600 range

Reference Files