A shade is the result of adding black to any color. Starting with a pure hue and progressively darkening it produces a shade scale — the same color at increasingly deeper, heavier values. Understanding shades (and how they differ from tints and tones) is the foundation of building professional color systems that work across every component in your interface.
How Shading Works
Take blue #3B82F6. Adding progressively more black produces #2563EB, then #1D4ED8, then #1E3A8A, down toward near-black. The hue stays constant — all of these are unmistakably blue. The lightness decreases and the color gains visual weight and authority. Shades feel grounded, serious, and authoritative compared to their lighter counterparts.
In CSS, creating shades is most intuitive with HSL. Your base blue at hsl(217, 91%, 60%) becomes a medium shade at hsl(217, 91%, 45%) and a deep shade at hsl(217, 91%, 30%). Hue and saturation stay constant while lightness drops. This guarantees every shade belongs to the same visual family — a consistency that separates professional palette work from random color picking.
Where to Use Shades in UI
Darker shades serve specific functional roles in interface design. Active button states need to feel pressed — a shade darker than the default state communicates this physically. Focused form borders use a shade to draw attention without changing color identity. Headings in a brand color use a deeper shade for legibility against white backgrounds. Footer and navbar backgrounds use dark shades to establish visual boundaries and anchor the page structure.
Dark mode interfaces rely heavily on shades. Your card surfaces, sidebar backgrounds, and modal overlays are all shades of a base dark color, differing by just a few lightness points to create depth. Without multiple shade levels, dark mode interfaces feel flat — a single dark color everywhere eliminates the layering that helps users understand spatial relationships between elements.
Building a Shade Scale
Most design systems define nine levels for each color, numbered from 50 (lightest tint) to 900 (darkest shade). The base color sits around 500. Values 600 through 900 are your shades. Each step should feel evenly distributed — the perceptual difference between 600 and 700 should roughly match the difference between 700 and 800. Achieving even spacing often requires manual adjustment because HSL lightness is not perceptually uniform — a 10-point drop from 60% to 50% looks different from a 10-point drop from 30% to 20%. Trust your eyes over the math, and use your color picker to verify that each step looks intentionally spaced.