🎨 Color Shades Generator: Tints and Shades from Any Hex

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 lean on this color shades generator to expand a single hue into a working scale: a pale tint for a hover background, the base for a default button, and a deep shade for text or a pressed state. Building everything from one hue keeps a palette feeling deliberate instead of a random pile 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. Because the math is deterministic, the same hex always yields the same scale, which is exactly what you want when you are pasting values into a stylesheet.

This linear RGB scaling is the simplest and most predictable way to generate shades, and it mirrors 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 shift lightness in HSL or HSV, which can hold saturation steadier at the extremes, and perceptual spaces like OKLCH aim for steps that look equally spaced to the human eye. Linear RGB wins on being intuitive, fast, and giving clean values that are trivial to read off as hex codes.

A common use is generating a numbered ramp for a design system, such as blue-50 through blue-900. The lightest tints work as surface and hover fills, the middle sits near your brand color, and the darkest shades carry high contrast text. Naming the steps consistently across every hue (blue-500, red-500, green-500 all being the base) is what makes a token system easy to reason about and easy for engineers to apply.

One caveat worth understanding: linear RGB does not perfectly preserve perceived hue or saturation at the ends of the scale. Very light tints can look slightly washed out and very dark shades can drift toward a muddy neutral. That is expected, and for most UI work it is fine because the base and mid steps carry the brand feel. When you need the ends to stay vivid, generate the scale here to get started fast, then hand tune the extreme tints and shades in an HSL or OKLCH editor.

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.
• Producing chart or data visualization ramps where each category needs several distinguishable shades of the same color.
• Prototyping a full palette quickly when a client gives you only one logo color to work from.

How to use the Color Shades Generator

1. Pick a base color with the color picker, or type or paste a hex code into the HEX field.
2. Set how many steps you want on each side (2 to 10). More steps give a finer, smoother scale.
3. Read off the tints above the base and the shades below it.
4. Click any swatch to copy its hex code to your clipboard.
5. Paste the copied hex codes straight into your CSS, design tool, or brand guide.

Formula & method

Worked examples

Tints and shades of #337BFF with 5 steps each side (lightest to darkest)

Tint vs shade vs tone at a glance

Common design system uses for a 3 step scale

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 or OKLCH 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.
• Assuming a fixed number of steps fits every hue. Bright yellows and cyans reach visual white faster than deep blues do. If the light end looks blown out, reduce the step count or hand tune the top few tints.
• Copying hex codes without labeling them. A row of raw hex values is easy to mix up later. Save them into named tokens (like blue-100 to blue-900) so teammates know which step is the base and which are variants.

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.

Mix fraction

The value f from 0 to 1 that sets how far a channel moves toward white (tint) or black (shade) in one step.

Color ramp

An ordered set of related colors, usually from light to dark, used as a scale in design systems and charts.

HSL

A color model describing hue, saturation, and lightness, often used to lighten or darken while holding saturation steadier than RGB.

Frequently asked questions