Add a color above to generate shades and tints
Supports #RGB, #RRGGBB — enter multiple colors at once
How the Shades & Tints Generator Works
Build a complete color scale from any base color. Generate lighter tints and darker shades for design systems and UI development.
Tints (Lighter)
Generate progressively lighter variations by mixing your base color with white. Perfect for backgrounds, hover states, and subtle UI surfaces.
Shades (Darker)
Create deeper variations by mixing with black. Use them for text on colored backgrounds, active states, and dark mode alternatives.
Adjustable Steps
Control the number of steps in each scale. Generate 5 quick variations or 20 fine-grained increments for detailed design token systems.
Copy & Share
Copy any value as HEX, RGB, or HSL. Share the full scale via URL so collaborators see the exact same set of colors.
Frequently Asked Questions
A shade is a color mixed with black, making it darker. A tint is a color mixed with white, making it lighter. Together they form a complete value scale from the lightest tint to the deepest shade of any base color.
Design systems use numbered color scales (50, 100, 200... 900) to ensure consistent usage across a product. The lightest values work for backgrounds and borders, mid-range values for icons and secondary text, and dark values for primary text and emphasis.
Yes. Enter any color in HEX, RGB, or HSL format as the base. The generator will produce the full tint and shade scale from that starting point. You can also use the color picker to visually select your base.
Opacity affects the entire element including text and borders, and the result depends on the background behind it. Tints are solid colors that look the same on any background. They are more predictable and accessible than transparency.