color-palette
Generate complete, accessible colour palettes from a single brand hex. Produces 11-shade scale (50-950), semantic tokens, dark mode variants, Tailwind v4 CSS output, WCAG contrast checks. Use whenever the user supplies a brand hex and asks for a palette, mentions setting up a design system, wants Tailwind theme colours from a brand colour, or asks to check colour accessibility / contrast.
npx skills add jezweb/claude-skills --skill color-palette --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 | |
- Workflow
- Step 1: Get the Brand Hex
- Step 2: Generate 11-Shade Scale
- Step 3: Map Semantic Tokens
- Step 4: Check Contrast
- Step 5: Output Tailwind v4 CSS
- Component Usage Examples
- Common Adjustments
- Brand Identity Adjustments
- Verification Checklist
- Optional References
What does the color-palette skill do?
Generate complete, accessible colour palettes from a single brand hex. Produces 11-shade scale (50-950), semantic tokens, dark mode variants, Tailwind v4 CSS output, WCAG contrast checks. Use whenever the user supplies a brand hex and asks for a palette, mentions setting up a design system, wants Tailwind theme colours from a brand colour, or asks to check colour accessibility / contrast.
How do I install it?
Run `npx skills add jezweb/claude-skills --skill color-palette --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From jezweb/claude-skills, a repository with 954 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.