Full palette of #3b82f6 — 11 steps from tint to shade

← Tints (lighter) Shades (darker) →
Customize this palette →

Color Tint and Shade Generator — Build Complete Palettes from One Hex Code

Last updated: March 2026

A color tint and shade generator is one of those tools that seems simple on the surface — you enter a color, it gives you lighter and darker versions. But the time it saves is enormous. If you've ever tried to manually compute 10 lighter and 10 darker variants of a hex color for a design system, you know exactly why these tools exist.

We built HexTints as a free color tint and shade generator because we kept running into the same workflow bottleneck: you pick a perfect brand color, and then the real work begins — deriving every variant you'll need for backgrounds, text, borders, hover states, disabled states, dark mode surfaces, and more. Doing that by hand, even with HSL, takes way too long.

Enter a hex code, get the full spectrum, copy what you need. That's it.

What Does a Tint and Shade Generator Actually Do?

At the core, a tint and shade generator performs two operations on your base color:

Tint generation: Blends the color with white at increasing intensities. Each step produces a progressively lighter version. The lightest tint approaches pure white while still carrying a faint trace of the original hue.

Shade generation: Blends the color with black at increasing intensities. Each step produces a progressively darker version. The darkest shade approaches pure black while retaining the color's undertone.

The result is a full lightness scale — typically 10–20 swatches — from near-white through your base color to near-black. All of them share the same hue. All of them are mathematically consistent.

The Math Behind It

For tints (toward white): tint_value = base + (255 − base) × step

For shades (toward black): shade_value = base × (1 − step)

Where step increments evenly (0.1, 0.2, 0.3, etc.) to produce equally spaced variations.

Good generators use proportional blending (the formulas above) rather than linear RGB interpolation, because proportional blending preserves the hue more accurately — especially at the extremes where colors tend to shift.

Why You Need a Generator (Not Manual Calculations)

Speed

Computing a 10-step tint scale and a 10-step shade scale for one color means running the formula 60 times (3 channels × 20 steps). For three brand colors, that's 180 calculations. A generator does all of it in milliseconds.

Consistency

Hand-picking shade values leads to inconsistency — the perceptual jump between step 3 and step 4 might be twice as large as the jump between step 6 and step 7. A generator uses uniform factor increments, producing evenly distributed results.

Accuracy

When converting between hex, RGB, and HSL by hand (or in your head), rounding errors accumulate. A generator handles the math precisely and outputs clean hex values ready for production use.

Iteration

Change your mind about the base color? With a generator, you re-enter the new hex code and get an entirely new palette in seconds. Manual approaches mean starting the math over from scratch.

How to Use Generated Tints and Shades

CSS Custom Properties

Map your generated values directly to custom properties for a complete, tokenized color scale:

:root {
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6; /* base */
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e3a8a;
  --blue-900: #1e3050;
  --blue-950: #0f1729;
}

50–400 are tints (lighter). 600–950 are shades (darker). 500 is your base. This pattern mirrors how Tailwind CSS, Radix, and most modern design systems organize color.

Tailwind CSS Config

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50:  '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          800: '#1e3a8a',
          900: '#1e3050',
          950: '#0f1729',
        }
      }
    }
  }
}

Figma / Design Tool Variables

Most design tools now support variable collections. Create a collection called "Brand Colors," add each generated tint and shade as a color variable, and reference them across your entire design file. When the base color changes, regenerate and update the variables — every component that references them updates automatically.

Dark Mode Mapping

A common pattern: your light-mode background uses --blue-50, cards use --blue-100, and text uses --blue-900. For dark mode, flip it — background becomes --blue-950, cards use --blue-900, and text uses --blue-100. The same generated scale powers both themes.

What Makes a Good Tint and Shade Generator

Not all generators produce equally useful results. Here's what separates the good ones:

HexTints — A Free 0to255 Alternative

HexTints was built as a free alternative to 0to255, the original tint/shade generator that popularized the concept. Full tint-to-shade spectrum, click-to-copy hex codes, instant results, clean interface, shareable color URLs (e.g., hextints.com/colors/#3b82f6). No ads, no upsells, no accounts.

Every color gets its own URL, so you can share specific palettes with teammates by sending a link. Combined with the color shades generator workflow, you can build an entire design token system in minutes.

Frequently Asked Questions