Tint and Shade Generator
Generate 10 tints and 10 shades of any color. Click any swatch to copy. Export as CSS variables.
Best for: Building a ten step tint and shade scale from one brand colour, and generating the lighter and darker variants a design system needs
Limitations: Produces tints, shades and tones from a single colour and exports as download rather than pushing directly into a design tool
Best suited for: Designers building a consistent colour scale from one approved brand hex
How to Use the Tint and Shade Generator
Enter any HEX color code or use the color picker. The generator instantly produces 10 tints (progressively lighter, mixing the color with white) and 10 shades (progressively darker, mixing with black), plus your base color in the center.
Click any swatch to copy its HEX code to your clipboard. Hover over a swatch to see the code before copying. Use Copy CSS Variables to download a complete Tailwind-compatible color scale ready to paste into any CSS project.
A tint is created by mixing the color with white, increasing the proportion of white with each step. A shade is created by mixing with black. A tone mixes with grey. This generator produces pure tints and shades.
Design systems use color scales to define all available variants of a brand color: lightest tints for page backgrounds, mid tints for hover states and borders, the base for buttons and accents, and dark shades for text. Tailwind CSS follows this convention with its 50 to 950 scale naming, which this tool matches.
Advertisement
Frequently Asked Questions
Building a Scale From One Colour
Tints and shades are how a single brand colour becomes a usable scale for backgrounds, borders and states. The functions that generate these adjustments in modern CSS are documented in the MDN colour value reference.