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

A single color is rarely enough. A button needs a darker hover state, a card needs a pale background, an alert needs a border that matches its icon. Shades, tints and tones are how you get all of those from one color without losing its character. Our Color Theory: A Complete Beginner's Guide defines the three words. This guide shows what each one actually does to a color, how to turn them into a full scale for an interface, and the mistakes that make scales look muddy or uneven.

What black, white and gray do to a color

Each of the three mixes moves a color in a different direction. To see it clearly, we will use one base color throughout: the teal #0D9488, which is hsl(175, 84%, 32%).

Tints: adding white

Mixing in white raises the lightness and makes the color softer and airier. Mixed 25%, 50% and 75% with white, the teal becomes #4AAFA6, #86CAC4 and #C3E4E1. The hue stays the same, but the color looks gentler with each step, which is why tints work so well for backgrounds, selected rows and subtle highlights.

Shades: adding black

Mixing in black lowers the lightness and makes the color deeper and heavier. Mixed 25%, 50% and 75% with black, the teal becomes #0A6F66, #074A44 and #032522. Shades carry weight, so they suit text, hover and pressed states, and dark surfaces.

Tones: adding gray

Mixing in gray lowers the saturation while leaving the lightness roughly where it was. The color gets quieter and more sophisticated, and at the end of the road it becomes the gray itself. The Shades & Tints tool makes tones by mixing the color with a gray of the same lightness, so the teal slides from #0D9488 through #2F736D to a plain #515151 without getting lighter or darker along the way.

Building a full scale from one color

Design systems usually organize these variations into a numbered scale. The most common convention runs from 50, the lightest, to 900 or 950, the darkest, with the base color around 500. The numbers mean nothing on their own; they are names that sort from light to dark and leave room to add steps later.

Here is the scale the Shades & Tints tool produces from our teal. The steps below 500 are tints, made with increasing amounts of white, and the steps above 500 are shades, made with increasing amounts of black.

Giving each step a job

A scale is only useful if everyone knows which step to reach for. A typical set of roles looks like this:

• 50 to 100: page and card backgrounds, selected rows, soft badges.
• 200 to 300: borders, dividers and disabled states.
• 400 to 500: icons, illustrations and large decorative shapes.
• 600 to 700: buttons, links and active states, where the color needs to carry white text or sit on white.
• 800 to 950: headings and body text in the brand color, and surfaces in dark mode.

Check contrast at every step

Roles only work if the contrast is there. On white, our teal's 500 has a contrast ratio of 3.74:1, enough for large text and interface parts such as icons and borders, but not for body text. Step 600 (#0B7C72) reaches 5.07:1, which passes the 4.5:1 minimum for normal text, so it is the right step for a link or for a button with white text. At the dark end, 950 text on a 50 background gives 14.11:1, and 800 on 100 gives 6.42:1.

Exporting the scale

Once a scale is settled, store it as named variables so every component uses the same values. The Shades & Tints tool can copy a scale or send it to the Export dialog as CSS variables or Tailwind config, named by step.

:root {
  --teal-50: #d5ecea;
  --teal-100: #addbd7;
  --teal-300: #5db7af;
  --teal-500: #0d9488;
  --teal-600: #0b7c72;
  --teal-800: #074d47;
  --teal-950: #031e1b;
}

Common mistakes

Muddy tones

A tone becomes muddy when it loses so much saturation that it looks dirty rather than calm. Warm colors suffer most. An orange such as #F97316 stays lively at 30% gray, as #D77938, but by 70% gray it is #AA8266, a brownish taupe that can look faded next to cleaner colors. Use light graying for a softer version of a color, and when you want a true neutral, pick a gray with a slight tint of your hue instead of an almost-orange that reads as a mistake.

Scales that shift hue

Mixing with black and white keeps the hue number fixed, but your eyes don't always agree. The best-known case is yellow. Mixed with black, a bright yellow does not become a deeper yellow; it turns olive and khaki. The yellow #FACC15 mixed toward black gives #826A0B and #5A4908, which most people would call olive green or mustard brown rather than dark yellow.

Blue has a gentler version of the problem in the other direction. Light tints of a strong blue can lean slightly toward lavender as white is added. In OKLCH, a color space designed to match how we see, the blue #2563EB measures a hue of about 263 degrees, while its pale 50 tint measures about 266 degrees, a small but visible drift toward violet.

The fix is to shift the hue deliberately as you go. For yellow, rotate the darker steps toward orange so they read as amber and brown instead of olive. For blue, nudge the lighter steps slightly toward cyan to keep them reading as blue. Many hand-tuned design system scales do exactly this.

Uneven steps

Equal amounts of white or black don't produce steps that look equally far apart. The light end often bunches together, so 50 and 100 are hard to tell apart, while the jumps in the middle feel large. Look at the scale as a whole, and adjust any step that looks too close to its neighbor. Checking the contrast ratio between neighbors is a useful sanity check.

Too many or too few steps

Eleven steps for every color in a system is a lot to maintain, but three is rarely enough for real interfaces. A brand color usually needs the full range. Secondary and status colors such as success or warning can often get by with a light background, a mid tone and a dark text step.

A quick workflow

1. Start from your base color and generate tints, shades and tones in the Shades & Tints tool.
2. Decide where the base belongs on the scale based on its lightness.
3. Look at the extremes. If dark steps go olive or pale steps go purple, shift the hue of those steps by hand.
4. Assign roles to the steps and check contrast for every text and button pairing.
5. Export the scale as variables and use the names, not the raw HEX codes, in your components.

Once you have one good scale, building the rest of your system gets easier. Use the generator to find colors that work with your base, then give each one its own scale in the same way.