Tint & shade scale

Client

Build a design-token-style ramp by mixing your base color toward white (tints) and black (shades) in sRGB. Use a symmetric scale for classic 100–900-style rows, or only tints or only shades for hover states and surfaces—all processed locally.

Tint & shade scale

?
Enter a base CSS color. We mix it in sRGB toward white (tints) and black (shades)—similar to classic UI token ramps. Symmetric mode keeps your base at weight 500 when using nine stops.

CSS custom properties

:root {
  /* Tint/shade scale — brand */
  --brand-100: #ECF6F5;
  --brand-200: #B4DEDA;
  --brand-300: #7CC5BF;
  --brand-400: #45ADA3;
  --brand-500: #0D9488;
  --brand-600: #0A7269;
  --brand-700: #075049;
  --brand-800: #042E2A;
  --brand-900: #010C0B;
}

Common use cases

  • Create a nine-stop symmetric scale, then copy the :root block into a theme file next to your existing spacing tokens.
  • Use tints-only when you need lighter backgrounds that still feel like the same brand hue.
  • Use shades-only for pressed buttons, borders, and dark-mode surfaces derived from one accent.

Common mistakes to avoid

  • Expecting perceptually even steps

    These ramps use simple sRGB mixing—not OKLCH lightness. For some hues, mid steps can look muddier than HSL-based ramps; adjust the base or compare with the harmony palette tool.

  • Using very light bases for shade-only ramps

    If the base is already near white, darker shades may still look washed out until you pick a richer base.

FAQ

Which weight is my base color?

In symmetric mode, the center stop is always your pasted base. The printed weight (for example 400 or 500) depends on how many stops you chose—the middle label is not always 500.

Is this the same as the monochromatic row in the harmony palette?

The harmony tool’s monochromatic ramp uses HSL lightness. This page mixes toward white and black in sRGB—closer to how many design tools build “tint/shade” buttons.

Are colors sent to your servers?

No. All mixing runs in your browser.

More tools

Related utilities you can open in another tab—mostly client-side.