What Is a Shade? How It's Calculated and When to Use One
Step under a tree on a bright afternoon and the grass around your feet goes noticeably darker than the lawn just a few steps away in direct sun. Same grass, same green, just less light reaching it. That's not a coincidence of language. The color term "shade" comes from exactly that phenomenon, a color sitting in reduced light, and the math behind it still works the same way today, just with black standing in for the missing sunlight instead of a tree's canopy.
The Basic Idea
A shade is any color with black mixed into it. Nothing about the underlying hue changes, only how much light appears to be reaching it. Navy is a shade of blue. Forest green is a shade of green. The color's identity survives the darkening completely intact, which is really the whole point, a shade is still recognizably the same color, just standing somewhere dimmer.
Why Darker Doesn't Mean Duller
This is worth sitting with for a second, because it's easy to lump "shaded" in with "muted" or "dull," and they're not the same thing at all. A tint softens a color by pulling it toward white. A shade deepens a color by pulling it toward black. Both keep saturation as a percentage of the original hue relatively intact in their own way, which is why a deep, dark shade of red can still feel rich and vivid, a wine red or a deep maroon, rather than flat or lifeless. Dullness comes from a completely different operation, mixing in gray, which is a separate concept covered in more depth over in the guide to tints, shades, and tones.
How a Shade Is Calculated
The math runs in the opposite direction from a tint. Since black is rgb(0, 0, 0), mixing black into a color means multiplying each red, green, and blue value by the amount of the original color you're keeping. Shade a color by 30 percent and you multiply every channel by 0.7, keeping 70 percent of its original brightness.
Take a golden yellow, #FFC300, rgb(255, 195, 0). Multiply each channel by 0.7 for a 30 percent shade, or by 0.4 for a 60 percent shade.
Notice how the blue channel, already sitting at zero, just stays at zero the whole way through. There's nothing left to multiply down. That's an easy detail to spot once you know to look for it, and it's part of why some shaded colors darken more evenly than others, depending on how many channels started near zero to begin with.
Here's the same process on a blue, starting from #3B82F6, rgb(59, 130, 246):
All three channels shrink proportionally here, which keeps the overall balance between red, green, and blue roughly consistent as the color darkens. That proportional shrinkage is exactly why a shaded color still reads as unmistakably the same hue, just experienced in less light.
Shade Versus Lowering Lightness in HSL
Just like with tints, it's tempting to assume dragging the lightness slider down in HSL gives you the same result as a true shade, and again, it's close but not identical. Lowering lightness in HSL holds saturation steady as a percentage while dimming the color. Multiplying RGB channels toward black, the way a literal shade works, also holds each channel's relative proportion steady, but the two formulas diverge slightly as they approach true black, HSL can hold onto a sliver of visible hue longer than a straightforward RGB multiplication does. In practice the difference is minor at moderate shade percentages and only really shows up once you're pushing a color close to total darkness.
When to Reach for a Shade
- Anything that needs to feel serious, formal, or grounded. Navy, hunter green, and deep maroon all do this job precisely because they're shades rather than pure, bright hues.
- Text and UI elements that need strong contrast. A shade of your brand color often makes better body text than pure black, since it stays visually connected to the palette while still reading dark enough for legibility.
- Dark mode interfaces. Shaded versions of a brand's core colors tend to translate to dark backgrounds far more gracefully than the original bright versions do.
- Building depth into a single-color palette. Pairing a base color with one or two shades of itself creates a sense of dimension without introducing a second hue at all.
Keeping a Shade From Reading as Just "Dark"
- Don't shade past the point of recognition. Once a color drops below roughly 15 to 20 percent of its original brightness, most people stop identifying the specific hue and just see "dark."
- Pair a deep shade with a lighter tint of the same hue. This keeps the relationship obvious and gives you a built-in, cohesive range to use across a design.
- Watch for muddiness in warm hues especially. Reds and oranges can start to look brownish once shaded heavily, which is worth checking for if you need the color to stay clearly identifiable.
- Use shades deliberately in typography. A shaded brand color for headlines or body text often feels more intentional than defaulting to plain black, without sacrificing any legibility.
Frequently Asked Questions
What's the simplest definition of a shade?
A shade is any color with black added to it, darkening the color while keeping its original hue identity intact.
How is a shade different from a tone?
A shade adds black, a tone adds gray. Shades read as darker versions of a color, while tones read as muted, less saturated versions, regardless of how light or dark they are.
How do you calculate a specific shade percentage?
Multiply each red, green, and blue value by the percentage of the original color you want to keep. A 40 percent shade means multiplying every channel by 0.6.
Is lowering lightness in HSL the same as creating a shade?
It's close but not identical. Both darken a color while trying to preserve its hue, but they use slightly different math, which becomes more noticeable as a color approaches true black.
Why do some shaded colors look brownish instead of just darker?
This happens most with warm hues like red, orange, and yellow, since darkening them heavily pushes them toward the same territory as brown, which sits naturally close to dark orange on the color wheel.