Shades, Tints & Tones Generator
Enter a base color to generate three stepped scales — tints toward white, shades toward black, and tones toward gray — with a configurable step count and one-click copy for every hex list. A two-color mixer with a ratio slider rounds out the page.
Base color and step count
Tints (toward white)
Shades (toward black)
Tones (toward gray)
Two-color mixer
Turn this scale into a design in Moda
Use your tint and shade ramp across slides, charts, and brand layouts on a real canvas.
Try Moda free →Shades vs. tints vs. tones — the actual vocabulary
These three words have precise meanings in color theory: a shade is your color mixed with black (darker, often heavier and more dramatic), a tint is your color mixed with white (lighter, softer — what most people mean by "pastel"), and a tone is your color mixed with gray (same lightness territory, but muted and less saturated). The generator keeps them separate because they do different jobs: tints for backgrounds and hover states, shades for text and borders on light surfaces, tones for secondary UI where full saturation would shout.
How the steps are computed
Each scale interpolates every RGB channel linearly from your base color to the target (white, black, or mid-gray #808080), in even increments: with 8 steps, step one is a 1/8 mix and the last step is the pure target. This per-channel sRGB mixing is the same convention design tools use for shade/tint ramps. It is worth knowing that hue can drift slightly in the middle of a ramp — mixing is done in RGB, not a perceptual space — which is normal and matches what Figma or Sketch would give you.
Building a usable UI ramp from these scales
A typical design-system ramp (50/100/…/900 in Tailwind-style naming) is tints of the brand color above the base and shades below it. A practical recipe: generate 5-6 tints for the light half, keep the base as your 500, and take 3-4 shades for the dark half — then spot-check text contrast on the extremes with a contrast checker. The tones row is your source for muted variants: chart gridlines, disabled states, and subtle badges that should recede rather than compete.
Frequently asked questions
What is the difference between a shade and a tone?
A shade adds black, making the color darker and often more intense-feeling; a tone adds gray, keeping the lightness closer to the original while draining saturation. If you want "the same color but quieter", you want a tone, not a shade.
Why does the last step always end on pure white, black, or gray?
The scale divides the full distance to the target into even steps, so the final step is the target itself. If you only want usable in-between values, generate a couple more steps than you need and ignore the last one — 10 steps gives you 9 usable intermediates.
How is the two-color mixer different from the tint/shade scales?
It is the same per-channel interpolation, but between two arbitrary colors instead of your color and a fixed target, with the slider setting the exact percentage of each. At 50/50 between red #FF0000 and blue #0000FF you get #800080 — the RGB midpoint.
Why do mid-ramp colors sometimes look muddy?
Straight-line RGB mixing between distant hues passes through low-saturation territory — red to blue crosses gray-purple. That is inherent to RGB interpolation, and it matches how design tools mix. For shade/tint ramps of a single hue the effect is minimal; for two-color blends, nudge the ratio away from 50/50 or pick closer hues if the midpoint looks dull.