Color Shades Generator
Generate a palette of 5 lighter tints and 5 darker shades from any hex color.
How to use this tool
- Enter your base hex color.
- Choose the number of steps (1–10) in each direction.
- The output lists tints (lighter), the base, then shades (darker).
Enter a hex color to generate a full palette of lighter tints and darker shades, useful for building design systems.
Formula
For each tint step i (1 to steps), mixing factor t = i / (steps + 1):Rtint = R + (255 − R) × t (similarly for G, B)
For each shade step j (1 to steps), darkening factor s = j / (steps + 1):Rshade = R × (1 − s) (similarly for G, B)
All channel values are clamped to 0–255 and rounded.
How it works
Tints are created by linearly interpolating each RGB channel toward white (255), simulating the effect of mixing a pigment with white paint. Shades are created by linearly interpolating toward black (0), simulating adding black paint. The step factor evenly spaces the palette between the base color and the extreme, excluding both the extreme itself and the base, so a palette of n steps per direction always places the base color at the center.
A common mistake is confusing tints with shades — a tint always mixes toward white (lighter), while a shade always mixes toward black (darker). In some design tools the word "shade" is used loosely to mean any variation; in color theory and in this tool's output the two terms are distinct. Mixing toward gray instead of white or black would produce tones, which is a third and different operation.
Worked example
Generate 1-step tint and shade from #ff0000 (pure red)
- Base: R = 255, G = 0, B = 0.
- Tint step 1: t = 1/(1+1) = 0.5; R = 255 + (255−255)×0.5 = 255; G = 0 + (255−0)×0.5 = 127.5 → 128; B = 128. Hex: #ff8080.
- Base hex: #ff0000.
- Shade step 1: s = 1/(1+1) = 0.5; R = 255×(1−0.5) = 127.5 → 128; G = 0; B = 0. Hex: #800000.
tint1: #ff8080 base: #ff0000 shade1: #800000
Common mistakes to avoid
- Choosing a base color with very high or very low lightness -- a near-white base leaves little room for tints, and a near-black base leaves little room for shades.
- Using RGB linear interpolation and expecting the same result as HSL-based tinting -- the two methods produce perceptually different ramps, with RGB tints sometimes looking grayish.
- Treating generated shades as brand palette stops without checking contrast ratios -- a visually distinct shade may still fail WCAG AA when used as text on its neighbor shade.
Key terms
- Tint
- A color created by mixing a base hue with white, progressively lightening the color while preserving its general hue; in RGB terms each channel moves toward 255.
- Shade
- A color created by mixing a base hue with black, progressively darkening the color; in RGB terms each channel is scaled down toward 0.
- Tone
- A color variation created by mixing a base hue with gray (neither pure white nor pure black); distinct from both tints and shades.
- Linear interpolation (lerp)
- A method of blending two values A and B by a factor t: result = A + (B − A) × t, where t = 0 gives A and t = 1 gives B; used here to space palette steps evenly.
Frequently asked questions
- What is the difference between a tint and a shade?
- A tint is a color mixed with white (lighter); a shade is a color mixed with black (darker). A tone mixes with grey.
- How are the steps calculated?
- Each step linearly interpolates the RGB channels toward white (for tints) or black (for shades) by an equal fraction.