Shades, Tints, and Tones
Finally understand the difference between shades, tints, and tones. Learn how to create harmonious color variations and generate Sass variables for your design system.
Understanding Color Variations
Creating a cohesive color palette requires understanding how to systematically vary colors. Shades, tints, and tones are the three fundamental ways to modify any base color, each producing different visual effects and emotional responses.
This interactive tool helps you understand these concepts by generating color variations in real-time and providing ready-to-use Sass variables for your design system.
Interactive Color Generator
Color Controls
Color Variations
Tints (Adding White)
Tint 10%
#6CA1F8
Tint 20%
#9DC0FA
Tint 30%
#CDDFFD
Tint 40%
#FEFEFF
Tint 50%
#FFFFFF
Base Color
Base Color
#3B82F6
Tones (Adding Gray)
Tone 10%
#4584EC
Tone 20%
#4F87E2
Tone 30%
#5A89D7
Tone 40%
#648CCD
Tone 50%
#6E8EC3
Shades (Adding Black)
Shade 10%
#0B63F3
Shade 20%
#094FC2
Shade 30%
#073B91
Shade 40%
#042761
Shade 50%
#021430
Generated Sass Variables
Sass Variables
$primary-tint-10: #6CA1F8;
$primary-tint-20: #9DC0FA;
$primary-tint-30: #CDDFFD;
$primary-tint-40: #FEFEFF;
$primary-tint-50: #FFFFFF;
$primary: #3B82F6;
$primary-tone-10: #4584EC;
$primary-tone-20: #4F87E2;
$primary-tone-30: #5A89D7;
$primary-tone-40: #648CCD;
$primary-tone-50: #6E8EC3;
$primary-shade-10: #0B63F3;
$primary-shade-20: #094FC2;
$primary-shade-30: #073B91;
$primary-shade-40: #042761;
$primary-shade-50: #021430;Understanding the Differences
Tints
Tints are created by adding white to a base color, making it lighter and more pastel-like.
- • Lighter and brighter appearance
- • Often used for backgrounds
- • Creates softer, more gentle feel
- • Good for highlighting elements
Tones
Tones are created by adding gray to a base color, reducing its saturation and intensity.
- • More muted and sophisticated
- • Versatile for various contexts
- • Creates subtle variations
- • Good for supporting elements
Shades
Shades are created by adding black to a base color, making it darker and more intense.
- • Darker and more dramatic
- • Often used for text and borders
- • Creates depth and contrast
- • Good for emphasis and hierarchy
Practical Applications
Design Systems
Use systematic color variations to create consistent, scalable design systems. Each variation serves a specific purpose in your interface hierarchy.
- • Tints for backgrounds and highlights
- • Base colors for primary elements
- • Tones for secondary elements
- • Shades for text and emphasis
Accessibility
Color variations help maintain accessibility while providing visual hierarchy. Use darker shades for better text contrast and lighter tints for backgrounds.
- • Ensure sufficient contrast ratios
- • Test with color blindness simulators
- • Use multiple visual cues beyond color
- • Follow WCAG guidelines
Color Psychology & Usage
When to Use Each Variation
Tints
Use for backgrounds, highlights, and creating a light, airy feel. Perfect for cards, modals, and secondary backgrounds.
Tones
Use for secondary elements, borders, and subtle accents. Great for creating depth without overwhelming the design.
Shades
Use for text, emphasis, and creating strong contrast. Essential for readability and visual hierarchy.
Best Practices
- • Consistency: Use the same variation percentages across your design system
- • Context: Consider the emotional impact of each variation
- • Testing: Always test color combinations with real users
- • Documentation: Document when and how to use each variation
- • Flexibility: Create enough variations to handle different use cases
Related Articles
Start Building Your Color System
Use the interactive tool above to generate your own color variations and Sass variables. Create consistent, accessible color systems that scale with your design needs.
Explore More Colors