Generate tints, shades, and tones from any base color. Perfect for creating color scales, design systems, and gradients. Pure 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 to 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 to 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 to 20 steps.
Yes! Export as CSS variables and reference them in your styles, or export as JSON to integrate into design tokens. Many developers use 10-step scales (50, 100, 200, ..., 900) as the foundation for their color systems.
Color scales are used to 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.