Shades Generator
Generate progressively darker shades of any color. Shades preserve hue and saturation while reducing lightness — essential for hover states, borders, and depth in design systems.
What Are Shades?
A shade is a color mixed with black. Reducing lightness while keeping hue and saturation constant produces a "shade" of the original color. For example, a mid-blue becomes navy as it darkens, but it remains in the same hue family.
How to Use Shades in Design
- Hover and active states: Button hover is often a slightly darker shade of the base color.
- Borders and dividers: Lighter shades for borders, darker for emphasis.
- Shadows: Use darker shades of the accent color for subtle tinted shadows.
- Design systems: Generate a "100–900" scale from a single brand color.