A single color is the seed; a tints and shades scale is the full harvest. For any brand or design system, having a complete range of tints (lighter versions) and shades (darker versions) of your core brand colors allows you to create depth, hierarchy, backgrounds, borders, hover states, and semantic variants from a coherent palette.
The Tints & Shades Generator creates a perceptually smooth 50–950 scale from any input color. Unlike a simple lightness interpolation, this generator uses perceptual color space calculations to ensure that each step in the scale feels like an equal visual jump — the same approach used by Tailwind's designers to create the built-in color system.
This tool is essential for design systems work: every color token in a professional design system is part of a scale, and those scales must be coherent across different brand colors. Generate your primary, secondary, and neutral brand colors as complete scales, and you have the foundation for any design token architecture.
What It Does
Enter any hex color and the Tints & Shades Generator produces 11 values in the Tailwind scale format: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. The scale is generated using perceptual color calculations to maintain consistent visual weight between steps. Export options include individual hex values, CSS custom properties (--color-50 through --color-950), and a complete Tailwind config object.
Who It's For
Design system engineers building token scales for component libraries, Tailwind CSS developers adding custom brand colors, brand designers creating comprehensive color specifications, and anyone building a UI that needs more than a single fixed color value for each brand color.
How to Use This Tool
- 1Open the Tints & Shades Generator
- 2Enter your brand color hex value
- 3View the full 50–950 scale
- 4Click individual swatches to copy hex values
- 5Use "Copy CSS Variables" or "Copy Tailwind Config" for the full scale
Related Tools
Useful For These Use Cases
Frequently Asked Questions
What is the difference between tints and shades?
A tint is created by mixing a color with white — it is a lighter version. A shade is created by mixing a color with black — it is a darker version. A complete scale includes both, from the lightest tint (50) to the deepest shade (950).
Why use a 50–950 scale instead of just light, medium, dark?
A granular 11-step scale gives you precise control over subtle variations in the same color: very light card backgrounds (50–100), hover states (200–300), borders (300–400), the primary color (500), interactive pressed states (600), text (700–800), and deep backgrounds (900–950). Without this scale, you either have too few options or an inconsistent set of ad-hoc values.
How do I create a monochromatic color scheme using tints and shades?
Use a single base color and generate its full tints/shades scale. Pick two to four values from across the scale for your design: a very light value for backgrounds, a medium value for borders or secondary elements, the base value for primary interactive elements, and a dark value for headings and high-emphasis text.
Can I use this tool for any CSS framework, not just Tailwind?
Yes — the CSS variables export works with any project. Tailwind config export is specifically formatted for tailwind.config.js, but the hex values can be used in any design system, CSS-in-JS, Sass variables, or design token file.
Ready to try it?
Free, no sign-up, no ads. Works instantly in your browser.
Open Tints and Shades Generator