About This Tool
Documentation
What does this tool do?
A design system palette generator that produces standard 11-step numerical shade scales (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) using perceptual luminance distribution. Exports directly to Tailwind CSS `tailwind.config.js` theme extensions, CSS Custom Properties, or SCSS variables.
When should you use it?
Use this tool when building custom Tailwind CSS themes, expanding single brand colors into complete design tokens for light and dark modes, or creating consistent UI state variations (hover, active, focus, disabled).
Key Capabilities & Features
Highlights
Generate complete 10-step color shade and tint scales (50, 100, 200 ... 900, 950) from any base HEX color
Perceptually uniform color distribution using CIE L*a*b* and OKLCH color spaces
WCAG text readability badge display for each shade level against white and black text
Export formatted for Tailwind CSS theme colors, CSS custom properties, and Figma tokens
Fine-tune lightness and chroma curves with interactive distribution sliders