Color Shades Generator
This free color shades generator takes one hex color and expands it into a complete tonal scale: ten shades stepping toward black and ten tints stepping toward white, laid out as a grid you can copy from with a single click.
How to use
- Type or paste a hex color — with or without the #, in 3- or 6-digit form.
- The grid shows your base color, ten shades mixed toward black and ten tints mixed toward white.
- Click any swatch to copy its hex code to the clipboard.
Frequently asked questions
How are the shades and tints calculated?
By linear interpolation on each sRGB channel: for a mix ratio r, every channel becomes base × (1 − r) + target × r, rounded to the nearest integer, where the target is pure black for shades and pure white for tints. Ratios run in 10% steps from 10% to 100%, so a 100% shade is pure black and a 100% tint is pure white. The mixing happens in gamma-encoded sRGB space — the same numbers the hex code shows — not in a perceptual space like OKLCH, which keeps the results predictable and identical to classic design-tool blends.
Why do these shades look different from an HSL lightness drop?
Because the arithmetic differs. Lowering the L channel in HSL slides along a perceptual lightness axis while the conversion re-derives RGB, whereas this tool blends each RGB channel toward black or white directly, which also deepens saturated channels. Neither scale is wrong — they are simply different conventions. Use the one your design system expects; the values here are plain channel mixing and are reproducible by hand.
Can I use a 3-digit hex shorthand?
Yes. Standard CSS shorthand is accepted and expanded digit-by-digit: #f80 becomes #ff8800 before the scale is computed. The leading hash is optional, and 4- or 8-digit codes with alpha are rejected with a clear error because the scale is defined for opaque colors only.
What is a shade scale useful for?
Hover, active and disabled button states, subtle borders and dividers, chart and data-viz series that stay on-brand, alert backgrounds, and dark-mode surfaces derived from a single brand color. Ten steps is enough for a full application palette; the exact 10% spacing makes the scale easy to communicate to teammates as "shade 30" or "tint 20".
Is my color uploaded anywhere?
No. The scale is computed locally in your browser the moment you type. Nothing leaves your device, and everything disappears when you close the page.
Related tools
About this tool
This free color shades generator takes one hex color and expands it into a complete tonal scale: ten shades stepping toward black and ten tints stepping toward white, laid out as a grid you can copy from with a single click. Real UI work rarely survives on a single brand color — a color that looks right in a logo needs darker siblings for hover states, pressed buttons, borders and shadows, and lighter siblings for backgrounds, badges, surfaces and dark-mode cards. Picking those steps by eye produces colors that drift apart in hue and saturation; computing them keeps the whole scale coherent. Every step here mixes your base color with pure black or pure white by linear interpolation on each sRGB channel: each channel becomes base × (1 − ratio) + target × ratio, rounded to the nearest integer, at ratios of 10% through 100% in 10% steps. That is the same arithmetic a design tool performs when you drag an opacity handle over black or white, and it is documented openly so you always know exactly what you are copying. Invalid input is rejected with a clear error instead of a silently wrong color. Everything runs locally in your browser — nothing you type is uploaded, stored or logged. Paste a hex value below to build your scale.