Tint & Shade Generator
Generate a full 50–950 color scale from any base color. Export as CSS custom properties, Tailwind config, or SCSS variables.
--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;
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.
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.