color-palette

You can generate an accessible color palette from a single brand hex color by creating an 11-shade scale (50-950) and mapping them to semantic tokens. The process includes HSL color manipulation for consistent hue interpolation and automated WCAG contrast checks.

Yes, the color palette generator supports Tailwind CSS v4. It outputs semantic tokens and the 11-shade color scale using the Tailwind v4 @theme syntax, allowing direct integration into your design system configuration.

Generating a color palette includes both dark mode variants and contrast checking. It creates complementary dark mode colors and performs WCAG contrast checks to ensure text accessibility ratios are met across both light and dark themes.

The best way to set up semantic color tokens is to derive them from an 11-shade scale generated via HSL interpolation. This maps raw shades to semantic tokens like background, foreground, and primary, ensuring consistent light and dark mode variants.

Semantic tokens are mapped to the 11-shade color scale by assigning specific shades to design tokens such as background, foreground, and primary. This uses HSL lightness interpolation to maintain visual consistency across the generated palette.

The generated color palette meets WCAG accessibility standards by performing automated contrast checks. These checks verify that text against the generated semantic tokens and shades meets required accessibility ratios for both light and dark modes.