color-palette

1# Colour Palette Generator
2 
3Generate a complete, accessible colour system from a single brand hex. Produces Tailwind v4 CSS ready to paste into your project.
4 
5## Workflow
6 
7### Step 1: Get the Brand Hex
8 
9Ask for the primary brand colour. A single hex like `#0D9488` is enough.
10 
11### Step 2: Generate 11-Shade Scale
12 
13Convert hex to HSL, then generate shades by varying lightness while keeping hue constant.
14 
15#### Hex to HSL Conversion
16 
17```javascript
18function hexToHSL(hex) {
19  hex = hex.replace(/^#/, '');
20  const r = parseInt(hex.substring(0, 2), 16) / 255;
21  const g = parseInt(hex.substring(2, 4), 16) / 255;
22  const b = parseInt(hex.substring(4, 6), 16) / 255;
23 
24  const max = Math.max(r, g, b);
25  const min = Math.min(r, g, b);
26  const diff = max - min;
27 
28  let l = (max + min) / 2;
29  let s = 0;
30  if (diff !== 0) {
31    s = l > 0.5 ? diff / (2 - max - min) : diff / (max + min);
32  }
33 
34  let h = 0;
35  if (diff !== 0) {
36    if (max === r) h = ((g - b) / diff + (g < b ? 6 : 0)) / 6;
37    else if (max === g) h = ((b - r) / diff + 2) / 6;
38    else h = ((r - g) / diff + 4) / 6;
39  }
40 
41  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
42}
43```
44 
45#### Lightness and Saturation Values
46 
47| Shade | Lightness | Saturation Mult | Use Case |
48|-------|-----------|-----------------|----------|
49| 50 | 97% | 0.80 | Subtle backgrounds |
50| 100 | 94% | 0.80 | Hover states |
51| 200 | 87% | 0.85 | Borders, dividers |
52| 300 | 75% | 0.90 | Disabled states |
53…