color-palette_skill

Overview

This skill generates complete, accessible color palettes from a single brand hex. It produces an 11-step shade scale (50–950), maps semantic tokens for light and dark modes, and runs WCAG contrast checks for text and UI elements. The output is ready for Tailwind v4 @theme usage or direct CSS variables.

How this skill works

Convert the brand hex to HSL and keep hue/saturation while varying lightness to create 11 shades. Map those shades to semantic tokens (background, foreground, card, muted, border, primary) for both light and dark modes by inverting lightness relationships. Calculate relative luminance and WCAG contrast ratios for common text/background pairs and recommend accessible shade swaps when ratios fail.

When to use it

• Setting up a design system or theme from a single brand color
• Creating a Tailwind v4 @theme color configuration
• Converting visual designs into production-ready CSS variables
• Ensuring text and UI elements meet WCAG contrast requirements
• Generating dark mode variants that preserve brand identity

Best practices

• Use shade 500 as the canonical brand color and 600 for primary actions
• Keep hue constant across shades; adjust saturation slightly for very light shades
• Prefer 700+ shades for text on colored backgrounds when contrast is low
• For dark mode backgrounds, use 900 instead of 950 if 950 feels too dense
• Run contrast checks for each semantic token pair and adjust lightness or saturation as needed

Example use cases

• Generate a complete Tailwind @theme block from a single hex for immediate integration
• Produce light and dark CSS variables for a React component library
• Audit existing brand palettes and recommend accessible replacements for failing text pairs
• Create semantic tokens (background, card, muted, primary) for a design system
• Convert handoff colors into a predictable 50–950 scale for designers and engineers