Tint & Shade Generator
Generate an 11-step Tailwind-style color scale (50–950) from one base color and export it as CSS, Tailwind, or SCSS.
Runs 100% in your browser
Shortcuts
- Copy the output
- Alt + Shift + C
Your input is saved in this browser only. Reset clears it.
--brand-50: #f0f6fe; --brand-100: #dde9fd; --brand-200: #b6d0fc; --brand-300: #7babf9; --brand-400: #4689f6; --brand-500: #0b64f4; --brand-600: #0950c3; --brand-700: #073c92; --brand-800: #052a66; --brand-900: #031a3f; --brand-950: #021027;
How to use the Tint & Shade Generator
-
Pick a base color or type its hex value.
-
Review the 50–950 scale and click any swatch to copy it.
-
Name the variable and export the scale as CSS, Tailwind, or SCSS.
Example: A full scale from one brand color
#3366cc brand
--brand-50: #f3f6fc; --brand-100: #e2eaf8; --brand-200: #c2d1f0; --brand-300: #91ace3; --brand-400: #648bd8; --brand-500: #3366cc; --brand-600: #2952a3; --brand-700: #1f3d7a; --brand-800: #152b56; --brand-900: #0d1b35; --brand-950: #081021;
Use the light steps for surfaces, the middle for borders, and the dark ones for text and hover states.
Frequently Asked Questions
What is the difference between a tint and a shade?
A tint is a color mixed with white, so it's lighter and usually less saturated. A shade is mixed with black, so it's darker. A full scale from tints through the base color to shades gives you backgrounds, borders, text, and hover states from a single hue.
Why do color scales use numbers like 50 to 950?
It's the convention Tailwind popularized: 50 is nearly white, 500 is around the base color, and 950 is nearly black. Numbered steps let you name intent ("surface uses 100, text uses 800") without hardcoding hex values, and they make swapping a palette straightforward.
Which step should I use for text and which for backgrounds?
On a light theme, 50–100 works for surfaces, 200–300 for borders, 600–800 for text and icons, and 500–700 for primary buttons. Always confirm the specific pair with a contrast check, since the same step can pass on one hue and fail on another.
How do I use the exported scale in my project?
Export as CSS custom properties and paste them into your :root block, then reference them through role tokens such as --color-primary. The Tailwind export slots into the colors section of your theme, and the SCSS export gives you variables for older build setups.
About the Tint & Shade Generator
Every design system needs a well-balanced color scale. This tool takes your brand color and generates a Tailwind-style 11-step palette — from the lightest tint (50) to the deepest shade (950) — ready to drop straight into your CSS, Tailwind config, or SCSS.
Step 3 of How to Create a Website Color Palette in 5 Steps shows how tint and shade scales turn into CSS variables for a real palette.
How the Scale Works
The scale follows the same lightness stops used by Tailwind CSS's default palette: step 50 is an almost-white tint, step 500 sits near the midpoint, and step 950 is a near-black shade. Your base color's hue and saturation are preserved throughout — only the lightness changes.
| Step | Lightness | Typical use |
|---|---|---|
| 50 | ~97% | Page backgrounds, subtle highlights |
| 100–200 | ~85–93% | Hover states, input backgrounds |
| 300–400 | ~62–73% | Borders, disabled elements |
| 500 | ~50% | Primary buttons, icons (close to base) |
| 600–700 | ~30–40% | Hover/active states on buttons |
| 800–900 | ~13–21% | Dark text, deep backgrounds |
| 950 | ~8% | Near-black, darkest text |
Export Formats
CSS Variables
Copy as --brand-500: #3b82f6 custom properties, ready to use in any modern CSS project.
Tailwind Config
Paste directly into your tailwind.config.js colors object and use with utility classes immediately.
SCSS Variables
Export as $brand-500: #3b82f6 for SCSS-based projects and component libraries.
Pro Tip
Set your variable name to match your brand token (e.g. primary, accent). Then use steps like 100 for subtle backgrounds, 500 for interactive elements, and 800 for readable text on light backgrounds.