color-palette

To generate an accessible Tailwind v4 color palette, provide a single brand hex code to produce an 11-shade scale (50-950) using HSL-based lightness steps. The output includes ready-to-paste @theme CSS variables and semantic token mappings for light and dark modes.

Semantic tokens are meaningful variable names like background, foreground, primary, and border that replace hardcoded colors. They map to specific shades for light mode and automatically remap to appropriate dark mode equivalents using .dark CSS override templates.

WCAG contrast checking applies luminance and contrast formulas to evaluate common UI color pairs against AA thresholds for text and UI elements. It validates readability and provides guidance for fixing low-contrast pairings to ensure accessible design.

Yes, the color palette generator supports both light and dark mode by producing matching semantic token variables. It generates a complete 11-shade scale and provides a .dark override template aligned to Tailwind v4 variable conventions for both modes.

Light Tailwind shades can appear washed out when saturation remains constant across the scale. The palette generator applies HSL-based lightness steps with specific guidance to reduce saturation in light shades, maintaining brand consistency without manual tweaking.

Yes, you can use the generated color systems with existing Tailwind CSS themes because the output provides ready-to-paste @theme compatible CSS variables. These follow Tailwind v4 variable conventions, allowing direct integration into your current design system setup.