In this article
What Are Color Shades, Tints, and Tones?
A shade is produced by mixing a color with black, making it darker. A tint is produced by mixing with white, making it lighter. A tone is produced by mixing with gray, which desaturates the color. Together, these three operations create a complete palette from any single base color.
Understanding the difference between shades, tints, and tones is fundamental to color theory. Designers use these variations to create depth, hierarchy, and visual contrast in user interfaces, while maintaining harmony by deriving every color from the same base hue.
How Shade Generation Works
A color shade generator takes a base color (like #3b82f6) and produces a range of lighter and darker variants by manipulating the lightness value in the HSL color space.
- HSL manipulation — the generator adjusts the L (lightness) value while keeping H (hue) and S (saturation) constant, creating perceptually uniform steps
- Step calculation — the range from lightest to darkest is divided into evenly spaced intervals (typically 10-20 steps) for a smooth gradient
- Color mixing — for more natural results, some generators use actual color mixing (blending with white/black/gray) rather than simple lightness adjustment
Try it free — no signup required
Generate Color Shades →When To Use Color Shade Generation
Color shade palettes are essential for creating cohesive, professional designs from a single brand color.
- Design systems — generate a complete color scale (50 through 950) from your brand's primary color for use across all UI components
- UI theming — create hover, active, focus, and disabled states for buttons and interactive elements using lighter and darker variants of the base color
- Accessibility contrast — test and select color combinations that meet WCAG contrast ratios by choosing from a full spectrum of shades and tints
Frequently Asked Questions
What is the difference between a shade and a tint?
A shade is a color mixed with black (darker), while a tint is a color mixed with white (lighter). For example, navy blue is a shade of blue, while baby blue is a tint of blue. Both maintain the same hue but differ in lightness.
How many shades should a design system have?
Most design systems use 10 steps (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) following the Tailwind CSS convention. The base color typically sits at 500, with tints above and shades below. This provides enough granularity for UI states, text, and backgrounds.
Can I generate accessible color combinations from shades?
Yes. By generating a full shade palette, you can test pairs against WCAG contrast requirements. Generally, using a dark shade (700-900) on a light tint (50-200) or vice versa ensures sufficient contrast for text readability.