How to Use the Shade & Tint Generator
Learn how to turn one base color into a usable nine-step scale for backgrounds, borders, states, and emphasis.
The Shade & Tint Generator becomes most useful when you stop seeing it as a color toy and start treating it as a role builder. One base color can support far more of a design once you understand which method and intensity create the kind of movement your interface actually needs.
Start here
When to use this tool
You already trust a base color and need lighter and darker versions for real interface roles.
You want a calmer way to build hover, active, background, and border variants without guessing every value manually.
You need to compare a more even HSL-style scale with a more mix-based tonal scale.
Understand the interface
Annotated control map
Annotated mockup
These simplified interface blocks mirror the real controls on the live tool so you can understand what each box or button is responsible for before you start clicking around.
Base HEX
Base color picker
Generation method
Scale intensity
Tone cards
Copy button
Use as base
Nine-step scale structure
Control 1
Base HEX
Purpose
Defines the starting color for the whole scale.
What happens when you use it
A valid base color becomes the center of the generated tone scale, with tints above it and shades below it.
When to use it
Use a base color that already feels trustworthy enough to deserve variants, such as a brand or product color.
Control 2
Base color picker
Purpose
Lets you choose the starting color visually.
What happens when you use it
The picker applies a confirmed color back into the Base HEX field and regenerates the whole scale from that value.
When to use it
Useful when you want to tune the base slightly before committing to a full set of derived tones.
Control 3
Generation method
Purpose
Changes how the scale is created.
What happens when you use it
HSL lightness creates more even tonal movement, while White/black mix produces a more paint-like blend behavior.
When to use it
Compare both when the scale is either too synthetic or too muddy and you want a different tonal character.
Control 4
Scale intensity
Purpose
Controls how far the tones move away from the base color.
What happens when you use it
Subtle stays close to the base, Balanced gives more range, and Strong pushes the tints and shades further apart.
When to use it
Use Subtle for restrained systems, Balanced for most UI work, and Strong when the base color needs larger tonal jumps.
Control 5
Tone cards
Purpose
Show every generated tint, base, and shade in the scale.
What happens when you use it
Each card gives you the hex, a role hint, and the visual tone itself so you can judge the scale as a usable system instead of isolated numbers.
When to use it
Use the cards to choose candidate tones for surfaces, accents, borders, or emphasis before copying anything.
Control 6
Copy button
Purpose
Copies one tone quickly.
What happens when you use it
This lets you extract only the tone that fits the role you have in mind instead of manually copying the whole scale.
When to use it
Use it after you have decided which role that tone will play.
Control 7
Use as base
Purpose
Promotes one generated tone into a new starting point.
What happens when you use it
This is useful when a generated variant turns out to be a better anchor than the original base color.
When to use it
Use it when one tint or shade feels more practical as the real center of the system than the original color.
Watch for: Promoting a tone to the new base rebuilds the scale around that tone, so the old relationships change.
Control 8
Nine-step scale structure
Purpose
Organizes the output into lighter and darker roles around the base.
What happens when you use it
The layout makes it easier to see where the base sits, which tones are likely surface candidates, and which ones are heavy enough for emphasis.
When to use it
Read the scale structurally before picking colors. The relative positions matter as much as the individual swatches.
Follow this flow
Step-by-step instructions
Choose a base color worth building around
Start with a color that already feels right in the product or brand context. The tool can generate useful relatives, but it cannot rescue a weak anchor color.
Compare the two generation methods early
Switch between HSL lightness and White/black mix before you commit. The method can change the personality of the entire scale.
Set the intensity based on how wide a role range you need
If the scale is only for subtle UI support, stay closer to the base. If the scale must carry backgrounds, borders, and strong accents, give it more range.
Read the tone cards as roles, not just swatches
Look for the tones that could become quiet surfaces, structural borders, button fills, or strong anchors instead of treating every step as equally useful.
Promote a stronger tone to the base if necessary
Sometimes a generated shade or tint is actually the color the system wanted all along. Use as base lets you rebuild around that better anchor.
Copy the tones that survive contrast and role testing
Once the scale looks promising, move the best candidates into Contrast Checker or implementation rather than assuming every step is production-ready.
Real usage
Example: turn one brand accent into a usable interface scale
You have a single product accent color, but the interface also needs surface tints, borders, hover states, and deeper emphasis tones.
Enter the brand accent as the base color.
This gives the scale a real anchor instead of a hypothetical starting point.
Check HSL lightness first.
For many interface systems, the more even tonal movement makes the scale easier to reason about quickly.
Set intensity to Balanced.
Balanced is usually a good middle ground when the scale needs both subtle support roles and a few stronger tones.
Identify one light surface tone, one middle structural tone, and one darker emphasis tone.
This keeps the scale focused on real UI use instead of trying to justify every generated step equally.
Promote a darker tone to the base if the original accent was too light to anchor the system.
This can make the whole scale more practical without abandoning the color family.
Result: You end up with a scale that supports multiple interface roles instead of one isolated brand color that does not know how to behave elsewhere.
Avoid this
Common mistakes
Assuming every tone is equally useful
Some steps are naturally better for surfaces, some for structure, and some for emphasis. The scale is a toolkit, not a requirement list.
Skipping method comparison
If the scale feels strange, the issue may not be the base color. The generation method might simply be the wrong tonal model for the job.
Using a light tint as text without checking contrast
Tints often work beautifully as backgrounds but fail badly as readable text or interface labels.
If something feels off
Troubleshooting and confusing cases
The tints look washed out
Problem: The chosen method and intensity are pushing the scale toward very pale values that lose too much visual strength.
What to do: Reduce the intensity or compare the alternate generation method to see if it produces sturdier light tones.
The shades feel too harsh
Problem: The darker end of the scale is moving too far away from the base color’s usable personality.
What to do: Use a subtler intensity or promote a darker, calmer tone to be the new base before regenerating.
I do not know which tone should become the button color
Problem: Several middle steps look plausible, but it is hard to choose without context.
What to do: Pick the most promising candidates and test them in Contrast Checker with the actual text color you expect to use.
FAQ
Questions people usually ask next
Which method is better for UI work?
HSL lightness is often easier to reason about, but White/black mix can feel more natural in some color families. Compare both against the actual roles you need.
Should I keep the original base if a generated shade looks better?
No. If a generated tone is clearly a better anchor, use it as the new base and rebuild the scale around the stronger foundation.
How many tones from the scale do I really need?
Often only a handful. The point of the scale is optional range, not forcing every step into production use.
Can this replace neutral colors in a system?
Usually not. It is best used alongside neutrals, not as a replacement for them.