Generate 10 tints and 10 shades of any color. Click any swatch to copy. Export as CSS variables.
Base Color:
Tints (lighter)
Base: #7C3AED
Shades (darker)
CSS Variables Preview
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.
Frequently Asked Questions
A tint is a color mixed with white, making it lighter. A shade is a color mixed with black, making it darker. A tone is a color mixed with grey. In design, tints and shades are used to create color scales for consistent UI components.
The easiest way is to use HSL format and increase the lightness value. Alternatively, use the tint generator to find the exact lighter HEX value you need and use it as a CSS color or custom property in your stylesheet.
A color scale is a set of tints and shades of a single hue, typically 9 or 10 steps from very light to very dark. Design systems like Tailwind CSS use color scales to provide consistent options for backgrounds, borders, text, and interactive states.
Tailwind uses numeric suffixes from 50 (lightest) to 950 (darkest), with 500 typically being the base color. The CSS variables output from this tool matches the Tailwind naming convention so you can use it directly in Tailwind-compatible projects.
Pick your base color, then use this generator to produce a full tint and shade range. Select 3 to 5 steps across the scale for a practical monochromatic palette. Lighter tints work for backgrounds; darker shades work for text and borders.