Tints, Shades, and Tones: Generating Semantic UI Scales

In traditional fine art and modern digital token systems:

• Tint: Adding pure White to a base hue. Lightens the value while reducing saturation. Essential for constructing subtle hover states, input fill backgrounds, and tag containers.
• Shade: Adding pure Black to a base hue. Darkens the value. Used for active pressed button states and high-contrast borders.
• Tone: Adding Gray (simultaneously reducing saturation). Softens colors, eliminating harsh glare in complex interface components.

A robust design system generates a 10-step scale (50 through 900) for every brand color using consistent tint and shade curves.