Color Shades Generator: Tints and Shades from One Hex Color

Enter one base color and get eleven lighter and darker versions of it, numbered 50 to 950, with a block of CSS variables ready to copy.

Runs in your browserFree, no sign-upLast reviewed October 8, 2026

Shades

100

200

300

400

500

600

700

800

900

950

Base colour

#4f46e5

CSS variables

:root {
  --brand-50: #f2f2fd;
  --brand-100: #e1e0fb;
  --brand-200: #bfbcf5;
  --brand-300: #948fef;
  --brand-400: #655ee8;
  --brand-500: #362de1;
  --brand-600: #241cc4;
  --brand-700: #1d169c;
  --brand-800: #161174;
  --brand-900: #0f0b50;
  --brand-950: #090731;
}

Base values

HEX: #4f46e5
Hue: 243deg
Saturation: 75%
Shades: 11

Quick answers

How do I get lighter and darker shades of a color?: Enter its hex code as the Base colour. The tool returns eleven versions with the same hue: steps 50 to 400 are lighter tints, 500 is a mid tone and 600 to 950 are darker shades. For red #ef4444 the scale runs from #fef1f1 to #340404.
What is the difference between a tint and a shade?: A tint is a color made lighter, traditionally by adding white. A shade is a color made darker by adding black. A tone is a color dulled by adding gray. On a numbered scale, the low numbers are tints and the high numbers are shades.
How do you create a shade of a color?: Keep the hue the same and lower the lightness. In HSL terms, hsl(217, 91%, 60%) becomes a shade at hsl(217, 91%, 35%). This tool does that for you at fixed lightness levels of 44%, 35%, 26%, 18% and 11% for steps 600 to 950.
What do the numbers 50 to 950 mean?: They are step names, not measurements. 50 is the lightest tint, 500 is the middle of the scale and 950 is the darkest shade. The numbering comes from Material Design and Tailwind CSS, and using it means other developers can guess what --brand-100 or --brand-700 looks like.
Is my exact base color included in the scale?: Not necessarily. Every step has a preset lightness, so your color appears unchanged only if its lightness happens to match a step. #4f46e5 has 59% lightness and falls between 400 (#655ee8) and 500 (#362de1). Keep your original hex as its own variable if you need it exactly.

What Colour Shades Generator does

This color shades generator turns a single hex color into a scale of eleven tints and shades, labeled 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 and 950 in the style used by Tailwind CSS and many design systems. It reads the hue and saturation of your base color, keeps both fixed and sets the lightness to eleven preset levels, from 97% at step 50 down to 11% at step 950. For the default #4f46e5 the scale runs from #f2f2fd to #090731. A Saturation shift slider makes the whole scale more vivid or more muted, and the result comes as swatches plus CSS custom properties named after your token.

Lightness of each step from 50 to 950

Every scale uses the same eleven lightness levels. Hue and saturation come from your base color. The example column is the output for #4f46e5 (hue 243, saturation 75%).

Step	HSL lightness	Example from #4f46e5	Typical use
50	97%	#f2f2fd	Page or section background tint
100	93%	#e1e0fb	Hover background, subtle fills, badges
200	85%	#bfbcf5	Borders and dividers on light surfaces
300	75%	#948fef	Disabled states, text on dark backgrounds
400	64%	#655ee8	Icons, secondary accents
500	53%	#362de1	The mid tone, main accent
600	44%	#241cc4	Buttons and links on white
700	35%	#1d169c	Hover and pressed states, strong text
800	26%	#161174	Headings, dark fills
900	18%	#0f0b50	Text on tinted backgrounds
950	11%	#090731	Dark theme surfaces

The uses are common conventions, not rules. Check text and background pairs with a contrast checker before relying on them.

Example shade scales for common colors

Output with Saturation shift at 0%.

Step	Red #ef4444	Amber #f59e0b	Green #22c55e	Blue #3b82f6	Gray #808080
50	#fef1f1	#fef9f0	#f2fdf6	#f0f6fe	#f7f7f7
100	#fcdede	#fef2dd	#e0faea	#dde9fd	#ededed
200	#f9b9b9	#fce2b6	#bef4d2	#b6d1fc	#d9d9d9
300	#f58a8a	#facf85	#92edb3	#85b2f9	#bfbfbf
400	#f05656	#f8ba4f	#62e492	#5090f7	#a3a3a3
500	#ec2222	#f5a519	#32dc70	#1a6ef4	#878787
600	#ce1212	#d78c09	#21c05b	#0a58d6	#707070
700	#a40e0e	#ab6f07	#1a9948	#0846aa	#595959
800	#7a0b0b	#7f5305	#137136	#06347f	#424242
900	#540707	#583904	#0d4e25	#042458	#2e2e2e
950	#340404	#362302	#083017	#031636	#1c1c1c

These are this tool's own scales. They share Tailwind's step names but are not the hand tuned Tailwind palette values.

What the settings change

Default scale as CSS variables

Base colour #4f46e5, Token name brand, Saturation shift 0%

:root { --brand-50: #f2f2fd; --brand-100: #e1e0fb; --brand-200: #bfbcf5; --brand-300: #948fef; --brand-400: #655ee8; --brand-500: #362de1; --brand-600: #241cc4; --brand-700: #1d169c; --brand-800: #161174; --brand-900: #0f0b50; --brand-950: #090731; }

The download is named brand-palette.css.

More vivid

Base colour #4f46e5, Saturation shift +15%

Saturation rises from 75% to 90%. Step 300 changes from #948fef to #8c86f9 and step 500 from #362de1 to #261bf3.

More muted

Base colour #4f46e5, Saturation shift -30%

Saturation falls to 45%. Step 500 becomes #5751bd and step 100 becomes #e6e5f5.

A neutral gray scale

Base colour #808080

#f7f7f7, #ededed, #d9d9d9, #bfbfbf, #a3a3a3, #878787, #707070, #595959, #424242, #2e2e2e, #1c1c1c

Black #000000 and white #ffffff produce this same scale, because all three have zero saturation.

Token name with spaces

Base colour #3b82f6, Token name my blue!

Variables are named --my-blue--50 to --my-blue--950

Anything other than letters, digits and hyphens is replaced with a hyphen so the variable names stay valid.

How this differs from mixing a color with white and black

There are two common ways to build tints and shades. The classic method mixes the base color with white or black in fixed percentages: a 10% tint moves each of the red, green and blue values 10% of the way to 255, and a 10% shade keeps 90% of each value. The steps are relative to the base color, the base is always part of the set, and a pale base produces pale shades.

This generator uses the other method. It converts the base color to HSL, keeps hue and saturation, and replaces lightness with eleven fixed levels. The steps are absolute: step 100 is always a very light color and step 900 always a very dark one, whatever you start from. That is what you want for a design system, where every color family should have the same lightness at the same step so the scales are interchangeable.

The trade-offs are that the base color itself may not appear, and that very light and very dark steps can look less colorful than the middle of the scale, since there is less room for color near white and black. A small positive Saturation shift helps with a washed out look. Saturation cannot go above 100% or below 0%, so the shift has no effect upward on an already pure color such as #ff0000.

Tips for using a generated scale

For text on a white background, start from step 600 or darker. For text on a dark background, start from step 300 or lighter. Confirm each pair reaches a 4.5:1 contrast ratio.
Generate a gray scale as well as your brand scale. Most of an interface is neutral, and #808080 as the base with Saturation shift at 0% gives eleven pure grays.
Use the same step for the same job across color families, such as 100 for badge backgrounds and 700 for badge text.
Light themes mostly draw on 50 to 200 for surfaces. Dark themes use 800 to 950 for surfaces and 200 to 400 for text.
To use the output in Tailwind CSS, paste the eleven values into your theme under one color name. The step names already match.

Step by step

1
Enter the Base colour as a hex code or pick it with the color swatch.
2
Type a Token name, such as brand or primary. It becomes the prefix of every CSS variable, for example --brand-500.
3
Leave Saturation shift at 0%, or move it between -30% and +30% to make every step more muted or more vivid.
4
Read the eleven swatches in the Shades panel, lightest first. Each is labeled with its step number and has a copy button for its hex code.
5
Copy the CSS variables block, or download it as a .css file named after your token.

Questions people ask

Can I change how many shades are generated or the step size?

No. The tool always returns eleven steps at fixed lightness levels. If you need a custom number of steps or tints at exact 10% intervals, mix your color with white or black in a color mixer and set the number of steps there.

Why does step 500 not match my base color?

Step 500 always has 53% lightness. If your color is lighter or darker than that, 500 will be a different color with the same hue. Blue #3b82f6 has 60% lightness, so its step 500 is the deeper #1a6ef4 and the original sits between 400 and 500.

Are these the official Tailwind CSS color values?

No. The scale borrows Tailwind's 50 to 950 step names, but the colors are calculated from your base color by a simple lightness rule. Tailwind's built in palettes are hand tuned and will differ, even if you start from one of its 500 values.

What does Saturation shift do?

It adds or subtracts up to 30 percentage points from the base color's saturation before the scale is built, and the Base values panel shows the saturation actually used. Positive values give richer colors, negative values give grayer ones. The hue never changes.

Can I generate scales for several colors at once?

One base color at a time. Generate a scale, copy or download the CSS, then change the Base colour and Token name for the next one. Giving each a different token name keeps the variable names from clashing.

What formats does it export?

Hex only. Each swatch is labeled with its step number and has a copy button for its 6-digit hex code, and the code block is a :root rule with eleven CSS custom properties, which you can copy or download as a .css file. There is no JSON, SCSS, RGB or HSL export.

How do I find the shade of a color I already have?

Look at its HSL lightness and compare it with the step levels. On this scale, 64% lightness or more puts a color among the tints (steps 50 to 400) and 44% or less among the shades (steps 600 to 950). Enter the hex code here and see which two swatches it falls between.

Does it use HSL or a perceptual color space?

HSL. That keeps the calculation simple and predictable, but HSL lightness is not the same as perceived brightness, so a yellow scale looks brighter step for step than a blue one. Scales built in OKLCH are more even, and this tool does not offer that option.