color-palette

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

Weekly Installs1.0KRepositoryjezweb/claude-skillsGitHub Stars618First SeenJan 20, 2026Security AuditsGen Agent Trust HubPassSocketPassSnykPassInstalled onopencode862gemini-cli839codex803cursor763github-copilot743claude-code739