Color Shades Generator
Make tints, shades and tones of any color.
Color Shades Generator: the tool
Base color
The base color and the end color (white, black or grey) are not counted.
Each step moves the same distance from the base toward white, black or grey. Press a color to copy its HEX code.
Results
Tints
Mixed with white. Lighter and softer.
10% toward white
20% toward white
30% toward white
40% toward white
50% toward white
60% toward white
70% toward white
80% toward white
90% toward white
Shades
Mixed with black. Deeper and darker.
10% toward black
20% toward black
30% toward black
40% toward black
50% toward black
60% toward black
70% toward black
80% toward black
90% toward black
Tones
Mixed with grey. Calmer and less saturated.
10% toward grey
20% toward grey
30% toward grey
40% toward grey
50% toward grey
60% toward grey
70% toward grey
80% toward grey
90% toward grey
Scale from 50 to 950
Eleven steps named like the color ramps of design systems, with your color as 500.
50
100
200
300
400
500
600
700
800
900
950
Export as code or data
Letters, digits and dashes.
Enter one color and get the lighter and darker versions you need for hover states, backgrounds, borders and text. The tool makes three ramps, tints toward white, shades toward black and tones toward grey, and an eleven-step scale from 50 to 950 in which your color is the 500. Copy any color, a whole ramp, or the scale as CSS variables, SCSS, Tailwind or JSON.
How it works
A tint is the color mixed with white, a shade is the color mixed with black, and a tone is the color mixed with grey. Each ramp divides the distance from your color to the end color into equal steps. With nine steps, the first tint is 10% of the way to white, the next is 20%, and so on up to 90%. Neither the base color nor the end color is part of a ramp.
The mixing is done channel by channel on the red, green and blue values, in a straight line. It is the same arithmetic as the CSS function color-mix in the sRGB space, so you can reproduce any step in a stylesheet by mixing your color with white, black or grey in the same percentage.
The scale from 50 to 950 follows the way design systems name their ramps. The five lighter steps mix the base with white by 92%, 84%, 68%, 50% and 26%. The five darker steps mix it with black by 14%, 30%, 46%, 62% and 78%. Your color sits unchanged at 500. The text on every swatch is black or white, whichever is easier to read.
How to use it
- Enter your base color as HEX or in another format, or choose it with the picker.
- Choose how many steps each ramp has.
- Press any swatch to copy its HEX code, or press Copy HEX codes above a ramp to take the whole ramp.
- In the scale section, open Export as code or data, set the name of the scale and copy it as CSS variables, Tailwind or JSON.
Example
The tints and shades of one blue, in five steps each, and the 50 to 950 scale, calculated by the same code as the tool above.
What was set
- Base color
- #3B82F6
- Steps
- 5
What came out
- Tints
- #5C97F8, #7CACF9, #9DC1FB, #BED5FC, #DEEAFE
- Shades
- #316CCD, #2757A4, #1E417B, #142B52, #0A1629
- Scale 50
- #EFF5FE
- Scale 500
- #3B82F6
- Scale 950
- #0D1D36
Good to know
- Each ramp has from 3 to 19 steps.
- Mixing in sRGB is simple and reproducible, but it is not perceptual. Equal steps do not always look equal, and the middle of a ramp can look slightly different in hue from the base color.
- The 50 to 950 scale is a quick starting point, not a hand-tuned ramp. Designers often adjust the saturation of the lightest and darkest steps by eye.
- Check text on any step with the contrast checker. A step that looks readable on your screen can still fall below the WCAG minimum.
Questions people ask
What is the difference between a tint, a shade and a tone?
A tint adds white, so the color gets lighter. A shade adds black, so it gets darker. A tone adds grey, so it becomes less saturated and calmer. All three keep the same basic hue as the color they come from.
How do I create a Tailwind color scale from one color?
Enter your color, open Export as code or data under the scale, choose the Tailwind format and set the name, for example brand. Paste the result into your stylesheet, and classes such as bg-brand-500 and text-brand-900 become available in Tailwind CSS version 4.
Can I get the same colors with CSS color-mix?
Yes. A tint at 30% is color-mix(in srgb, your-color 70%, white), which is the same arithmetic as this tool. Using generated values instead has the advantage that they are fixed colors, which every tool and browser understands.
Why does the middle of a ramp sometimes look different in hue?
Straight mixing in sRGB does not account for how the eye sees colors, so some hues drift a little toward grey or toward another hue as they are mixed. If that bothers you, adjust the middle steps by hand with the color picker.