Tints and shades are steps, not a brand

A brand color is one swatch. An interface needs that swatch at rest, on hover, on a selected row, as a light wash, as a border, and as a pressed state. Those are not new colors. They are steps from the same color.

Tint and shade is a simple idea, and teams still improvise it. One person lowers opacity. Another drags lightness in HSL. A third mixes toward black and gets a muddy navy that no longer looks like the original hue.

Name the move. Then do it on purpose.

Three words, three mixes

• A tint is the color mixed with white. Lighter and softer.
• A shade is the color mixed with black. Darker and heavier.
• A tone is the color mixed with gray. Quieter and less saturated.

Pink is a tint of red. Navy is a shade of blue. Dusty rose is a tone of red.

In paint, you add pigment. On the web, you mix channels. CSS can do this directly:

.tint  { background: color-mix(in srgb, var(--brand) 50%, white); }
.shade { background: color-mix(in srgb, var(--brand) 50%, black); }
.tone  { background: color-mix(in srgb, var(--brand) 50%, gray); }

in oklch looks more even to the eye. in srgb is what most files still use. Either is better than dragging a slider until the critique ends.

Why "just change the lightness" goes wrong

HSL lightness is not how people see brightness. A 10% change on yellow does not feel like a 10% change on blue. Mixing toward white also lowers intensity. Mixing toward black can make greens and blues look dirty instead of deep.

Two fixes:

1. Do not shade a bright color all the way to black in even RGB steps. The last two steps often need a little intensity kept, or the hue fades.
2. Do not tint only by raising lightness and leaving saturation high. Bright pastels look neon, not light. As you go lighter, let saturation drop.

Generate even steps and put them in a row. The middle should look like the brand. The ends should still belong to the same family. If they do not, fix the ends before you name tokens.

What tints and shades are for

Use them for states and surfaces of one hue, not for a whole brand system.

Step	Job
Light tints	Washes, selected rows, avatar fallbacks, tinted alerts
Near-base tints	Hover fill on a light surface
Base	Primary button, key icon, brand mark
Near-base shades	Hover and pressed on the base
Deep shades	Text on a tinted wash, dark surfaces in the same hue

A blue button that turns gray on hover is not a shade. It is a different color. A blue button that turns into a deeper blue is a shade. People read the second as the same control in a new state.

Opacity is not a tint

10% brand color over white is a kind of tint. 10% brand color over a warm page background is a different color. 10% over a photo is a guess.

If the wash must stay predictable — selected table row, filled input, badge background — mix a real tint and save it as a solid color. Use opacity for overlays that should pick up what sits underneath: dimmed backgrounds, drag ghosts, image treatments.

Quick test: put the treatment on white and on #F4EFE6. If it must stay the same, it is a tint. If it should change with context, it is opacity.

How many steps you need

You do not need ten. For one accent color, five even steps cover most states:

1. Wash (very light tint)
2. Soft fill (tint)
3. Base
4. Hover / emphasis (shade)
5. Pressed / text on tint (deeper shade)

Add more steps when the same hue must work as both a surface and a text color in light and dark themes. That is when you should switch tools and build a named 10-step palette instead of a short tint and shade run.

The jobs are different. Tint and shade answers "what is this color, lighter and darker?" A palette answers "what system does this color belong to?"

Dark surfaces flip the instinct

Shading toward black on a dark background makes the color disappear. On a dark UI, the useful "shade" is often a tint — the color mixed toward white — so it lifts off #0B0D12 instead of sinking into it.

Match the mix to the theme:

• Light theme: tints for surfaces, shades for text and press.
• Dark theme: shades for surfaces, tints for text and press.

The hue stays the same. The direction of the mix follows the background.

Do the mix once

Pick the base. Generate even steps toward white and toward black. View them in a row, on light and dark grounds. Drop steps that look muddy or neon. Keep five. Name them by role, not by percentage.

Then stop mixing by eye in the file. Hover is a token. Selected is a token. The wash is a token. Whichever step carries text still has to pass 4.5:1 on the surface behind it. The brand can be one color. The interface cannot be one swatch.