Brand Color Shades Generator
Enter your brand's primary color and get a palette of ten shades (from 50 to 900), design-system style, to build a consistent color scheme. 100% local calculation in your browser.
How it works
A solid design system is never limited to a single hue: you need lighter variants for backgrounds and disabled states, and darker variants for text or hover states. This tool converts your color to HSL, keeps the original hue, and varies only the lightness (plus a slight saturation adjustment at the extremes) to generate ten shades numbered from 50 (very light) to 900 (very dark), following the Tailwind CSS palette model.
Which shade best matches my original color?
The 500 shade is calculated to be as close as possible to the color you entered; lower shades lighten gradually toward white, while higher shades darken gradually toward black.
Can I copy a single shade or the whole palette?
Click a swatch to copy its HEX code individually, or use the "Copy full palette" button to get the complete list in number: #hex format, ready to paste into a CSS or Tailwind configuration file.
Shade calculation happens entirely in your browser; your brand color is never sent to a server.