Tints & Shades
Pick any colour and get a full 50–950 scale — ready to drop into CSS or Tailwind.
Your colour scale — click any swatch to copy its hex
Download your scale
// tailwind.config.js — add inside theme.extend.colors
'blue': {
'50': '#EEF0F3',
'100': '#D8DFEB',
'200': '#BACAE5',
'300': '#94B3E6',
'400': '#689AEC',
'500': '#3B82F6',
'600': '#1865E4',
'700': '#1C52A9',
'800': '#1C3D74',
'900': '#172A48',
'950': '#111C2E'
},
Use 500 as your brand colour
The 500 step is your exact input colour. 400–300 for hover states, 600–700 for pressed states.
50–100 for subtle backgrounds
Very light tints work perfectly for card backgrounds, hover highlights, and alert banners.
Check contrast before using
Always verify text+background pairs with a contrast checker — especially for 300–700 range text.
More Color Tools
Continue exploring — all tools are free, no sign-up needed
Mixing Lab
Mix and blend colours to create the perfect shade
Image → Palette
Extract a harmonious palette from any photo
Contrast Checker
Verify WCAG AA / AAA accessibility in seconds
Gradient Generator
Design linear, radial & conic CSS gradients
Colour Blindness Simulator
Preview palettes as seen by colour-blind users
About this tool
Tints & Shades Generator
Turn one brand color into a full design system scale in seconds
Every professional design system is built on color scales, not single values. Tailwind CSS uses an 11-step scale from 50 to 950. Material Design uses tone maps. Every UI component library ships with a range of tints and shades for hover states, backgrounds, borders, and text. This generator takes any hex color and produces a complete, perceptually smooth scale in that exact format — ready to paste directly into your project.
What is the Tints & Shades Generator?
The Tints & Shades Generator takes any input hex color and creates 11 values following the same perceptual lightness curve used by Tailwind CSS's built-in palette. Each step represents an approximately equal visual jump in lightness, so the scale feels consistent and professional rather than random. The output includes individual hex values, a complete CSS custom properties block, and a ready-to-paste tailwind.config.js object.
How to Use It
Enter your brand color
Type or paste any hex code into the input field. This is your base value — typically your primary brand color at its standard weight (what Tailwind calls the 500 level).
Preview the full scale
The generator instantly shows all 11 steps from 50 (near-white tint) through 950 (near-black shade). Each swatch displays the hex value on hover.
Copy individual values
Click any swatch to copy that specific hex value. Use the lightest values for backgrounds, mid-range for interactive elements, and dark values for text.
Export for your stack
Use "Copy CSS Variables" for a :root block with all 11 values, or "Copy Tailwind Config" for a formatted object ready to add to tailwind.config.js under theme.extend.colors.
When to Use This Tool
Practical Examples
Adding a Brand Blue to Tailwind CSS
Your designer specifies #2563EB as the brand primary. Generate the full scale and add it to Tailwind as "brand" — now you have bg-brand-50 through bg-brand-950 available as utility classes throughout your project.
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#EFF6FF',
100: '#DBEAFE',
200: '#BFDBFE',
300: '#93C5FD',
400: '#60A5FA',
500: '#3B82F6',
600: '#2563EB', // ← your base
700: '#1D4ED8',
800: '#1E40AF',
900: '#1E3A8A',
950: '#172554',
},
},
},
},
}CSS Variables for a Design System
For a framework-agnostic design system, export the scale as CSS custom properties. Reference them semantically across your component library — the scale handles every state from subtle background to pressed button.
:root {
--brand-50: #EFF6FF;
--brand-100: #DBEAFE;
--brand-200: #BFDBFE;
--brand-500: #3B82F6;
--brand-600: #2563EB;
--brand-700: #1D4ED8;
--brand-900: #1E3A8A;
}
/* Usage */
.button-primary { background: var(--brand-600); }
.button-primary:hover { background: var(--brand-700); }
.button-primary-ghost { background: var(--brand-50); color: var(--brand-700); }Related Tools
Useful For These Projects
Frequently Asked Questions
What is the difference between a tint and a shade?
A tint is created by mixing a color with white, making it lighter and less saturated. A shade is created by mixing with black, making it darker and deeper. A complete scale includes both, giving you the full range from near-white tint to near-black shade.
Why use an 11-step scale (50–950) instead of just light, medium, dark?
An 11-step scale gives you precise control for every UI context: 50–100 for very subtle backgrounds, 200–300 for borders, 400 for secondary icons, 500 for the primary color, 600 for pressed states, 700–800 for text, and 900–950 for the deepest surfaces. Three values is never enough for a real product.
How does this compare to Tailwind's built-in colors?
This generator uses the same perceptual lightness algorithm as Tailwind's designers, so your custom brand scale will feel visually consistent alongside slate, blue, emerald, and other built-in colors. You can mix them freely in the same project.
Can I use the output in frameworks other than Tailwind?
Absolutely. The CSS variables export works in any project — vanilla CSS, SCSS, CSS-in-JS, or any framework. The hex values can be added to any design token system including Style Dictionary, Theo, or Figma Variables.
Which step in the scale should be my primary color?
Conventionally, your base brand color sits at the 500 level, with interactive states using 600 (default button), 700 (hover), and 800 (pressed). Background tints use 50–100, and text uses 700–900. This matches Tailwind's semantic convention and makes your scale predictable for other developers.