Example: Shades of #7c3aed

Customize these shades →

Color Shades Generator — Create Full Palettes from Any Hex Code

Last updated: March 2026

A color shades generator takes a single base color and produces an evenly distributed range of darker variants (shades) and lighter variants (tints). If you've ever needed to go from one brand color to a full 10-step palette for a design system, component library, or data visualization — this is the tool concept that solves it.

We built HexTints as a free, fast color shades generator because we kept running into the same problem: you pick a great color, and then you need 8–12 coordinated variations of it, and doing it manually takes forever. Below, we'll cover how shade generation works, what makes a good generator, and how to use generated palettes effectively.

What Exactly Is a "Color Shade"?

Before diving into generators, let's clarify the terminology — because "shade" gets used loosely in everyday conversation. In color theory, these terms have precise meanings:

A "color shades generator" typically produces both shades and tints, giving you the complete lightness spectrum from near-white to near-black. This is what HexTints does — despite the name focusing on tints, you get the full range of tints and shades.

How Color Shade Generation Works Under the Hood

Most quality shade generators use one of two approaches (or a hybrid):

RGB Proportional Blending

For shades (darker): new_channel = base_channel × (1 − step_factor)

For tints (lighter): new_channel = base_channel + (255 − base_channel) × step_factor

Where step_factor increases from 0 (base color) to ~0.95 (near-black or near-white).

The generator creates N evenly spaced steps, producing a smooth gradient of variations. This approach is straightforward and produces results that are mathematically consistent in sRGB space.

HSL/OKLCH Lightness Stepping

Instead of blending RGB channels, this approach works in a lightness-based color space:

  1. Convert base hex to HSL (or OKLCH for perceptual accuracy).
  2. Keep Hue and Saturation fixed.
  3. Generate evenly spaced Lightness values from ~5% (near-black) to ~95% (near-white).
  4. Convert each step back to hex.

OKLCH is the more modern choice here — it produces perceptually uniform steps, meaning each shade looks like an equal visual increment from the last. HSL can produce steps that "jump" irregularly, especially in yellows and cyans.

What Makes a Good Color Shades Generator

Not all shade generators are equal. Here's what to look for:

How to Use Generated Shades in Real Projects

Design Systems and Tokens

Most modern design systems define color scales from 50 (lightest) to 950 (darkest). When setting up a new system, generate your shades, map them to token names (--color-blue-100, --color-blue-200, etc.), and you've got a complete, consistent scale.

Tailwind CSS Custom Colors

Tailwind expects exactly this format in tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#f3ecfe',
          100: '#dbc7fc',
          200: '#b78ef9',
          300: '#9b5cf5',
          400: '#7c3aed', // base color
          500: '#6330be',
          600: '#4a248e',
          700: '#31185f',
          800: '#190c2f',
          // ... generated from your base color
        }
      }
    }
  }
}

A shade generator gives you all those values in seconds.

Data Visualization

When plotting multiple series or a heatmap, using shades of a single hue creates a natural visual hierarchy. The darkest shade represents the highest value, the lightest shade the lowest. This is more accessible than using multiple distinct hues, especially for users with color vision deficiency.

Email Templates

Email clients have notoriously inconsistent CSS support. Having pre-computed hex values (rather than relying on CSS functions like color-mix()) means your colors render correctly everywhere — from Apple Mail to Outlook 2013.

HexTints vs. Other Color Shade Generators

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

Frequently Asked Questions