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
More from jezweb/claude-skills
tailwind-v4-shadcn
|
2.7Kshadcn-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.5Ktanstack-query
|
2.5Ktailwind-theme-builder
Set up Tailwind v4 + shadcn/ui themed UI with dark mode. Install deps, configure CSS variables via @theme inline, wire dark mode toggle, verify. Use whenever the user mentions Tailwind v4, setting up Tailwind theming, shadcn/ui colours, dark mode, or troubleshooting colours not working, tw-animate-css errors, @theme inline conflicts, @apply breaking after upgrade, or v3 → v4 migration issues.
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. Use whenever the user mentions TanStack Start, asks to scaffold a full-stack Cloudflare app with SSR, wants an SSR dashboard, or asks for a React 19 + Cloudflare Workers app with file-based routing and server functions — even if they don't name TanStack Start specifically. No template repo — Claude generates every file fresh per project.
1.6K