Tint and Shade Generator
Generate a complete tint and shade scale from any color with WCAG contrast ratios on every swatch. Export as CSS variables, Tailwind config, SCSS map or JSON. No sign-up, fully free.
Tint and Shade Generator
Rate this tool
WCAG contrast, Tailwind scale, CSS export and live UI preview — all free
Every other tint and shade generator gives you colored swatches and lets you copy HEX codes. This one adds WCAG contrast ratios (AA/AAA pass/fail) on every swatch, generates a Tailwind-compatible 50-950 numbered scale, exports ready-to-paste CSS variables, Tailwind config, SCSS maps and JSON, and shows a live UI component preview using your generated colors.
How to generate tints and shades
Tailwind CSS color scale naming convention
| Step | Character | Typical use in UI | Lightness (approx.) |
|---|---|---|---|
| 50 | Lightest tint | Page background, hover state of very light elements | ~95% |
| 100 | Very light | Subtle background, badge background, tag chip | ~90% |
| 200 | Light | Border color, divider, subtle card background | ~80% |
| 300 | Soft | Placeholder text color, disabled state | ~70% |
| 400 | Medium-light | Muted text, secondary icon | ~60% |
| 500 | Base / mid | Primary button, link color, accent | ~50% |
| 600 | Medium-dark | Hover state of primary button | ~40% |
| 700 | Dark | Active/pressed state, dark badge | ~30% |
| 800 | Very dark | Dark mode card background, strong emphasis | ~20% |
| 900 | Deep | Dark mode page background, dark sidebar | ~10% |
| 950 | Darkest shade | Near-black variant of the hue | ~5% |
LazyTools vs other tint and shade generators
| Feature | ⭐ LazyTools | maketintsandshades | colorkit.co | shadegenerator.com |
|---|---|---|---|---|
| Tint and shade generation | ✔ | ✔ | ✔ | ✔ |
| WCAG contrast on every swatch | ✔ AA + AAA | ✘ | ✘ | ✘ |
| Tailwind 50-950 scale | ✔ | ✔ | ✘ | ✘ |
| CSS + Tailwind + SCSS + JSON export | ✔ All 4 | CSS only | HEX only | HEX only |
| Live UI preview | ✔ | ✘ | ✘ | ✘ |
| No sign-up required | ✔ | ✔ | Account for saving | ✔ |
Tint and Shade Generator — Color Scales, WCAG Contrast and Design System Palettes
A tint and shade generator is an essential tool for designers and developers building consistent color systems. In color theory, a tint is created by mixing a base color with white (increasing lightness), while a shade is created by mixing with black (decreasing lightness). A tone mixes with grey. Together, tints and shades form a color scale — the foundation of any professional design system, from Tailwind CSS and Material Design to custom brand palettes.
What is the difference between a tint, a shade and a tone?
All three modify a color's lightness or saturation but through different means. A tint is a color mixed with white, making it lighter and more pastel. Adding white to pure blue produces light blue. A shade is a color mixed with black, making it darker and deeper. Adding black to pure blue produces navy. A tone is a color mixed with grey (both white and black), making it more muted or neutral. Tones are more sophisticated and complex than simple tints or shades because they simultaneously change both lightness and saturation. Most design systems use tints and shades rather than tones, because tints and shades keep the hue consistent and produce predictable, harmonious results across a scale.
What is WCAG contrast ratio and why does it matter?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors to ensure readability for people with visual impairments including color blindness. The standard has two levels: WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. The contrast ratio is calculated from the relative luminance of the two colors. Pure black (#000000) on pure white (#ffffff) has the maximum contrast ratio of 21:1. Tailwind's indigo-500 (#6366f1) on white has a ratio of approximately 4.47:1, just below AA for normal text — this is why dark text should use the 600 or 700 shades from the scale.
How to use a color scale in Tailwind CSS
Tailwind CSS uses a 11-step color scale from 50 (lightest) to 950 (darkest). To use a custom color in your Tailwind project, add it to the extend.colors section of your tailwind.config.js: the exported Tailwind format from this generator is ready to paste directly. Use lighter shades (50-200) for backgrounds, borders and subtle UI elements. Use mid shades (400-600) for interactive elements like buttons, links and badges. Use darker shades (700-950) for text on light backgrounds or for dark mode surfaces.
How to choose accessible colors from your scale
For text on a white background: typically the 600 shade or darker will pass WCAG AA for normal text, and 700 or darker for AAA. For text on a dark background: typically the 100 shade or lighter will pass. For UI components (buttons, form elements) that need a 3:1 contrast with their surroundings, the 400-500 range often works. The WCAG badges on each swatch in this generator show you exactly which pass and fail, so you can pick accessible colors without manual calculation.
CSS custom properties for color scales
The CSS variables export format produces a :root { } block with named custom properties. Using the naming convention --color-50 through --color-950 makes it easy to reference any shade consistently across your stylesheet: background-color: var(--color-100) for a light background, color: var(--color-700) for readable text. This approach also makes dark mode theming simple — override the variables in a @media (prefers-color-scheme: dark) block to swap your palette without touching component styles.