My Tool Studio
Color

Color Shades Generator

This color shades generator takes one HEX color and builds an even scale of tints and shades, from near white through your color to near black. Choose 5 to 21 steps and every swatch comes with its code, a copy button, and a label showing whether white or black text reads better on it and at what ratio. Mix in LAB, LCH, RGB or linear RGB, and show codes as HEX, RGB or HSL. Separate rows list tints, shades and tones, where tones mix toward gray. You can also export an 11 step scale numbered 50 to 950, with your color at 500, as Tailwind v4 @theme CSS, a Tailwind v3 config, CSS variables, SCSS, JSON, SVG, PNG, ASE or PDF, and share the setup as a link.

Always freeNo sign upRuns in your browser
Show codes as

Left half: tints (mixed toward white). Middle: your base. Right half: shades (mixed toward black). The label shows which text color reads best on each swatch and its contrast ratio.

#FFFFFF
black text 21.0:1 AAA
#E5DFFD
black text 16.3:1 AAA
#C9BFFB
black text 12.3:1 AAA
#ACA0F8
black text 9.1:1 AAA
#8B83F5
black text 6.7:1 AA
#6366F1
black text 4.7:1 AA
#5151BC
white text 6.5:1 AA
#3F3D89
white text 9.4:1 AAA
#2D2B5A
white text 13.1:1 AAA
#1B192F
white text 17.1:1 AAA
#000000
white text 21.0:1 AAA

Export as a 50 to 950 scale

500 is your base color. Lower numbers are lighter, higher numbers darker.

50
100
200
300
400
500
600
700
800
900
950

More export formats (SCSS, JSON, SVG, PNG, ASE, PDF, GPL)

$brand-50: #F2EFFE;
$brand-100: #E5DFFD;
$brand-200: #C9BFFB;
$brand-300: #ACA0F8;
$brand-400: #8B83F5;
$brand-500: #6366F1;
$brand-600: #5151BC;
$brand-700: #3F3D89;
$brand-800: #2D2B5A;
$brand-900: #1B192F;
$brand-950: #120F1B;

Tints, shades and tones

Separate rows, each mixed in equal steps in RGB: tints toward white, shades toward black, tones toward a gray of the same lightness.

Tints
Shades
Tones

How to use

01

Enter your base color

Type a HEX code such as #6366F1 into Base color, paste an rgb() or hsl() value, or use the picker. The scale and export update as soon as the value is valid.

02

Choose the number of steps

Drag Steps between 5 and 21. The left half of the strip holds tints, the middle is your color, and the right half holds shades. Each row shows the readable text color and ratio.

03

Copy the scale or export tokens

Press Copy on a swatch or Copy all. In the 50 to 950 section, set a Color name, then use Copy Tailwind v4 @theme, Copy Tailwind v3 config or Copy CSS variables.

Why Color Shades Generator

Tints, shades and tones, and how to use them in UI states

A tint adds white, a shade adds black, and a tone adds gray. Tints feel lighter and softer, shades feel heavier and more serious, and tones feel muted. This generator gives you tints and shades on one scale, with your base color in the middle.

In an interface, a single scale covers most states of a component. A common pattern with a 50 to 950 scale is below. Always check text contrast using the labels on each swatch, and remember that dark mode usually flips the scale, using light steps for text and dark steps for surfaces.

  • 50 to 100: page or card backgrounds, selected rows.
  • 200 to 300: borders, dividers and disabled fills.
  • 500: the main brand color for buttons and links.
  • 600 to 700: hover and pressed states for those buttons.
  • 800 to 950: headings and text on light backgrounds.

Common questions

What is the difference between a tint, a shade and a tone?
A tint is a color mixed with white, a shade is mixed with black, and a tone is mixed with gray. This generator makes tints and shades. For tones, lower the saturation of your color in an HSL tool and run the result through here.
How do I make a color darker without it looking muddy?
Mix toward black in a perceptual space such as LAB, which this tool does, instead of just lowering RGB values. For extra richness in dark shades, some designers also shift the hue slightly toward blue or purple, which you can do in the Color Picker.
How many shades should a design system have?
Tailwind and many design systems use 10 or 11 steps per color, numbered 50 to 900 or 950. That gives enough options for backgrounds, borders, text and hover states without too many near duplicates.
How do I get lighter shades of a hex color?
Enter the hex and look at the left half of the strip: those are tints, getting lighter toward white. For a lighter version close to your color, copy the step just left of the middle.
Can I export color shades for Tailwind CSS?
Yes. Set a Color name, such as brand, and press Copy Tailwind v4 @theme for --color-brand-50 to --color-brand-950 variables, or Copy Tailwind v3 config for a colors object. Your base color is always the 500 step.
What does the contrast label on each shade mean?
It shows whether white or black text gives more contrast on that swatch and the ratio it reaches. AAA means 7:1 or more and AA means 4.5:1 or more. Every color reaches at least 4.5:1 with one of the two, so the label tells you which text color to use.
Why does the shades generator use LAB instead of HSL?
Equal steps in HSL lightness do not look equal to the eye, and yellows and blues behave very differently. LAB is built so that equal steps look roughly equal, so the scale feels smooth from light to dark.
Do the shades always run from white to black?
The strip always starts at white and ends at black, with your color in the middle. In the 50 to 950 export the ends are softer: 50 sits a tenth of the way from white to your color, and 950 a tenth of the way from black.
What are tones in the color shades generator?
Tones mix your color toward a gray of the same lightness instead of toward white or black. They keep roughly the same lightness but lose saturation, which is useful for muted backgrounds, disabled states and large areas where the full color would feel loud.

More Color tools

View all

Color Picker

Pick colors and copy HEX, RGB, HSL, CMYK, OKLCH

Color

Color Palette Generator

Generate palettes with lock, harmonies and export

Color

HEX to RGB Converter

Convert HEX color codes to RGB and RGBA

Color

RGB to HEX Converter

Convert RGB and RGBA values to HEX

Color