How do I use the colour shades and tints generator?
- Enter your brand colour as a HEX code.
- Name the palette (e.g. brand).
- Copy the HEX codes or CSS variables.
Colour shades and tints generator: frequently asked questions
What is the difference between a tint and a shade?
A tint is a colour mixed with white; a shade is mixed with black.
Why a 50–900 scale?
It matches the convention used by Tailwind CSS and many design systems.
Which shade should I use for text?
Usually 700–900 on light backgrounds — check contrast with our contrast checker.
Can I use it with Tailwind?
Yes. Copy the HEX codes into theme.extend.colors in your config, or use the CSS variables.
Is my colour stored?
No. It runs in your browser.
How do I find my brand colour?
Extract it from your logo with our colour palette from image tool.
Can I use the output in Figma or CSS?
Yes. Values are standard HEX, RGB, HSL and CSS that work in Figma, CSS and most design tools.
Is the colour shades and tints generator free?
Yes. It is free with no sign-up and no usage limits for normal use.
Is my data sent to your servers?
No. This tool runs entirely in your browser, so what you type never leaves your device.
Does it work on my phone?
Yes. The tool works in any modern browser on iPhone, Android, tablet or computer.