How to Get Color Shades from Any Hex Code

Last updated: March 2026

If you've ever needed to get color shades from a single hex code — for a design system, a hover state, or just to see what a color looks like at different depths — you already know the manual way is slow. Converting hex to RGB to HSL, tweaking the lightness, converting back, then repeating that for 8–10 different steps... by the time you're done you've lost your design momentum.

This article covers the fastest ways to get color shades in 2026: the one-click tool approach, the CSS approach for codebases, and the JavaScript approach if you need to generate shades programmatically. All three produce the same end result — a cohesive palette derived from one base color — but they fit different workflows.

What "Get Color Shades" Actually Means

Before diving into the how, a quick clarification on terms. In color theory, a "shade" is specifically a color mixed with black (darker). But in everyday usage — especially in search queries — "color shades" often means the entire range of lightness variations: lighter versions (tint), darker versions (shades), and sometimes the muted middle (tones).

When most people search "get color shades," they want the practical outcome: a set of coordinated variations derived from a base color. Whether those variations are technically tints of color, shades, or a mix, the goal is the same — more colors to work with, all belonging to the same family.

So for this article, "get color shades" means generating a full palette from one hex code. We'll cover both darker variants specifically and the lighter-to-darker spectrum more broadly.

Method 1 — Use a Free Shade Tool (Fastest)

The quickest way to get color shades is to paste a hex code into a dedicated tool and let it do the math.

HexTints is a free tool we built for exactly this workflow. You enter a hex code (say, #0891b2 — a rich cyan), and you immediately see the full shade spectrum: very light tints on one end, the base color in the middle, and very dark shades on the other end. Every swatch is click-to-copy, so you can grab any value you need in seconds and paste it straight into your CSS, Tailwind config, or design file.

The reason this is usually the right approach: generating shades manually takes time you don't get back. If you're building out a design system or just experimenting with palette variations, you'll need dozens of values. A tool gives them to you in the same moment you thought to ask for them.

When a Tool Is the Right Answer

• You need multiple shade values, not just one
• You're still iterating on your base color and might change it
• You want to see the full palette visually before committing to values
• You're not in a coding context (Figma, email template, brand guidelines)

Method 2 — Get Color Shades with CSS

If you're already in a codebase and your palette is defined in CSS, modern CSS gives you tools to generate shades inline without a separate tool.

Using color-mix()

:root {
  --brand: #0891b2;
  --brand-tint-10:  color-mix(in srgb, var(--brand), white 10%);
  --brand-tint-40:  color-mix(in srgb, var(--brand), white 40%);
  --brand-tint-80:  color-mix(in srgb, var(--brand), white 80%);
  --brand-shade-20: color-mix(in srgb, var(--brand), black 20%);
  --brand-shade-50: color-mix(in srgb, var(--brand), black 50%);
  --brand-shade-80: color-mix(in srgb, var(--brand), black 80%);
}

color-mix() is supported in all modern browsers. This approach lets you derive shades from your base color token, so if you update --brand, every shade updates automatically. No regeneration needed.

Using HSL Custom Properties

:root {
  --brand-h: 192;
  --brand-s: 91%;
  --brand-l: 37%;
  --brand: hsl(var(--brand-h) var(--brand-s) var(--brand-l));
  --brand-lighter: hsl(var(--brand-h) var(--brand-s) 65%);
  --brand-darker:  hsl(var(--brand-h) var(--brand-s) 20%);
}

This is an older pattern but works in every browser back to IE11. The tradeoff: HSL lightness steps aren't perceptually uniform, so a 20% lightness bump on one hue might look different from the same bump on another hue.

When CSS Is the Right Answer

• You're working entirely in a codebase, not designing in Figma first
• Your base color might change and you want shades to update with it
• You only need 3–5 shade steps, not a full 11-step scale
• You're comfortable that shade values are computed at render time, not pre-baked

Method 3 — Get Color Shades with JavaScript

If you're generating shades programmatically — maybe for a color picker component, a theme builder, or dynamic UI — you'll want a small utility function.

Here's a minimal vanilla JavaScript function that takes a hex code and a factor (where negative is darker, positive is lighter) and returns the resulting shade:

function getShade(hex, factor) {
  // Strip # and normalize to 6 chars
  const h = hex.replace('#', '');
  const full = h.length === 3
    ? h.split('').map(c => c + c).join('')
    : h;

  const r = parseInt(full.slice(0, 2), 16);
  const g = parseInt(full.slice(2, 4), 16);
  const b = parseInt(full.slice(4, 6), 16);

  const adjust = (channel) => {
    if (factor >= 0) {
      return Math.round(channel + (255 - channel) * factor);
    }
    return Math.round(channel * (1 + factor));
  };

  const toHex = (n) => n.toString(16).padStart(2, '0');

  return '#' + toHex(adjust(r)) + toHex(adjust(g)) + toHex(adjust(b));
}

// Usage
getShade('#0891b2', -0.3);  // 30% darker shade
getShade('#0891b2',  0.4);  // 40% lighter tint

No dependencies, works in every JavaScript environment (browser, Node, Deno), and follows the same proportional blending math that professional tools use.

When JavaScript Is the Right Answer

• You're building a tool or component that generates shades on demand
• You need to get color shades from user input at runtime
• You want to generate a full scale from one base (loop the function across steps)
• You're doing data visualization where shade intensity maps to data values

Practical Scenarios for Getting Color Shades

Building a design token scale: Generate 11 evenly-spaced shades from your base color (0.9 tint → base → 0.9 shade) and map them to token names (--color-500 for base, --color-50 through --color-950 for the rest).

Creating hover and active states: Get one slightly lighter shade (for hover on dark elements) and one slightly darker shade (for pressed/active). These two shades alone cover most interactive states for a button.

Data visualization: When plotting multiple series in the same color family, get 3–5 shades of the base hue and map the darkest to the highest-value series, lightest to the lowest. This creates visual hierarchy that's accessible even for users with color vision differences.

Dark mode mapping: Get your light-mode shade scale, then for dark mode, invert the mapping — a very dark shade becomes the background, a dark shade becomes the card surface, and a light tint becomes the text color. Same palette, different assignments.

Email templates: Because email clients have inconsistent CSS support, pre-compute every shade you need as a static hex value rather than relying on runtime functions. Get the values with a tool, paste them directly into your email HTML.

For a deeper look at how tints and shades work together, see our guide on tints and shades and the full shades of a color reference.

Mistakes to Avoid When Getting Color Shades

Treating "shades" as just darker variants when you need both lighter and darker: If your use case is a UI palette, you almost always need tints (lighter) AND shades (darker). Don't only generate darker variants — you'll be missing half the palette.

Using unevenly spaced shade values: If you pick shade values by eye, the visual jumps between them will be inconsistent. Use equal factor increments (e.g., 10%, 20%, 30%...) or a tool that does this automatically.

Getting too few shades: Three shades (light, base, dark) are rarely enough for real design work. Aim for 9–11 stops so you have granularity for backgrounds, borders, text, interactive states, and dark mode. Need a quick starting point? Our shade picker produces a full 11-stop scale instantly.

Forgetting to test contrast: The shade you get might look harmonious with your base but fail WCAG contrast requirements when paired with text. Always verify contrast ratios before committing to shade values for text-background pairings.

Frequently Asked Questions

• What's the fastest way to get color shades from a hex code?

  Use a free tool like HexTints. Paste a hex code, and you get the full tint-to-shade spectrum instantly, with click-to-copy values. Manual methods (channel math, HSL conversion) take much longer, especially when you need multiple shade values.

• Can I get color shades directly in CSS?

  Yes, using color-mix(). For example, color-mix(in srgb, #0891b2, black 30%) gives you a 30% darker shade. This works in all modern browsers. For older browser support, pre-compute shade values with a tool and use them as static hex codes.

• How many color shades should I generate from one base color?

  For quick projects, 3 (light, base, dark) is the minimum. For a design system, 9–11 stops is the standard — this matches how Tailwind CSS, Material Design, and Radix organize color scales.

• What's the difference between getting shades and getting tints?

  Shades are darker variants (base color + black). Tints are lighter variants (base color + white). When people ask to "get color shades," they usually mean either specifically darker variants or the full light-to-dark spectrum depending on context.

• Does getting color shades change the hue of the original color?

  It shouldn't. Well-generated shades preserve the hue and only adjust lightness. If your shades look like different colors (e.g., a blue shifts toward purple as it darkens), you're likely using linear RGB interpolation instead of proportional blending. Quality tools use proportional blending to maintain hue fidelity.