Design Atlas
한국어
◐ Color

Tint, shade, tone

틴트 · 셰이드 · 톤

Mix white into a pure hue and you get a tint, black gives a shade, gray gives a tone — the three basic moves for turning one color into a palette.

Also known as: Color mixing색상 혼합
···
html
<div class="wrap">
  <div class="rowlabel">Tint <span class="muted">+ white</span></div>
  <div class="row" id="tintRow"></div>
  <div class="rowlabel">Tone <span class="muted">+ gray</span></div>
  <div class="row" id="toneRow"></div>
  <div class="rowlabel">Shade <span class="muted">+ black</span></div>
  <div class="row" id="shadeRow"></div>
</div>
css
.wrap{width:min(560px,94%);display:grid;gap:6px}
.rowlabel{font:700 clamp(10px,2.6vmin,12px)/1 ui-monospace,monospace;color:var(--muted);margin-top:8px}
.rowlabel .muted{font-weight:500;opacity:.7}
.row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;height:clamp(26px,6.4vmin,40px)}
.row div{border-radius:8px;border:1px solid var(--line)}
js
const STEPS = [0, 25, 50, 75, 100];
let hue = 20;
const tintRow = document.getElementById('tintRow'), toneRow = document.getElementById('toneRow'), shadeRow = document.getElementById('shadeRow');
[tintRow, toneRow, shadeRow].forEach(row => row.innerHTML = STEPS.map(() => '<div></div>').join(''));

function render() {
  const base = 'hsl(' + hue + ', 72%, 50%)';
  for (let i = 0; i < STEPS.length; i++) {
    const p = STEPS[i];
    tintRow.children[i].style.background = 'color-mix(in srgb, ' + base + ' ' + (100 - p) + '%, white ' + p + '%)';
    toneRow.children[i].style.background = 'color-mix(in srgb, ' + base + ' ' + (100 - p) + '%, gray ' + p + '%)';
    shadeRow.children[i].style.background = 'color-mix(in srgb, ' + base + ' ' + (100 - p) + '%, black ' + p + '%)';
  }
}
(function tick() {
  hue = (hue + 0.2) % 360;
  render();
  requestAnimationFrame(tick);
})();

A tint is pure hue + white, so it always gets lighter and less saturated. A shade is pure hue + black, so it gets darker and heavier. A tone is pure hue + gray, so lightness barely moves but saturation drops — reads as "muted."

CSS color-mix() implements this directly: color-mix(in srgb, red 70%, white 30%) lets you dial the ratio exactly. You can fake it with HSL (raising lightness approximates a tint) but it isn't identical — a real mix blends the actual white/black/gray into the result.

Using these three axes to derive every state of a single brand color — hover, disabled, background — keeps a whole palette consistent.

When to use

For generating a design-token scale — brand-50 through brand-900 — from a single base color.