Color Shades Generator

/color-shades

Generate tints, shades, and tones of any color with copyable HEX, RGB, and HSL values.

Design systems need a full palette of tints, shades, and tones around a single brand color. This generator produces them automatically with copyable hex, RGB, and HSL values. It is ideal for building accessible color scales for UI work. Generation happens locally and instantly.

01Upload
02Configure
03Run
04Download

Base color (hex)

50#E8EEFD

100#BFD1F9

200#96B4F5

300#6E97F2

400#457AEE

500#1C5DEA

600#124BC8

700#0F3C9F

800#0B2D77

900#071D4E

950#030E25

CSS variables

--color-50: #E8EEFD;
--color-100: #BFD1F9;
--color-200: #96B4F5;
--color-300: #6E97F2;
--color-400: #457AEE;
--color-500: #1C5DEA;
--color-600: #124BC8;
--color-700: #0F3C9F;
--color-800: #0B2D77;
--color-900: #071D4E;
--color-950: #030E25;

Loading tool...

FAQ

Frequently asked questions

Everything you need to know about color shades generator.

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

Tints lighten a color toward white, shades darken it toward black, and tones desaturate it by mixing with gray. The tool generates all three variations for your base color.

Which color values are shown?

Every swatch shows its HEX, RGB, and HSL values, and each swatch has a one click copy button for the format you need.

How many variations are generated?

A stepped palette is generated across lightening and darkening directions, giving you a scale of colors to pick from for buttons, text, and backgrounds.

Is the palette generated locally?

Yes. Color math runs entirely in your browser, so nothing about your chosen colors is transmitted anywhere.

What are shades useful for?

Tints and shades are the backbone of design systems: they give you hover states, border colors, and background levels that stay harmonious with one base color.