Tint
A color mixed with white — lighter than the original while preserving the underlying hue.
What it means
A tint is created by adding white to a color. As you add more white, the color becomes lighter and softer while keeping its hue recognizable. Pink is a tint of red. Baby blue is a tint of blue. Lavender is a tint of purple.
Tints are essential for building color scales. The light end of any design-system scale (steps 50–200) is essentially a series of tints — progressively lighter versions of the base hue.
Why it matters in palette design
Tints are the backbone of surface colors, backgrounds, and subtle indicators in UI. A light tint of your primary color makes a better background than a plain gray — it carries brand identity without competing for attention. Badge fills, hover states, alert banners, and disabled surfaces all typically use tints.
Example
A project management tool uses blue (#2563EB) as its primary action color. Tints of that blue serve as background for selected rows (step 50), notification badges (step 100), and active tab indicators (step 200). Every surface carries the brand hue at a whisper.
Learn more
Apply this to your palette
Open PerfectPalette and put these concepts into practice with your own colors.