What is a shade generator?

A shade generator takes a base color and mixes it with black in even steps, producing progressively darker versions that keep the same hue. This page generates 19 shades of any hex code — from 5% to 95% darker — each with a copy-ready hex value.

How do I pick a shade for text on a white background?

Check the contrast ratio, not just the look. #3498DB on white is only about 3.1:1, which fails WCAG AA for body text, while its 50% shade #1A4C6E reaches roughly 9.1:1. Start around the 40–60% rows of the ramp and verify the exact pairing with the contrast checker.

What is the difference between shades and tints?

Shades are darker variants made by mixing a color with black; tints are lighter variants made by mixing it with white. Both preserve the original hue — they move lightness in opposite directions.

How dark should a pressed button state be?

A shade 10–20% darker than the resting color is the sweet spot — clearly different while pressed, but still recognizably the same color. Keep hover and pressed distinct: if hover shifts the color about 5–10%, push pressed to 10–20% so the two states never blur together.

Is a shade the same as lowering a color's opacity?

No. A shade is an opaque color mixed with black, so it renders identically on any background. Lowering opacity makes the color translucent — whatever sits behind it bleeds through, changing the visible color and often the contrast ratio. Use real shades for text and surfaces, and reserve opacity for cases where you want show-through.

Shade Generator

Free, instant, copy-ready — no signup.

Enter a hex code and get 19 darker shades in 5% steps, from a barely-darker 5% to a near-black 95%. Every shade keeps the original hue — a shade of blue is still blue, just deeper — and every hex value copies in one click. Need lighter versions instead? Use the tint generator, or get both directions at once in the tint and shade generator.

Generate shades

Hex code

5%#3190d0
10%#2f89c5
15%#2c81ba
20%#2a7aaf
25%#2772a4
30%#246a99
35%#22638e
40%#1f5b83
45%#1d5478
50%#1a4c6e
55%#174463
60%#153d58
65%#12354d
70%#102e42
75%#0d2637
80%#0a1e2c
85%#081721
90%#050f16
95%#03080b

Prefer precomputed pages? Try #3498DB in the color library — every library color ships with ready-made tint and shade ramps.

Want the theory behind the tool? Shades of a color is the informational companion to this page — what shades are, how they're named, and how designers talk about them.

How Shade Generation Works

A shade is the base color mixed with black. The generator scales each RGB channel toward zero by the chosen percentage p (0–1):

new = old × (1 − p)

30% shade of #3498DB — rgb(52, 152, 219):
 ├─ R: 52  × 0.70 =  36
 ├─ G: 152 × 0.70 = 106
 └─ B: 219 × 0.70 = 153

Result: rgb(36, 106, 153) = #246A99

Because all three channels shrink by the same proportion, the ratio between them — which is what your eye reads as hue — stays constant. That's why the whole ramp above still reads as one blue rather than drifting toward navy-purple. If you only need a single darker value with a slider, the darken color tool applies the same formula one percentage at a time, and the advanced scale explorer adds hue and chroma scales on top of plain lightness.

Using It as a Shade Picker

If you've ever thought "I need this color, but darker — what's the exact hex for that?", you've been looking for a shade picker. Picking shades by eye is hard: screen calibration, ambient lighting, and even time of day can make you choose a value that looks right in the moment but turns out too dark or too light in context. Seeing all 19 options side by side removes the guesswork — you pick the darkness level that fits, and copy the exact hex.

As a rough map of the ramp for UI work:

5–15% — hover-adjacent adjustments and subtle borders on colored surfaces; noticeably different up close, same color at a glance.
10–20% — pressed and active states. Clearly "pushed down," still on-brand.
40–60% — text and icons on white or light tint backgrounds. #3498DB itself only manages about 3.1:1 against white, while its 50% shade #1A4C6E reaches roughly 9.1:1 — check your exact pair in the contrast checker.
75–95% — dark-mode surfaces and near-black accents that still carry the hue's undertone.

Get Color Shades for Any Project

When people search "get color shades," they usually mean the practical outcome: a set of coordinated darker values derived from one base color, all belonging to the same family. Where those values end up:

Design tokens. Map the generated values to token names (--color-600, --color-700, and so on) and the darker half of your scale is done. Most systems use 9–11 stops per hue — the darker half of that scale is exactly what this page generates. For the lighter half, pair it with the tint generator.

Interactive states. One slightly darker shade covers pressed/active for most buttons; grab it from the 10–20% rows and you're done.

Data visualization. When plotting series in the same color family, map the darkest shade to the highest value and the lightest to the lowest. A single-hue ramp creates hierarchy that stays readable for users with color vision differences.

Email templates. Email clients have notoriously inconsistent CSS support, so pre-computed static hex values beat runtime functions like color-mix(). Copy the shades you need straight from the ramp into your template.

How This Shade Generator Compares

We built HexTints as a free alternative to tools like 0to255 because we wanted something faster, cleaner, and permanently free. Here's where it fits:

Tool	Free	No sign-up	Full tint-to-shade range	Click-to-copy
HexTints	Yes	Yes	Yes	Yes
0to255	Yes	Yes	Partial	Yes
Coolors shade generator	Freemium	Account encouraged	Yes	Yes
Sass `darken()` / `lighten()`	Yes	N/A	Yes	No visual preview

Shades in Dark UIs

Dark themes aren't one dark color — they're a stack of shades from the same ramp. A common mapping from the ramp above: the 90% shade (#050f16) as the page background, the 80% shade (#0a1e2c) as card surfaces, and the 65% shade (#12354d) for borders and dividers. Because every layer is a shade of the same base, the whole theme carries a consistent undertone instead of reading as flat gray-on-black. Text in dark mode then comes from the opposite direction — light tints of the same hue — which is where the tint generator takes over. The color library has both halves precomputed for hundreds of colors.

Frequently Asked Questions

What is a shade generator?

A shade generator takes a base color and mixes it with black in even steps, producing progressively darker versions that keep the same hue. This page generates 19 shades of any hex code — from 5% to 95% darker — each with a copy-ready hex value.
How do I pick a shade for text on a white background?

Check the contrast ratio, not just the look. #3498DB on white is only about 3.1:1, which fails WCAG AA for body text, while its 50% shade #1A4C6E reaches roughly 9.1:1. Start around the 40–60% rows of the ramp and verify the exact pairing with the contrast checker.
What is the difference between shades and tints?

Shades are darker variants made by mixing a color with black; tints are lighter variants made by mixing it with white. Both preserve the original hue — they move lightness in opposite directions.
How dark should a pressed button state be?

A shade 10–20% darker than the resting color is the sweet spot — clearly different while pressed, but still recognizably the same color. Keep hover and pressed distinct: if hover shifts the color about 5–10%, push pressed to 10–20% so the two states never blur together.
Is a shade the same as lowering a color's opacity?

No. A shade is an opaque color mixed with black, so it renders identically on any background. Lowering opacity makes the color translucent — whatever sits behind it bleeds through, changing the visible color and often the contrast ratio. Use real shades for text and surfaces, and reserve opacity for cases where you want show-through.