Tint & Shade Generator
Generate a complete 50–900 color scale from any base color - just like Tailwind CSS. Click any swatch to copy its hex code.
Export Scale
:root {
--color-primary-50: #f7f7fe;
--color-primary-100: #ecedfd;
--color-primary-200: #dadafc;
--color-primary-300: #bcbdf9;
--color-primary-400: #9698f6;
--color-primary-500: #6366f1;
--color-primary-600: #5356ca;
--color-primary-700: #4345a4;
--color-primary-800: #303174;
--color-primary-900: #1c1d43;
}How to Use the Tint & Shade Generator
- 1.Enter any HEX color value in the input field or use the color picker to select your base color.
- 2.The tool instantly generates a 50–900 color scale - lighter tints at the top, darker shades at the bottom.
- 3.Click any swatch to copy its individual HEX code to your clipboard.
- 4.Use the Export section to copy the full scale as CSS variables, Tailwind config, or SCSS variables.
- 5.Paste the Tailwind config into
theme.extend.colorsto use your custom scale in your project.
What are Tints and Shades?
A tint is created by adding white to a color, progressively lightening it. A shade is created by adding black, progressively darkening it. Together, tints and shades form a continuous lightness ramp that gives designers a full vocabulary for any hue - from near-white background washes to near-black text tones. Design systems like Tailwind CSS, Material Design, and Ant Design use this pattern to define a 10-step palette (50, 100, 200 ... 900) for every brand color. The 500 value is usually the true base color, values below 500 are tints, and values above are shades. Having a complete scale ensures you always have a subtle background variant, a hover state, and a dark pressed state available, all harmoniously derived from your brand color.
Frequently Asked Questions
What does the 50–900 numbering mean?
It's a convention popularized by Tailwind CSS. 50 is the lightest tint (nearly white), 900 is the darkest shade (nearly black), and 500 represents the pure, unmodified base color. The scale gives you 10 usable steps for any hue.
How does this differ from opacity?
Opacity changes transparency, not the color itself - the underlying element or background shows through. Tints and shades produce fully opaque colors by blending with white or black, which means they look consistent on any background.
Can I export the scale for design tools like Figma?
Copy the HEX codes from each swatch and import them into Figma as local styles. You can also export as CSS variables and reference them in Figma's Tokens Studio plugin for full design-token integration.
Is the WCAG contrast ratio maintained across the scale?
Not automatically - but lighter tints (50–200) are generally safe for backgrounds with dark text, and darker shades (700–900) work for text on light backgrounds. Use the Color Blindness Simulator to verify your combinations.