Color guide
Tint vs shade vs tone
Tints, shades, and tones are three common ways to turn one color into a usable scale for interfaces, illustrations, and brand systems.
Tint means mixed with white
A tint is a lighter version of a color. Tints are often useful for backgrounds, badges, selected states, and subtle UI surfaces.
Shade means mixed with black
A shade is a darker version of a color. Shades can support hover states, borders, dark UI moments, and high-emphasis accents.
Tone means mixed with gray
A tone is a muted version of a color. Tones reduce intensity and often feel calmer, more editorial, or easier to combine with neutrals.
Try it in Hue Codex
Use the free tools to test the idea immediately: pick a color, convert it, generate harmonies, build tints and shades, check contrast, and export practical CSS or palette data.
Quick answers
Tint vs shade vs tone FAQ
Are tints always accessible backgrounds?
No. Very light tints need readable text colors and still require contrast checks.
Should UI color scales be linear?
Not always. Perceptual scales often need hand tuning or OKLCH-style adjustments.