Shades and Tints Generator

How design systems build a colour scale

One brand colour is not enough to build anything. You need a light version for backgrounds, a dark one for text, and several in between for borders, hovers and states. Almost every design system solves this the same way.

Convert the colour to HSL, keep the hue and saturation fixed, and vary only the lightness. That produces a family that unmistakably belongs together, because every member is the same colour at a different lightness.

The 50 to 900 convention

The numbering comes from type weights and was popularised by Tailwind and Material. 50 is nearly white, 500 is roughly the base colour, 900 is nearly black. The advantage is that it is predictable: anyone reading --brand-700 knows it is a dark one without looking.

• 50–100 — page and panel backgrounds, subtle highlights.
• 200–300 — borders, dividers, disabled states.
• 400–600 — buttons, links, the colour people think of as your brand.
• 700–900 — text, headings, and hover states on already-dark elements.

Read the contrast numbers

Each swatch shows its best contrast against white or black. This is the part that makes a scale usable rather than decorative:

• Steps 600 and above will usually clear 4.5:1 on white, so they can carry body text.
• Steps 400–500 often land between 3 and 4.5 — fine for large text, borders and icons, not for paragraphs.
• Steps 50–300 are backgrounds. Putting text in them on a white page will fail.

The limitation worth knowing

Equal steps in HSL lightness are not equal steps in perceived lightness. Yellows look much brighter than blues at the same L value, so a yellow scale will feel top-heavy and a blue one bottom-heavy.

Perceptually uniform spaces such as OKLCH handle this properly and are worth using for a serious design system. For most purposes the HSL approach here gets you a coherent scale in seconds, and you can nudge individual steps afterwards. Judge by the contrast numbers rather than by the lightness percentage.

Common uses

• Starting a design system from a single brand colour.
• Finding a dark enough version of a brand colour to use as text.
• Generating hover and active states that match.
• Building a tinted background that belongs to the same family as a button.

Questions people ask

What is the difference between a shade and a tint?

A tint is the colour mixed with white, a shade is mixed with black. A tone is mixed with grey. The scale here covers tints and shades.

Why do the numbers go 50 to 900?

A convention borrowed from type weights. 50 is nearly white, 500 is roughly the base colour, 900 nearly black — so the number tells you the lightness without looking.

Which step should I use for text?

Usually 600 or darker on a white background. Check the contrast figure on each swatch — it needs to reach 4.5:1.

Why does my yellow scale look uneven?

Because equal steps in HSL lightness are not equal perceptually. Yellows look much brighter than blues at the same value. A perceptually uniform space such as OKLCH handles it better.

Can I use this for a whole design system?

As a starting point, yes. Nudge individual steps afterwards and judge by the contrast numbers rather than the lightness percentage.