Designing a modern user interface requires more than just a handful of primary brand colors. To handle hover states, borders, card backgrounds, disabled text, and dark mode variations, you need a complete color scale.
A color scale provides a cohesive spectrum derived from a single seed color. Instead of choosing arbitrary hex codes that "feel close enough," developers construct these scales using tints and shades — no sign-up, no account, completely free.
Build a Tint and Shade Color Scale
Tint and Shade Generator
Generate tints and shades of any color and export as CSS vars or Tailwind scale.
How to Use the Tint and Shade Generator
Step 1: Enter Your Seed Color
Paste your base brand color as a HEX value (e.g., #3B82F6) into the input field. This becomes your 500 mid-point value.
Step 2: Choose the Number of Steps
Select how many stops to generate. A standard 10-step scale (50 through 900) is most common in design systems.
Step 3: Review the Scale
The generator displays the full spectrum from lightest tint to darkest shade. Check for unwanted hue shifts.
Step 4: Copy or Export
Click any swatch to copy its HEX, or export the entire scale as CSS variables, a Tailwind config, or JSON.
What Is a Tint vs. a Shade vs. a Tone?
- Tints: Base color mixed with white — increases lightness, pulls toward white.
- Shades: Base color mixed with black — decreases lightness, pulls toward black.
- Tones: Base color mixed with gray — reduces saturation without dramatically shifting lightness.
In HSL space, generating steps scales the Lightness channel toward 100% (tints) or 0% (shades).
The Math Behind Color Scales
Linear interpolation between the base color and white or black:
$$\text{Tint}(p) = C_{\text{base}} \times (1 - p) + [255, 255, 255] \times p$$
$$\text{Shade}(p) = C_{\text{base}} \times (1 - p) + [0, 0, 0] \times p$$
Where $p$ (0 to 1) is the step percentage. Larger $p$ means lighter tints or darker shades.
Anatomy of a 50–900 UI Color Scale
| Scale Value | Color Role | Description | Source Type |
|---|---|---|---|
| 50 | Lightest Accent | Hover backgrounds, alert surfaces | Tint (~90% White) |
| 100 | Light Background | Disabled elements, panel backgrounds | Tint (~80% White) |
| 200 | Light Accent | Soft borders, focus rings | Tint (~60% White) |
| 300 | Muted Accent | Badges, secondary text | Tint (~40% White) |
| 400 | Light Primary | High contrast borders | Tint (~20% White) |
| 500 | Base Color | Primary buttons, brand icons | Original Seed |
| 600 | Hover State | Button hover | Shade (~15% Black) |
| 700 | Active / Pressed | Button active state | Shade (~30% Black) |
| 800 | High Contrast | Dark headers, backgrounds | Shade (~50% Black) |
| 900 | Darkest Accent | Ultra-dark text, dark overlays | Shade (~75% Black) |
Implementing Color Scales in CSS and Tailwind
CSS Custom Properties
:root {
--blue-50: #EFF6FF;
--blue-100: #DBEAFE;
--blue-500: #3B82F6; /* Base */
--blue-600: #2563EB;
--blue-700: #1D4ED8;
--blue-900: #1E3A8A;
}
.btn-primary {
background-color: var(--blue-500);
border: 1px solid var(--blue-600);
color: #ffffff;
}
.btn-primary:hover { background-color: var(--blue-600); }
.btn-primary:active { background-color: var(--blue-700); }
Tailwind CSS Extension
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#EFF6FF',
100: '#DBEAFE',
500: '#3B82F6', // Base
600: '#2563EB',
700: '#1D4ED8',
900: '#1E3A8A',
}
}
}
}
}
Using Scales for Dark Mode
A well-built scale makes dark mode almost automatic — light end for backgrounds in light mode, dark end in dark mode, and vice versa for text:
:root { --surface: var(--blue-50); --text: var(--blue-900); }
[data-theme="dark"] { --surface: var(--blue-900); --text: var(--blue-50); }
Privacy Note
FluxToolkit calculates all tints and shades locally in your browser using JavaScript. No hex codes, scale data, or export files are uploaded anywhere. Your design assets stay secure on your device.
Frequently Asked Questions
What is the difference between a tint and a shade?
A tint mixes the base color with white (lighter), while a shade mixes it with black (darker). A tone mixes with gray, reducing saturation.
How do I use scales for hover states?
Shift one scale step darker for hover and two steps for active. On dark themes, shift lighter instead.
Does the generator change the hue?
Linear RGB interpolation can cause subtle hue shifts in warm colors. If you see unwanted brownish dark shades, manually adjust saturation in HSL space.
Can I export to Figma?
Yes — copy the HEX list and paste into Figma manually or via plugins like Paletter or Variables Import.
Why do light tints look washed out?
Low-saturation seed colors produce gray-looking tints. Increase the seed color's saturation or manually boost the 100–300 range values.
Is my data stored by FluxToolkit?
No. All operations run client-side. Your selections never leave your device.
Generate Your Color Scale — No Sign-Up Needed
Build a professional design system color scale in seconds. Free, instant, no account required.
Related Articles
- Color Palette Generator: Cohesive Color Harmony — Generate complementary color schemes.
- CSS Color Formats: HEX, RGB, HSL Guide — Understand web color math.
- Color Contrast Checker: WCAG Audits — Verify your scale passes accessibility checks.