Color shades generator
Turn your brand color into a balanced 11-step scale for interfaces and design systems. Steps are perceptually even, and every shade shows a readable text color and its contrast ratio.
Free · No sign-up · Runs in your browser
Your files are never uploaded; everything runs in your browser.
How to use
- Pick your base color or type its HEX code.
- Give the color a name (e.g. primary, brand).
- Choose whether the base color should be kept exactly in the scale.
- Copy shades one by one or export them as CSS, Tailwind, SCSS or JSON.
Highlights
- 11-step scale from 50 to 950.
- Perceptually balanced shades (OKLCH color space).
- WCAG contrast ratio and a suitable text color for each shade.
- CSS variables, Tailwind v4/v3, SCSS and JSON output.
Frequently asked questions
What is a shade scale and why use one?
A shade scale is a set of variations of one color, ordered from light to dark. It lets interfaces use consistent tones from the same family for backgrounds, borders, text and button states.
What do 50, 500 and 950 mean?
This numbering was popularized by Tailwind CSS: 50 is the lightest shade and 950 the darkest; the base color usually lands around 500 or 600.
Why are the shades calculated in OKLCH?
In HSL, colors with the same lightness value can look noticeably brighter or darker. OKLCH is built around human perception, so the steps between shades look more even and natural.
Which shades can I put white text on?
Each shade shows whether white or black text reads better on it, with the contrast ratio. For body text, 4.5:1 or higher (WCAG AA) is recommended.
Need a professional design?
Get in touch for social media design, advertising visuals, posters, logos and brand identity projects.