Tints vs Shades vs Tones: Color Theory for Web Designers

Three simple terms explain most of your palette decisions.

Definitions

• Tint: base hue + white → higher lightness.
• Shade: base hue + black → lower lightness.
• Tone: base hue + gray → reduced chroma/saturation.

Switch modes in HexTints to see these concepts in action.