color-palette

This skill acts as an automated design system architect, allowing developers to generate a complete, WCAG-compliant color palette from a single primary brand hex value. By applying HSL transformations and saturation-weighted lightness adjustments, it ensures that your color system maintains consistent visual identity and accessibility across all shades. It is designed for frontend developers and UI designers who need to rapidly prototype design tokens or implement robust theming in modern web applications. The tool automates the tedious math required to ensure high-contrast text and readable backgrounds, bridging the gap between a simple brand color and a fully realized Tailwind configuration.

• Automatically generates an 11-shade scale (50-950) that respects hue consistency while preventing overly vibrant or muddy pastels.

• Creates comprehensive semantic tokens for both light and dark mode, ensuring that every background has an appropriate foreground pair.

• Outputs production-ready Tailwind v4 CSS code snippets that can be directly injected into project configuration files.

• Includes built-in dark mode inversion patterns, mapping lightness extremes while preserving brand identity for UI elements like borders, buttons, and text.

• Supports workflow optimization for design systems, Tailwind themes, and brand identity enforcement.

• Users should start by providing a single primary brand hex code, such as #0D9488, to trigger the generation process.

• The tool uses a lightness/saturation multiplier table to differentiate usage across shades, ranging from 50 (subtle backgrounds) to 950 (darkest accents).

• Always verify contrast against WCAG standards using the generated values to ensure accessibility in production environments.

• The generated tokens include specific roles such as card backgrounds, input borders, primary/secondary button states, and muted text variants.

• Designed for use within the Claude Code CLI environment to streamline the transition from a single brand color to a complete CSS theme.