Tints, Shades and Tones: How to Build a Color Scale That Works

One flat brand color isn't enough to build an interface. You need lighter and darker versions for backgrounds, borders, hovers and text. Those variations have names — and a method.

Tint vs shade vs tone

A tint is your color mixed with white (lighter, softer). A shade is mixed with black (darker, deeper). A tone is mixed with grey (more muted). Most UI work needs tints and shades — generate a full set from any base with the shades & tints generator.

Why you need a scale

Real interfaces use the same hue at many lightness levels: a pale tint for a section background, a mid tone for borders, the base for buttons, a dark shade for hover and pressed states. A consistent scale is what makes a UI feel coherent instead of patched together.

How many steps?

A practical scale has about 9–10 steps from very light to very dark — think 50, 100, 200 … 900, like popular design systems. That gives you enough range for backgrounds, text and states without decision paralysis.

Keep contrast in mind

As you go lighter, text on those tints gets harder to read. Pair each background step with a text step that passes the contrast checker at 4.5:1, and you'll never ship unreadable combinations.

From one color to a whole system

Start with a base color, expand it into tints and shades, generate complementary and accent colors with the palette generator, and convert everything to the formats your code needs with the color converter. That's a complete, professional color system in about ten minutes.