Tool · Color Scale Generator

Tint and shade generator.

One base colour, N lighter and M darker shades - every step is tunable. Use the saturation, lightness, and hue shift sliders to bend each end of the ramp, then mix toward any target colour. Great for design system scales, dark-mode pairs, and Tailwind-style ramps.

6 darker · base · 4 lighter = 11 shades

Background

Base color

Lighter shades

Darker shades

Lighter end

mix

Saturation shift-51%

Lightness shift50%

Hue shift-51°

Darker end

mix

Saturation shift+67%

Lightness shift80%

Hue shift+67°

:root {
  --scale-50: #A9B5A6;
  --scale-100: #88AA88;
  --scale-200: #67A274;
  --scale-300: #449C69;
  --scale-400: #1D9A6C;
  --scale-500: #108E78;
  --scale-600: #078080;
  --scale-700: #00596E;
  --scale-800: #003555;
  --scale-900: #001B3D;
  --scale-950: #000925;
}

Open in palette visualizer ↗Use as Tailwind scale ↗

Build a consistent color ramp from one brand color

A color scale turns one base color into a sequence of lighter tints and darker shades. Use the ramp for surface fills, borders, hover states, charts, and emphasis while keeping each step related to the same starting hue. Adjust the number of steps and tune lightness, saturation, and hue shift independently to make the transition suit your interface rather than accepting a fixed set of swatches.

Check the ramp in the interface where it will be used

Review the light and dark ends against the actual page background. A smooth visual progression does not guarantee that every adjacent pair has enough contrast for text or controls. Test the combinations used for labels and buttons with the WCAG contrast checker, then export the scale in the format your design or development workflow needs.

What is the tints and shades generator?

A tints and shades generator creates lighter (tints) and darker (shades) versions of a color in even steps. This one builds a 50 to 950 scale in OKLCH so the steps look evenly spaced, with HEX for each.

Tints, shades and tones

A tint is a color mixed with white, a shade is a color mixed with black, and a tone is a color mixed with gray. Mixing in RGB produces muddy midtones; mixing in OKLCH keeps the hue stable as lightness changes, which is why the scales here look cleaner than a naive lighten or darken. You can set the number of steps, the lightness range and whether chroma tapers at the ends.

Scales export as CSS variables, Tailwind config, SCSS maps and a PNG strip.

Tints and Shades Generator FAQ

How do I make lighter and darker versions of a color?

Enter the HEX here. The generator returns tints (lighter) and shades (darker) in even perceptual steps with copyable HEX codes.

What is the difference between a shade and a tint?

A shade adds black to a color and a tint adds white. Both keep the hue; only the lightness changes.

How many shades should a UI color scale have?

Ten or eleven (50 to 950) is the convention in Tailwind, Radix and Material, which is enough to cover backgrounds, borders, fills and text.