Color
Tints & Shades
Tints and shades are a single color expanded into a series of brightness steps, from a light tint made with white to a dark shade made with black.
Definition
Tints and shades are what you get when you take a single color and spread it out into several steps of brightness. A common setup labels the lightest step 50 and the darkest 900, filling in the gaps at even intervals like 100, 200, and so on. Steps made lighter by mixing in white are called tints; steps made darker by mixing in black are called shades. The whole point is that once you prepare one color at several brightness levels ahead of time, you can pick the right intensity for the situation while staying within the same color family. That is why, in practice, we define a color not as a single point but as a scale.
Why does it matter?
Steps matter because a single color on its own simply cannot build a real interface. A screen holds a very faint background, a subtle divider, sharp text, and a strong button all at once, and no one color can cover all of those jobs. When the steps are decided in advance, you just follow the rules and pick the intensity that fits each spot, instead of improvising a calculation every time you reach for a color. This does more than speed up how fast you build a screen: it also keeps colors from scattering in every direction when several people work together. A well-built brightness scale ties the tone of the whole screen together, and it makes swapping the entire scale in one move possible when you later need to change your brand color.
Common mistakes
- Lightening or darkening a color on the spot whenever you happen to need it. When intensities made without any rule pile up screen by screen, you end up with dozens of similar-but-slightly-different colors, losing consistency and making the whole thing impossible to manage.
- Eyeballing the brightness gaps between steps. The human eye perceives changes differently on the light end and the dark end, so if you split the numbers evenly, some ranges look almost identical while others jump out, leaving the staircase uneven.
- Making far more steps than you need. Even if you stock a dense set from 50 to 900, teams often use only a handful in practice, and the unused steps just make it harder to decide which one to pick.
Practical tips
- Define color as a scale, not a single value. Use it as your baseline that backgrounds want light tones (50 to 100), borders want mid tones (200 to 300), and text and buttons want dark tones (600 to 800), and you can decide which step goes where without agonizing over it.
- When building the steps, keep the hue fixed and adjust only saturation and lightness in a regular way. If the hue drifts, the light steps and dark steps start to look like different colors, and the sense that they belong to one family falls apart.
- When you pair a dark step and a light step as text and background, always check that they pass a contrast standard. When the steps are densely packed, two adjacent ones may not have enough contrast between them.
Ask your AI
My brand's main color is [hex — e.g. #3B82F6], but I need it as a scale, not a single point. Expand it into 10 steps from 50 (the lightest tint) to 900 (the darkest shade) — 50, 100, 200 … 900 — keeping the hue fixed and adjusting only saturation and lightness in a regular way. Don't just split the numbers evenly: since we perceive brightness differently at the light and dark ends, space the steps so both ends look equally even to the eye. Output each step as a CSS variable like --color-50, and include a usage table showing backgrounds use 50–100, borders 200–300, and text and buttons 600–800.
In the code I'll paste below, find every color that was lightened or darkened on the spot — all those similar-but-slightly-different shades. Consolidate them into a single brightness scale (50–900, 10 steps) with the hue held fixed, and map each existing color to its nearest step. Don't pad out the full 50–900 set — keep only the intensities that actually show up in the code, so only the steps you truly need remain. Give me an original-value → step mapping table plus the code with the hardcoded colors swapped for --color-* variables.
From the brightness scale (50–900) I'll paste below, pick text-and-background pairings and check each one. Calculate the contrast for every pair and report in a table whether it passes WCAG AA — 4.5:1 for body text, 3:1 for large text (24px+, or bold 18.66px+). Since adjacent steps (say 600 vs 700) often don't have enough contrast between them, for any failing pair tell me the minimum number of steps I need to spread them apart to pass. Also recommend safe default combos, like dark text (700–900) on a light background (50–100).