Generate a Tailwind-style shade scale from a single base color. Enter a color, name the palette, and copy CSS variables for the 50 through 950 shade steps.
This is useful when you have a brand color or UI accent and need a practical range for backgrounds, borders, text, hover states, and focus treatments.
Shade Scale
The generator creates the familiar Tailwind steps: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950. The exact base color is kept at the closest matching step so the original color does not drift.
Lighter and darker values are generated around that anchor. After generating the scale, review contrast in the actual UI because automatic shade scales cannot know your layout, font size, or accessibility target.
Palette Name
The palette name becomes part of the CSS variable names, such as --color-brand-500. You can type your own name or let the tool suggest one from the nearest known color name.
Use short lowercase names if the variables will go straight into a Tailwind v4 theme block.
Output Formats
The table can show HEX, RGB, HSL, HWB, or CMYK values for inspection. The copyable code is formatted as an @theme block with CSS custom properties for Tailwind v4.