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.