color-palette
Generate accessible 11-shade colour palettes and Tailwind v4 CSS from a single brand hex.
- Produces complete scales (50–950) with semantic tokens for light and dark modes, plus WCAG AA contrast verification
- Outputs ready-to-paste Tailwind v4 CSS with colour variables and dark mode overrides
- Includes reference guides for HSL conversion, semantic token mapping, and contrast checking formulas
- Designed for design system setup, theme creation, and brand colour standardization workflows
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
function hexToHSL(hex) {
hex = hex.replace(/^#/, '');
More from jezweb/claude-skills
tailwind-v4-shadcn
|
2.7Ktanstack-query
|
2.5Kshadcn-ui
Install and configure shadcn/ui components for React projects. Guides component selection, installation order, dependency management, customisation with semantic tokens, and common UI recipes (forms, data tables, navigation, modals). Use after tailwind-theme-builder has set up the theme infrastructure, when adding components, building forms, creating data tables, or setting up navigation.
2.5Ktailwind-theme-builder
>
2.2Kfastapi
|
2.0Ktanstack-start
Build a full-stack TanStack Start app on Cloudflare Workers from scratch — SSR, file-based routing, server functions, D1+Drizzle, better-auth, Tailwind v4+shadcn/ui. No template repo — Claude generates every file fresh per project.
1.6K