Shades, Tints & Tones Generator

What are shades, tints, and tones?

Shades, tints, and tones are the three classic ways to build a color scale from a single starting hue. A shade is your base color mixed with black, so it gets darker while keeping the same hue. A tint is your base color mixed with white, so it gets lighter and softer. A tone is your base color mixed with gray, which mutes it and lowers the saturation without changing the hue. This shades, tints and tones generator takes one color and produces all three scales at once, so you get a complete, ready-to-use palette in a single view instead of guessing values by hand.

Why does this matter? Real interfaces and brand systems are almost never a single flat color. You need a darker variant for a hover or pressed button state, a light variant for a card background or a disabled control, and a muted variant for borders, captions, and secondary text. Generating those from one base color keeps everything visually consistent and saves you from eyeballing dozens of hex codes.

How to use it

1. Set your base color — type a HEX value, paste an RGB triple like 255, 111, 97, or tap the swatch to use the native color picker.
2. The three scales — shades, tints, and tones — update instantly as you type.
3. Drag the Steps slider to make each scale coarser or finer (5 to 16 swatches).
4. Tap any swatch to copy its HEX, or use Copy row to grab a whole scale as a comma-separated list.
5. Paste the values into your CSS, design tool, or style guide. That's it — no sign-up, nothing to install.

The method behind it

Each swatch is a straight linear blend between your base color and a mix target, computed channel by channel in RGB. For a step amount t from 0 to 1, every channel becomes base + (target − base) × t. Shades blend toward black (0, 0, 0), tints blend toward white (255, 255, 255), and tones blend toward mid-gray (128, 128, 128). The first swatch in each row is always your untouched base color, and the rest are evenly spaced steps toward the target.

For example, take #3366cc, whose RGB is 51, 102, 204. Mixing it 10% toward black multiplies each channel by 0.9, giving roughly 46, 92, 184, or #2e5cb8 — a slightly darker shade with the same blue hue. Mix the same color 10% toward white and you nudge each channel up toward 255, producing a gentle tint instead. Because the math is a simple interpolation, the results are predictable and easy to reproduce in code.

Examples

• Coral base #ff6f61 → shade: 20% toward black gives about #cc594e, a deeper coral for a pressed button.
• Coral base #ff6f61 → tint: 30% toward white gives about #ff9a90, a soft coral for a card background.
• Blue base #3366cc → tone: 40% toward gray gives a muted slate-blue that works well for borders and captions.

Common use cases

• UI state colors: derive hover, active, and disabled variants of a button or link from one brand color.
• Brand palettes: expand a single brand color into a full light-to-dark swatch family for a style guide.
• CSS variables: generate a consistent set of --color-100 through --color-900 values for a design system.
• Backgrounds and surfaces: pick tints for subtle section backgrounds and shades for headers and footers.
• Muted accents: use tones for borders, dividers, placeholder text, and other quiet secondary elements.

Why use this one

Most color tools only give you shades and tints, leaving tones out entirely — yet tones are exactly what you reach for when a color feels too loud. This generator shows all three scales on one screen, lets you copy a single swatch or a whole row, recalculates instantly as you type, and runs completely client-side so your colors never leave the browser. It stays fast and works one-handed on a phone, so you get a usable palette in seconds and move on. Need to convert a swatch to RGB or HSL? Use the HEX to RGB Converter. Want to check a shade is readable as text? Try the Contrast Checker.

Frequently asked questions