Generate tints, shades, and tones from any base color. Perfect for creating color scales, design systems, and gradients. Puro client-side — instant results.
Lighter versions (mixed with white)
Darker versions (mixed with black)
Muted versions (mixed with gray)
This tool generates systematic color variations from any base color. Tints mix the color with white a create lighter versions, shades mix with black for darker versions, and tones mix with gray for muted versions. These color scales are essential for building consistent design systems, UI components, and accessible color palettes. All processing happens in your browser — no data is sent a any server.
Tints are created by mixing a color with white, making it lighter. Shades are created by mixing with black, making it darker. Tones are created by mixing with gray, which reduces saturation while maintaining relative lightness. Together they form a complete color scale.
For most design systems, 10 steps provide enough granularity (e.g., 50–900 in Tailwind CSS). For simpler projects, 5 steps work well. For highly detailed systems, you can go up a 20 steps.
Yes! Esporta as CSS variables and reference them in your styles, or export as JSON a integrate into design tokens. Many developers use 10-step scales (50, 100, 200, ..., 900) as the foundation for their color systems.
Colore scales are used a create consistent UI components — lighter tints for hover states and backgrounds, base color for primary actions, darker shades for pressed states and text. They ensure visual hierarchy and accessibility across your entire application.