Tint and shade

How tints and shades are calculated

A tint mixes a color toward white, a shade toward black. Both are straight channel arithmetic:

tint:   channel + (255 − channel) × amount
shade:  channel × (1 − amount)

An amount of 0 leaves the color alone; 1 reaches pure white or pure black. The steps are spaced evenly across that range, so with ten steps each one moves a tenth of the way. Each swatch is labelled with its own amount — 20% at five steps, 10% at ten, 5% at twenty — so a value you like can be reproduced anywhere that takes a mix percentage.

Mixing happens in sRGB rather than a perceptual color space. That is deliberate: it is what Figma and Photoshop do, so a value here matches what you would get by dropping a white layer at the same opacity onto your canvas. The trade-off is that the steps are evenly spaced in mix amount, not in perceived lightness — the dark end changes faster than it looks like it should.

Your color is the first swatch in each section, and the count includes it. Ten steps means your color plus nine calculated ones.

The readability hint

Each swatch shows which of black or white is more readable on it, and the contrast ratio you get. The label is rendered in that color, so the swatch demonstrates its own advice.

Worth knowing: whichever of black or white wins, the result always clears WCAG AA. At the crossover point — the lightness where black and white are equally readable — both measure 4.58:1. There is no color for which neither works.

When to use this, and when not to

This tool is for exploring a color: what does it look like lighter, what does it look like darker, and what should sit on top of it. The values are literal and reproducible.

For a design system ramp, use the palette generator instead. A token ladder needs stops at fixed lightness so that 500 means the same brightness across your primary, secondary and error colors, and it needs to stop short of black. Even mix amounts do neither.

Common questions

How do I get one value out rather than all of them? Click the swatch. Each one copies its own hex, and the button at the top of the panel copies both ramps at once.

What is in the downloaded image? Every tint and every shade at the step count you have selected, each labelled with its mix amount and its hex, on a light sheet. It is drawn in your browser — nothing is uploaded — and a 20-step ramp wraps onto a second row rather than shrinking the swatches to the point where the labels stop being readable.

Why doesn't the last step reach pure white or pure black? It nearly does, but not quite. Ending on #ffffff and #000000 would spend two swatches on colors that carry no information about your color — every ramp would end identically.

Are the steps perceptually even? No. They are even in mix amount. Perceived lightness follows roughly a cube-root curve, so the shades appear to change faster than the tints. This is the same behaviour you get mixing in any design tool.

Why does my color appear in both sections? So each section reads as a complete ramp starting from where you are. It is the same color, marked in both.