Enter a base color and get a full 100-900 tonal scale, with 500 always matching your exact color, ready to copy as CSS variables.
This follows the common 100-900 design-system convention: your base color sits at 500, with steps 100 through 400 mixed progressively toward white for tints, and steps 600 through 900 mixed progressively toward black for shades.
Your base color blended with white at decreasing amounts, from very light down to a subtle tint.
Exactly the color you entered, unmixed, at the center of the scale.
Your base color blended with black at increasing amounts, from a subtle shade down to nearly black.
The 100-900 naming convention is widely recognized across popular design systems and CSS frameworks.
They follow the common design-system convention where 500 is your base color, lower numbers are lighter tints, and higher numbers are darker shades.
Tints mix your base color toward white by a percentage, and shades mix it toward black, so each step moves further from the original color.
Yes, 500 is always exactly the base color you entered, with tints above it and shades below it in the scale.
Yes, click any swatch to copy just that step's hex code to your clipboard.
Yes, use the Copy as CSS variables button to get a ready-to-paste block naming every step, like --color-100 through --color-900.
More handy tools from My Panda Toolbox.