color-palette

The color-palette skill generates a complete and accessible colour system from a single brand hex value. It is designed to help developers and designers quickly create consistent design system palettes without manually tuning shades or accessibility values. Starting from one primary brand colour, the skill converts the hex value into HSL format and produces an 11-shade scale ranging from 50 to 950. The generated palette is intended to maintain a smooth visual progression while preserving the recognisable identity of the original brand colour. The workflow also emphasizes accessibility and usability for modern UI systems.

The skill includes several core capabilities for design system generation and colour management. It creates Tailwind v4 CSS-ready colour scales, applies controlled saturation adjustments to lighter shades to avoid overly vibrant pastels, and generates semantic colour tokens alongside dark mode variants. The skill also includes WCAG contrast checking guidance to support accessible interface design. Internally, it provides JavaScript-based utility functions for converting between Hex, HSL, and generated colour scales. The output is structured so that lighter shades work effectively for backgrounds and borders, while darker shades remain suitable for text and emphasis.

This skill is useful for frontend developers, UI engineers, product designers, and teams building reusable design systems. It is especially relevant when creating Tailwind themes from a single brand colour, standardising semantic design tokens, or evaluating colour accessibility across interfaces. The skill is intended for workflows where users need a fast and repeatable method for producing production-ready colour palettes while maintaining visual consistency and accessibility standards.