Guide
Tints, shades, tones, and color scales
Learn the difference between mixing with white, black, and gray—and why perceptual scales are better for interface tokens.
Tints add white
A tint makes a color lighter by mixing it with white. Tints are often useful for subtle surfaces, selected rows, and decorative backgrounds.
Shades add black
A shade makes a color darker. Darker values can provide strong text or pressed states, but simple black mixing may make a scale look muddy.
Perceptual scales control lightness
For interface scales, stepping through OKLCH lightness generally produces more even visual changes than evenly mixing in RGB.