color-palette

Overview

color-palette is a Claude Code skill that generates complete, accessible color palettes from a single brand hex color. It creates an 11-shade scale (50-950), semantic design tokens (background, foreground, card, muted), and dark mode variants. The skill includes built-in WCAG contrast checking to ensure text accessibility across all generated colors.

Key Features

• Full shade scale generation: Creates an 11-shade scale (50 through 950) from a single brand hex color, providing a complete color ramp for design systems.
• Semantic design tokens: Generates meaningful tokens like background, foreground, card, and muted that map directly to UI component needs.
• Dark mode variants: Automatically produces dark mode color variants alongside light mode, enabling seamless theme switching.
• WCAG contrast checking: Built-in accessibility verification ensures text remains readable against generated background colors.
• Tailwind CSS integration: Output is designed to work directly with Tailwind CSS theme configuration, making it easy to apply generated palettes to Tailwind projects.

Who is this for?

This skill is ideal for frontend developers and designers setting up design systems or creating Tailwind themes who need a complete, accessible color palette from a single brand color. It is especially useful for teams converting design mockups to code who want to ensure their color choices meet accessibility standards without manual contrast calculations.