How to Generate Color Palettes with Claude Code

Ask Claude Code for a color scheme and it picks arbitrary hex values with no contrast guarantees and no dark-mode plan. A color skill replaces that guesswork with a real palette system. The top pick is `color-palette` (2,524 installs, skills.sh registry), which generates accessible Tailwind v4 color systems.

Key takeaways

• color-palette (2,524 installs, 919 GitHub stars, jezweb, skills.sh registry) produces consistent Tailwind v4 palettes with light and dark mode built in.
• color-expert (1,646 installs, 77,600 GitHub stars) is the theory layer, teaching Claude Code modern OKLCH color science and accessible palette construction.
• color-accessibility (546 installs, 291 GitHub stars) enforces WCAG contrast so generated text stays legible.
• These pair with tokens; see the design tokens guide and best skills for frontend design.

Why does Claude Code pick bad colors by default?

Without a skill, Claude Code treats color as a one-off aesthetic choice: it emits standalone hex codes, rarely checks contrast, and has no consistent scale across shades. The color-palette skill (2,524 installs, skills.sh registry) reframes the task as building a system, so every shade belongs to a coherent, accessible Tailwind v4 scale rather than a random pick.

What is the best color palette skill for Claude Code?

The best pick is `color-palette` (2,524 installs, 919 GitHub stars, jezweb, skills.sh registry). It generates full light and dark palettes ready for Tailwind v4. For deeper theory, add `color-expert` (1,646 installs, 77,600 GitHub stars), which covers OKLCH color science, and `color-system` (984 installs, 1,823 GitHub stars) for structured brand scales. Compare the set on the frontend-design pillar.

How do you keep palettes accessible?

Contrast is where most generated palettes fail. `color-accessibility` (546 installs, 291 GitHub stars, skills.sh registry) checks foreground and background pairs against WCAG ratios, and `color-theory-palette-harmony-expert` (290 installs, 149 GitHub stars) balances harmony against legibility. Both stop Claude Code shipping low-contrast text.

How do palettes become design tokens?

A palette is the decision; tokens make it reusable across a codebase. color-palette (2,524 installs) already outputs Tailwind v4 systems that map cleanly onto CSS variables, which is exactly the input the design tokens guide describes. This connects color work to the wider design system hub.

A complete starter stack

• color-palette (2,524 installs) - accessible Tailwind v4 palettes with dark mode.
• color-expert (1,646 installs) - OKLCH theory and palette construction.
• color-accessibility (546 installs) - WCAG contrast enforcement.
• color-system (984 installs) - structured brand color scales.

Common pitfalls

• Generating a single accent color with no full scale, so components have nothing consistent to reference.
• Skipping contrast checks and shipping text that fails WCAG.
• Treating light and dark mode as an afterthought instead of generating both from one system.

Install color-palette first, layer color-expert and color-accessibility, and feed the result into your design tokens.

The W3C WAI contrast guidance is the authoritative reference these skills enforce.

Common questions