Generate Similar Colour Shades
Pick one colour and get an evenly stepped ramp from dark to light. The set an interface actually needs from a brand colour.
Free preview · No signup · ~10 seconds
Tints, shades, and why you need a ramp
Tints, shades, and tones
A tint is the colour mixed toward white, a shade is mixed toward black, and a tone is mixed toward grey. This ramp spans the full range rather than only lightening, because a set of tints alone reads as washed out.
What interfaces really need
A design system needs more values of one colour than it needs different colours: a background, a hover, a border, a pressed state, a disabled state, a focus ring. One brand hex gives you none of those on its own — a ramp gives you all of them.
Even numbers do not look even
The eye reads lightness non-linearly, so a mathematically even spread looks bunched at one end. Choose the step count by looking at the result rather than trusting the arithmetic, and adjust until the gaps read evenly.
How many steps
Five to seven covers most interface needs. Nine or more suits a full design system with many surface levels. Beyond about twelve, adjacent steps stop being distinguishable and the extra values are dead weight.
A ramp makes contrast tractable
With one hue varying only in lightness, contrast becomes a single-axis problem. Pick text and background from far enough apart on the ramp and the ratio generally passes without needing to reason about hue at all.
How to generate similar colour shades
Pick your base colour
Set the picker to your brand or starting colour. Nothing to upload.
Choose the step count
Drag the slider for how many shades you want, from three to twelve.
Copy what you need
Click a swatch to copy one hex, or copy the whole ramp.
Generate Similar Colour Shades — in the editor
The real editor, start to finish — no signup needed to try it yourself.
Free preview · No signup · ~10 seconds
Where a shade ramp is used
Design tokens
Generate the 100 to 900 scale a design system expects from one brand colour.
Brand documentation
Publish the tint and shade range a guideline needs.
Sequential charts
Build a single-hue scale that encodes magnitude.
Dark mode variants
Find the darker end of a brand colour that still reads on a dark surface.
Or just ask
Describe the edit in your own words
Type what you want changed and the assistant does it on the canvas — each step lands as a layer you can reopen, so nothing it does is baked in.
No edits yet.
Frequently Asked Questions
Related Tools
Guides worth reading
How to Make a Duotone Image in Figma (Building One From Blend Modes)
Figma has no duotone effect. You assemble one from a desaturated image and two blended rectangles — here is the layer stack, the order that matters, and an honest account of what it costs to maintain.
How to Make a Logo White in Photoshop (3 Methods, One of Them Non-Destructive)
Color Overlay, Lock Transparent Pixels, and why Hue/Saturation is the wrong tool even though Lightness looks like it works — plus the fringe that makes a white logo look dirty on a dark background, and how to remove it.
How to Replace a Color in Canva (What's Possible on Elements, and What Isn't on Uploads)
Canva can swap colors on vector elements one swatch at a time. On an uploaded photo or PNG there is no per-color control at all — here is the full picture, including the Duotone approximation and its limits.
Generate a shade ramp
Pick a colour, set the steps, and copy the hex codes.