Tint & Shade Generator
Generate a complete color scale from any base color — tints mixed with white and shades mixed with black. Choose 5, 8, 10, or 12 steps per side, click any swatch to copy its HEX code, and export the full palette as CSS variables, a Tailwind CSS config object, or a plain HEX list. No signup required.
Enter any base color to instantly generate tints (mixed with white) and shades (mixed with black). Click any swatch to copy its HEX code. Export as CSS variables, Tailwind config, or a plain HEX list — all processed locally in your browser.
#3B82F6 · rgb(59, 130, 246) · hsl(217, 91%, 60%)
Quick Presets
Tints — mixed with white (10 steps)
Base Color
Shades — mixed with black (10 steps)
| Type | HEX | RGB | HSL |
|---|---|---|---|
| Tint 1 | #4D8DF7 | rgb(77, 141, 247) | hsl(217, 91%, 64%) |
| Tint 2 | #5F99F8 | rgb(95, 153, 248) | hsl(217, 92%, 67%) |
| Tint 3 | #70A4F8 | rgb(112, 164, 248) | hsl(217, 91%, 71%) |
| Tint 4 | #82AFF9 | rgb(130, 175, 249) | hsl(217, 91%, 74%) |
| Tint 5 | #94BBFA | rgb(148, 187, 250) | hsl(217, 91%, 78%) |
| Tint 6 | #A6C6FB | rgb(166, 198, 251) | hsl(217, 91%, 82%) |
| Tint 7 | #B8D2FC | rgb(184, 210, 252) | hsl(217, 92%, 85%) |
| Tint 8 | #CADDFD | rgb(202, 221, 253) | hsl(218, 93%, 89%) |
| Tint 9 | #DBE8FD | rgb(219, 232, 253) | hsl(217, 89%, 93%) |
| Tint 10 | #EDF4FE | rgb(237, 244, 254) | hsl(215, 89%, 96%) |
| Base | #3B82F6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) |
| Shade 1 | #3676E0 | rgb(54, 118, 224) | hsl(217, 73%, 55%) |
| Shade 2 | #306AC9 | rgb(48, 106, 201) | hsl(217, 61%, 49%) |
| Shade 3 | #2B5FB3 | rgb(43, 95, 179) | hsl(217, 61%, 44%) |
| Shade 4 | #26539D | rgb(38, 83, 157) | hsl(217, 61%, 38%) |
| Shade 5 | #204786 | rgb(32, 71, 134) | hsl(217, 61%, 33%) |
| Shade 6 | #1B3B70 | rgb(27, 59, 112) | hsl(217, 61%, 27%) |
| Shade 7 | #152F59 | rgb(21, 47, 89) | hsl(217, 62%, 22%) |
| Shade 8 | #102343 | rgb(16, 35, 67) | hsl(218, 61%, 16%) |
| Shade 9 | #0B182D | rgb(11, 24, 45) | hsl(217, 61%, 11%) |
| Shade 10 | #050C16 | rgb(5, 12, 22) | hsl(215, 63%, 5%) |
:root {
--color-tint-1: #4d8df7;
--color-tint-2: #5f99f8;
--color-tint-3: #70a4f8;
--color-tint-4: #82aff9;
--color-tint-5: #94bbfa;
--color-tint-6: #a6c6fb;
--color-tint-7: #b8d2fc;
--color-tint-8: #caddfd;
--color-tint-9: #dbe8fd;
--color-tint-10: #edf4fe;
--color-base: #3b82f6;
--color-shade-1: #3676e0;
--color-shade-2: #306ac9;
--color-shade-3: #2b5fb3;
--color-shade-4: #26539d;
--color-shade-5: #204786;
--color-shade-6: #1b3b70;
--color-shade-7: #152f59;
--color-shade-8: #102343;
--color-shade-9: #0b182d;
--color-shade-10: #050c16;
}All tint and shade generation runs 100% locally in your browser — your color data is never sent to any server. Tints are created by linearly interpolating between the base color and white; shades by interpolating between the base color and black.
Why Use Our Tint & Shade Generator?
Instant Tint & Shade Generation
The tint and shade generator updates your entire palette on every color change with zero lag. Click any swatch to copy its HEX code instantly — no button to click.
Secure & 100% Private
All tint and shade generation runs entirely in your browser. Your color data is never sent to any server — safe for unreleased brand colors and confidential design systems.
Export as CSS Variables, Tailwind Config, or HEX List
Export your generated palette in three formats: CSS custom properties (:root { --color-tint-1: ... }), Tailwind CSS config object, or a plain HEX list. Configurable variable name and step count (5, 8, 10, or 12 steps).
100% Free — No Signup Required
Completely free with no account, no premium tier, no usage limits, and no ads blocking the interface. Generate tints and shades as many times as you need.
Common Use Cases for Tint & Shade Generator
Design System Color Scales
Design system engineers use the tint and shade generator to build complete color scales for component libraries. Export directly as CSS variables or Tailwind config to integrate into your design token pipeline.
Brand Color Palette Expansion
Brand designers use the tint and shade generator to expand a single brand color into a full palette of lighter and darker variants — providing the range needed for backgrounds, borders, hover states, and text.
Figma & Sketch Color Libraries
UI designers use the tint and shade generator to create color libraries in Figma and Sketch. Copy the HEX codes from the swatch table and paste them directly into your design tool's color styles.
E-commerce & Marketing Sites
Web developers use the tint and shade generator to create hover states, active states, and background variants from a single brand color — ensuring visual consistency across product pages and landing pages.
Dark Mode Color Adaptation
Developers building dark mode themes use the tint and shade generator to find appropriate lighter variants of their base colors for dark backgrounds — ensuring sufficient contrast without changing the brand hue.
Tailwind CSS Custom Colors
Tailwind CSS developers use the tint and shade generator to create custom color scales that match Tailwind's 50–900 naming convention. Export directly as a Tailwind config object and paste into tailwind.config.js.
Understanding Tints and Shades
What are Tints and Shades?
In color theory, a tint is a color mixed with white, making it lighter and less saturated. A shade is a color mixed with black, making it darker and more saturated. Together, tints and shades form a color scale — a range of values from near-white to near-black that all share the same hue as the base color. Color scales are the foundation of modern design systems: they provide the full range of values needed for backgrounds, borders, text, hover states, and focus indicators while maintaining visual consistency. Our browser-based tint and shade generator creates these scales instantly from any base color using linear RGB interpolation.
How Our Tint & Shade Generator Works
- Enter Your Base Color: Type a HEX value (e.g.
#3b82f6) or RGB value into the color input, or use the native color picker. You can also select a preset color to get started quickly. - Choose Step Count: Select 5, 8, 10, or 12 steps per side. More steps give you finer granularity for complex design systems; fewer steps are better for simple palettes. The tint and shade generator updates the palette instantly on every change.
- Copy or Export: Click any swatch to copy its HEX code. Use the Export panel to copy the full palette as CSS custom properties, a Tailwind CSS config object, or a plain HEX list — with a configurable variable name.
How Tints and Shades Are Calculated
- Tint Formula: Each tint is calculated by linearly interpolating between the base color and white (RGB 255, 255, 255). A tint at ratio r = base × r + white × (1 − r). The lightest tint has the smallest r value (closest to white); the darkest tint has the largest r value (closest to the base).
- Shade Formula: Each shade is calculated by linearly interpolating between the base color and black (RGB 0, 0, 0). A shade at ratio r = base × r. The lightest shade has the largest r value (closest to the base); the darkest shade has the smallest r value (closest to black).
- Step Distribution: Steps are evenly distributed between the base color and white/black, excluding the pure endpoints. This ensures the palette has consistent visual spacing between each step.
- Output Formats: HEX, RGB, and HSL values are provided for every swatch. The HSL representation is useful for understanding how lightness changes across the scale while hue and saturation remain approximately constant.
Tints vs. Shades vs. Tones
A tint adds white to a color (increases lightness, decreases saturation). A shade adds black to a color (decreases lightness, may increase or decrease saturation). A tone adds gray to a color (decreases saturation without changing lightness as dramatically). Our tint and shade generator focuses on tints and shades — the most commonly needed variants in UI design systems. For tone generation, use the Color Mixer tool to blend your base color with a neutral gray.
Related Tools
Color Picker & Converter
Visual color picker with HEX, RGB, HSL, HSV, CMYK, HWB, and CIE LAB conversion. Bidirectional inputs, WCAG contrast checker, CSS variable output — free online color picker converter.
Color Name Finder
Enter any HEX or RGB color and instantly find the closest named color from 300+ CSS, X11, and Pantone color names. Search by name or browse the full database — free online color name finder.
Color Contrast Checker
Calculate WCAG 2.1 contrast ratio and check AA/AAA compliance for normal text, large text, and UI components — live preview, HEX and RGB input. Free online color contrast checker.
Color Difference Calculator (ΔE 2000)
Calculate the perceptual color difference (ΔE 2000 / CIEDE2000) between any two colors — enter HEX or RGB values and get the Delta-E score with a visual comparison and CIE L*a*b* breakdown. Free online color difference calculator.
Frequently Asked Questions About Tint & Shade Generator
A tint and shade generator creates a range of lighter (tints) and darker (shades) variants from a single base color. Tints are created by mixing the base color with white; shades by mixing with black. The result is a complete color scale suitable for design systems, UI components, and brand palettes. All processing runs locally in your browser.
A tint is a color mixed with white — it becomes lighter and less saturated. A shade is a color mixed with black — it becomes darker. A tone (not generated here) is a color mixed with gray. In UI design, tints are used for backgrounds and hover states; shades are used for borders, text, and pressed states.
Tints are calculated by linearly interpolating between the base color and white (RGB 255, 255, 255). Shades are calculated by linearly interpolating between the base color and black (RGB 0, 0, 0). Steps are evenly distributed between the base and the endpoint, excluding the pure endpoints themselves.
10 steps is the most common choice — it matches Tailwind CSS's color scale (100–900 with a 50 variant). Use 5 steps for simple palettes with fewer variants. Use 12 steps for complex design systems that need fine-grained control over every UI state.
Yes. Select "Tailwind Config" in the Export panel and set your variable name (e.g. "brand"). The generator outputs a Tailwind CSS config object with numeric keys (100, 200, 300… for tints and 600, 700, 800… for shades) that you can paste directly into your tailwind.config.js or tailwind.config.ts file.
Yes. Select "CSS Variables" in the Export panel. The generator outputs a :root { } block with CSS custom properties named --[varname]-tint-1 through --[varname]-tint-N, --[varname]-base, and --[varname]-shade-1 through --[varname]-shade-N. You can customise the variable name prefix.
Absolutely. All tint and shade generation runs 100% client-side in your browser. No color data is ever sent to any server and nothing leaves your device — safe for unreleased brand colors and confidential design system work.
The tint and shade generator accepts HEX colors (#RGB, #RRGGBB) and RGB/RGBA values (rgb(r,g,b) and rgba(r,g,b,a)). You can also use the native color picker to select any color visually. The output is provided in HEX, RGB, and HSL for every swatch.
Yes. The tint and shade generator is 100% free with no signup required, no premium tier, no usage quotas, and no ads blocking the interface. Generate palettes as many times as you need, directly in your browser.