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. #### Hex to HSL Conversion ```javascript function hexToHSL(hex) { hex = hex.replace(/^#/, ''); const r = parseInt(hex.substring(0, 2), 16) / 255; const g = parseInt(hex.substring(2, 4), 16) / 255; const b = parseInt(hex.substring(4, 6), 16) / 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); const diff = max - min; let l = (max + min) / 2; let s = 0; if (diff !== 0) { s = l > 0.5 ? diff / (2 - max - min) : diff / (max + min); } let h = 0; if (diff !== 0) { if (max === r) h = ((g - b) / diff + (g < b ? 6 : 0)) / 6; else if (max === g) h = ((b - r) / diff + 2) / 6; else h = ((r - g) / diff + 4) / 6; } return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) }; } ``` #### Lightness and Saturation Values | Shade | Lightness | Saturation Mult | Use Case | |-------|-----------|-----------------|----------| | 50 | 97% | 0.80 | Subtle backgrounds | | 100 | 94% | 0.80 | Hover states | | 200 | 87% | 0.85 | Borders, dividers | | 300 | 75% | 0.90 | Disabled states | | 400 | 62% | 0.95 | Placeholder ...