Base Color
CSS Variable Name
CSS Custom Properties Output
What This Tool Does
Generates 9 tints (base color mixed with white) and 9 shades (mixed with black) at 10% increments, plus the base color — 19 swatches total. Click any swatch to copy its HEX code. The CSS output generates ready-to-use custom properties for your design system stylesheet.
Frequently Asked Questions
What is the difference between a tint and a shade?
A tint is created by mixing a color with white, making it lighter. A shade is created by mixing with black, making it darker. A tone is created by mixing with gray. This tool generates tints and shades along a percentage scale from 10% to 90%.
How are the steps calculated?
Each step mixes the base color with white (for tints) or black (for shades) at intervals of 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, and 90%. The base color itself sits at 0% (no mixing).
Can I use these for a design system?
Yes — this is exactly what design systems like Tailwind CSS do. You typically pick a base color and generate a scale of 100-900 or 50-950 steps. Copy the CSS custom property output to use directly in your stylesheet.