Color Shades & Tints Generator

What is a color shades and tints generator?

A shades and tints generator takes a single color and expands it into a complete, structured scale — a row of progressively lighter tints and progressively darker shades of the same hue. Instead of hand-mixing eleven related colors and hoping they look consistent, you pick one base and get the whole family at once. When you need several distinct colors that work together rather than one color's range, reach for our Color Palette Generator instead.

The tool above produces the 50–950 scale that has become the standard in modern design systems and in Tailwind CSS: eleven steps, from 50 (the palest tint) through 500 (near your base) to 950 (the deepest shade). Each step shows its number and hex value, and a click copies it. When you're done, export the entire scale as a Tailwind config block, CSS custom properties or JSON design tokens.

What sets this generator apart is how it spaces the steps. It builds the scale in OKLCH, a perceptual color space, so the lightness changes look even to the human eye rather than bunching up in the middle.

How to use it

1. Choose a base color. Use the picker or type a hex value like #3b82f6 — convert one from RGB or HSL first with our Color Converter if that is the format you have. This anchors the hue and intensity of the whole scale.
2. Name the scale. Give it a token name like brand, primary or accent — this is the key used in the exported Tailwind and CSS output.
3. Read the scale. The 11 steps appear from 50 (lightest) to 950 (darkest), each labeled with its step number and hex code.
4. Copy a single step. Click any row to copy that one hex value.
5. Export everything. Copy the full scale as a Tailwind config, CSS variables or JSON tokens and paste it into your project.

It all runs locally, so the scale recomputes instantly as you change the base color.

Why naive HSL shade scales look uneven

The intuitive way to make shades is to take a color in HSL and slide the lightness value up and down in equal steps. It seems reasonable — and it produces scales that look wrong.

The problem is that HSL's lightness is a simple mathematical average of the channels, not a measure of perceived brightness. Human vision is far more sensitive to changes in some hues than others, and HSL ignores that completely. So an evenly spaced HSL ramp gives you tints that barely differ at the light end, a sudden jump through the mid-tones, and muddy, oversaturated shades at the dark end. Yellows wash out; blues turn to black too quickly. The numbers are evenly spaced, but your eyes don't agree.

This is why so many hand-built color scales feel lumpy: steps 100 and 200 look almost identical while 600 to 700 is a cliff.

What OKLCH is and why it keeps lightness consistent

OKLCH is the cylindrical form of OKLab, a perceptual color space published by Björn Ottosson in 2020. It has three intuitive axes:

• L — perceptual lightness, from 0 (black) to 1 (white), tuned so equal steps look equal.
• C — chroma, how colorful the color is.
• H — hue, the angle on the color wheel.

Because OKLCH's L axis is designed around human perception, spacing your steps evenly along it gives you a scale that feels evenly spaced. This generator picks eleven perceptually balanced L values for the 50–950 steps, holds the hue constant so the whole ramp stays in one color family, and gently tapers the chroma at the extremes (very light tints and very dark shades simply can't carry as much saturation while staying inside the sRGB range). The result is converted back to standard sRGB hex codes, clamped to gamut, so you can use them anywhere.

Under the hood the math goes sRGB → linear sRGB → OKLab → OKLCH and back — all deterministic, all in your browser, no external libraries. You get the perceptual quality of OKLCH with plain hex output your tools already understand.

How design systems use 50–950 scales

Fixed numeric scales solve a real organizational problem: they give every color in a product the same shape. Once brand-500 is your primary and gray-200 is your border color, designers and developers share a vocabulary, and theming becomes a matter of swapping the values behind the names rather than rewriting components.

A few conventions are worth knowing:

• 50–100 are backgrounds and subtle fills (think hover states and tinted panels).
• 200–300 suit borders, dividers and disabled states.
• 400–600 are your workhorses for primary surfaces, buttons and links; 500 is usually the "true" brand color.
• 700–950 are for text on light backgrounds, deep accents and dark-mode surfaces.

Keeping shades on these rails means a component built with bg-brand-50 text-brand-900 automatically looks right with any color you generate.

Using the scale in Tailwind CSS

The fastest path is the Tailwind config export. Copy it and drop the colors block into tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          "50": "#eff6ff",
          "500": "#3b82f6",
          "950": "#172554",
          // …all 11 steps
        },
      },
    },
  },
};

Now utilities like bg-brand-500, text-brand-700, border-brand-200 and ring-brand-300 work across your whole project. Prefer plain CSS or a non-Tailwind stack? Export the same scale as CSS custom properties (--brand-500: …) and reference them with var(--brand-500), or grab the JSON tokens to feed a design-token pipeline like Style Dictionary.

Free, private and perceptually correct

There's no sign-up, no watermark and no export paywall. Generate a scale for every color in your system, copy it in the format your stack needs, and trust that the steps will look as even as they measure — because they're built in OKLCH. Everything happens in your browser, so your colors stay yours.