🎨 Color Shades and Tints Generator
By ToolNimba Editorial Team · Updated 2026-06-19
Tints (toward white)
Base color
Shades (toward black)
Pick a base color. Click any swatch to copy its hex code.
This color shades generator takes one base color and builds a balanced scale around it: tints that mix toward white and shades that mix toward black, in even steps. Pick a color or paste a hex code, choose how many steps you want on each side, and click any swatch to copy its hex. Everything runs in your browser, so your colors never leave your device.
What is the Color Shades Generator?
A tint is your base color mixed with white, which makes it lighter and softer. A shade is your base color mixed with black, which makes it darker and deeper. Designers use these to build a single color into a full scale: a light tint for a hover background, the base for a button, and a dark shade for text or a pressed state. Working from one hue keeps a palette feeling consistent instead of a random set of unrelated colors.
The tool computes each step directly in RGB. To make a tint, every channel is moved a set fraction of the way toward 255 (pure white). To make a shade, every channel is scaled down by the same fraction toward 0 (pure black). With five steps on each side, the fractions are spaced evenly (roughly 17%, 33%, 50%, 67%, 83%), so the swatches step smoothly from very light, through your base color, to very dark.
This RGB scaling is the simplest and most predictable way to generate shades, and it matches how mixing paint or ink behaves: add more white and it lightens, add more black and it darkens. It is not the only method (some tools adjust lightness in HSL or HSV, which can keep saturation steadier), but linear RGB mixing is intuitive, fast, and gives clean, evenly spaced results that are easy to read off as hex codes.
When to use it
- Building a button color scale: a light tint for hover, the base for the default state, and a dark shade for the pressed or active state.
- Generating light background and dark text variants of a single brand color so a section still feels on brand.
- Creating CSS custom properties (like --blue-100 through --blue-900) for a design system from one starting hue.
How to use the Color Shades Generator
- Pick a base color with the color picker, or type or paste a hex code into the HEX field.
- Set how many steps you want on each side (2 to 10). More steps give a finer, smoother scale.
- Read off the tints above the base and the shades below it.
- Click any swatch to copy its hex code to your clipboard.
Formula & method
Worked examples
Base color #337BFF (R 51, G 123, B 255), one tint at f = 0.2 (toward white).
- R = 51 + (255 - 51) x 0.2 = 51 + 40.8 = 91.8, rounds to 92
- G = 123 + (255 - 123) x 0.2 = 123 + 26.4 = 149.4, rounds to 149
- B = 255 + (255 - 255) x 0.2 = 255
- Convert (92, 149, 255) to hex
Result: Tint = #5C95FF
Base color #337BFF (R 51, G 123, B 255), one shade at f = 0.2 (toward black).
- R = 51 x (1 - 0.2) = 51 x 0.8 = 40.8, rounds to 41
- G = 123 x 0.8 = 98.4, rounds to 98
- B = 255 x 0.8 = 204
- Convert (41, 98, 204) to hex
Result: Shade = #2962CC
Tints and shades of #337BFF with 5 steps each side (lightest to darkest)
| Step | Type | Mix fraction f | Hex |
|---|---|---|---|
| 1 | Tint | 0.833 | #DDE9FF |
| 2 | Tint | 0.667 | #BBD3FF |
| 3 | Tint | 0.500 | #99BDFF |
| 4 | Tint | 0.333 | #77A7FF |
| 5 | Tint | 0.167 | #5591FF |
| - | Base | 0 | #337BFF |
| 6 | Shade | 0.167 | #2B67D5 |
| 7 | Shade | 0.333 | #2252AA |
| 8 | Shade | 0.500 | #1A3E80 |
| 9 | Shade | 0.667 | #112955 |
| 10 | Shade | 0.833 | #08142A |
Tint vs shade at a glance
| Term | Mixed with | Effect on the color |
|---|---|---|
| Tint | White | Lighter, softer, channels move toward 255 |
| Shade | Black | Darker, deeper, channels move toward 0 |
| Tone | Gray | Muted, less saturated (not produced by this tool) |
Common mistakes to avoid
- Confusing a tint with a shade. A tint adds white and lightens the color; a shade adds black and darkens it. Mixing the terms up leads to picking the wrong variant for a hover or text state.
- Expecting the hue to stay perfectly identical. Linear RGB mixing keeps the color recognizable, but very dark shades and very light tints can look slightly less saturated. That is normal for this method; if you need steadier saturation, adjust lightness in HSL instead.
- Using a near white or near black base. If your base is almost white, the tints have little room left and look nearly identical; the same happens with shades of a near black base. Start from a mid tone to get a useful, evenly spaced scale.
- Picking adjacent steps for text on background. Two neighboring swatches may not have enough contrast for accessible text. Pair a light tint with a dark shade (not two that sit close together) and check the contrast ratio.
Glossary
- Tint
- A color mixed with white, producing a lighter, softer version of the original hue.
- Shade
- A color mixed with black, producing a darker, deeper version of the original hue.
- Tone
- A color mixed with gray, which mutes it. Tones reduce saturation rather than just lightening or darkening.
- Hex code
- A six digit code like #337BFF that encodes the red, green, and blue channels of a color in base 16.
- RGB channel
- One of the three components (red, green, blue) of a color, each ranging from 0 to 255.
Frequently asked questions
What is the difference between tints and shades?
A tint is a color mixed with white, so it is lighter than the original. A shade is a color mixed with black, so it is darker. This tool generates both from your base color, with tints above and shades below.
How does the color shades generator calculate each step?
It works in RGB. For a tint, each red, green, and blue channel is moved a set fraction toward 255 (white). For a shade, each channel is scaled down by that fraction toward 0 (black). The steps are spaced evenly across the range.
How do I copy a color from the results?
Click any swatch and its hex code is copied to your clipboard. The status line at the bottom confirms which value was copied.
Can I change how many shades and tints are generated?
Yes. Set the steps each side field to any value from 2 to 10. A higher number produces a finer, smoother scale with more swatches on both the tint and shade side.
Does this tool send my colors anywhere?
No. All calculation happens in your browser with plain JavaScript. Nothing is uploaded, so your colors and palette stay private on your own device.
What is a tone, and does this generator make tones?
A tone is a color mixed with gray, which mutes its saturation. This generator produces tints (toward white) and shades (toward black) only. To create tones you would reduce saturation, for example by editing the color in HSL.