Brand Colour Shades
A single hex is not a colour system. A 50-to-900 ramp gives you a background, a hover state, a border and a heading colour that all clearly belong together.
Input
Runs in your browserResult
Enter a colour to generate a ramp.
Why a ramp beats a single colour
One red cannot be a button, a hover state, a border and a heading — each needs a different weight. A ramp keeps them recognisably the same hue while giving you the range to build a whole interface or a set of pins that feel like one family.
How to use the steps
50–100 are backgrounds and tints. 200–300 are borders and dividers. 500 is the brand colour itself, for accents and buttons. 700–900 are text and dark surfaces. Most designs use three of the nine — the rest is headroom.
Keeping it consistent
Generate the ramp once, paste it into your brand kit, and stop eyeballing new tints. Every hand-picked variant drifts a little, and after twenty pins the “same” brand colour is five different reds.
How to use Brand Colour Shades
- Enter your brand colour.
- Copy the steps you need.
- Use 50–100 for backgrounds, 500 for accents, 700+ for text.
Brand Colour Shades FAQ
Are these accessible?
The 700–900 steps are dark enough for text on white. Always verify with the contrast checker.
Can I use this for dark pins?
Yes — 800–900 work as backgrounds, with 50–100 as text.
What does 500 mean?
The mid-point, closest to the colour you entered. It is the anchor of the ramp.
Keep going
Tools, guides and templates that fit togetherStart creating your first Pinterest pin today
Turn your ideas into beautiful pins and grow your audience with the power of design. No credit card, no watermark.