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:

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.

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

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