How are the shades calculated?

Tints linearly interpolate each RGB channel toward white and shades toward black. The 50–900 tonal scale keeps the original hue and saturation while sweeping HSL lightness, which is how design-system colour ramps are built.

Are my colours uploaded anywhere?

No. Every tint, shade and tonal step is computed locally in your browser with JavaScript. Nothing about your colour is sent to a server.

What is the difference between a tint, a shade and a tone?

A tint is the base colour mixed toward white (lighter), a shade is mixed toward black (darker), and the 50–900 tonal scale sweeps lightness in HSL while preserving hue and saturation — the format design systems use.

Are the generated hex values accurate?

Yes. The conversions use standard sRGB and HSL maths, so the hex output is deterministic and matches what your design tool will render.

Color Shades & Tints Generator

This tool takes any base colour and generates a full palette from it: tints (progressively lighter), shades (progressively darker), and a 50–900 tonal scale like the ramps in Tailwind CSS or Material Design. It is built for designers and developers who have one brand colour and need a consistent set of lighter and darker variants for backgrounds, borders, hover states and text.

How it works

The base hex is parsed into RGB, then three families are produced:

Tints linearly interpolate each RGB channel toward white (255) by an increasing factor, so the colour gets lighter step by step.
Shades interpolate each channel toward black (0), getting darker.
Tonal scale (50–900) converts the colour to HSL and sweeps the lightness from about 95% down to about 10% while keeping the hue and saturation fixed — which is exactly how design-system colour ramps are built.

All conversions use standard sRGB and HSL maths, so the output is deterministic.

Example

From a base of #3b82f6 (a blue), the generator yields a 50 step near-white blue (around #eff6ff), the base sitting near the 500 step, and a 900 step that is a deep navy (around #1e3a8a) — the same shape as a Tailwind blue ramp. The tints column gives softer pastel blues and the shades column gives muted dark blues.

Click any swatch to copy its hex code. All shades are computed locally in your browser using standard sRGB and HSL maths — nothing is uploaded.