Online Tool Store
· 5 min read
How to Build a Tint and Shade Scale From One Color
Manesh Jayawardhana
CIO & Co-founder
You’ve been handed one hex code — the brand blue, #2563EB — and asked to build an interface with it. But an interface needs more than one blue. You need a lighter one for hover states, a much lighter one for backgrounds, a darker one for pressed buttons, and something in between for borders.
Picking those by eye in a color picker is how you end up with nine blues that don’t look like they belong to each other, three of which fail contrast checks against white text.
What tints and shades actually are
A tint is your color mixed toward white. A shade is the same color mixed toward black. A tone mixes toward grey. Together they form a ramp: a sequence of related colors that all trace back to the same hue.
The naive way to build one is to lighten and darken in equal steps. That works mathematically and often looks wrong, because human perception of lightness isn’t linear. Equal numeric steps in RGB produce ramps that bunch up in the middle and flatten at the ends.
The other complication is that pure lightness changes can make a color look washed out or muddy. Well-built ramps usually adjust saturation slightly as they go — a little more saturation in the mid-range, a little less at the extremes — which is why a hand-tuned ramp tends to beat a purely mechanical one.
Why people get stuck here
- Inconsistent step sizes. Eyeballing each step gives you a ramp where 300 to 400 is a huge jump and 600 to 700 is barely visible.
- Hue drift. Naive darkening in some color spaces shifts the hue, so your dark blue arrives slightly purple.
- No contrast planning. You discover at QA that your button text fails accessibility against three of your five shades.
- Too many steps. A ramp with fifteen entries means nobody knows which one to use, and the design system stops being a system.
- One ramp for everything. Neutrals, brand colors, and status colors have different jobs and usually need different step distributions.
What a good color ramp looks like
Predictable steps with useful names
Nine or ten steps, numbered — 50, 100, 200 through 900 — is a widely used convention, and it works because the number tells you roughly how dark the color is without opening anything.
Contrast checkpoints built in
You should know which steps are safe for text on white, which are safe as backgrounds for white text, and which are decorative only. Two or three checkpoints in the ramp are enough to make it usable without a contrast check on every decision.
Consistent hue
Every step should read as the same color family. If step 900 looks like a different hue from step 100, the ramp will make your interface feel unstable even if nobody can articulate why.
| Ramp Position | Typical Use | Contrast Note |
|---|---|---|
| 50–200 | Page and card backgrounds | Too light for text on white |
| 300–500 | Borders, dividers, icons | Check before using for body text |
| 600–700 | Primary buttons, links | Usually safe for white text |
| 800–900 | Text, headings, pressed states | Safe on light backgrounds |
Always verify with an actual contrast checker rather than trusting position in the ramp.
Common mistakes to avoid
- Building the ramp before choosing the base. Decide which step your brand color occupies first — usually 500 or 600 — then build outward.
- Using pure white and pure black as the endpoints. A ramp that terminates in
#FFFFFFand#000000loses its identity at both ends. - Skipping the mid-tones. The 300 and 400 steps are the ones you’ll actually reach for most often for borders and secondary UI.
- Not testing on a dark background. A ramp designed for light mode often inverts badly.
- Generating a ramp per component. One ramp, referenced everywhere, is the entire point.
How to do it with Color Shades Generator
Online Tool Store’s Color Shades Generator builds a tints-and-shades scale from a single color, entirely in your browser.
- Paste in your base color as a hex value.
- Generate the scale and look at it as a whole strip before judging any individual step.
- Identify which step your original color landed on, and check that it’s where you want it in the ramp.
- Run the steps you plan to use for text through a contrast checker before committing to them.
- Copy the values out into your CSS custom properties or design tokens with the step numbers preserved in the names.
- View the ramp against both a white and a dark background to catch steps that only work in one mode.
The Contrast Ratio Checker, the Accessible Palette Suggester, and the Design Token Exporter cover the steps on either side of this one.
Frequently asked questions
How many shades do I actually need?
Nine or ten covers almost every interface need without becoming unmanageable. Fewer than five and you’ll run out of options for hover and pressed states; more than twelve and nobody can tell adjacent steps apart anyway.
Should tints and shades be evenly spaced?
Numerically even spacing rarely looks evenly spaced. Most usable ramps compress the steps near the middle where the eye is more sensitive and spread them out toward the extremes — which is why generated ramps often need a small manual nudge.
Can I use the same ramp for light and dark mode?
Usually you can reuse the values but swap which end you draw from — what’s a background in light mode becomes a text color in dark mode. What rarely works is using the identical step for the identical role in both modes.
Final thought
A ramp is a decision you make once so you don’t have to make it fifty times. Generate the scale, verify the two or three steps you’ll use for text, and then reference it everywhere instead of reaching for the color picker again.