Colormapped
Color tool

Tints and Shades Generator

Generate lighter tints and darker shades from a base HEX color.

Generated values are deterministic RGB blends toward white or black.

What this tool does

This generator creates fixed digital variants by mixing a base sRGB color toward white for tints and toward black for shades. The output is a repeatable numeric ramp, not a set of official color names.

Enter the values in the calculator above and choose Calculate. The calculation runs in your browser; the inputs are not intentionally sent to a Colormapped application server.

How it works

  1. Decode the base HEX color into RGB channels.
  2. For a tint, interpolate each channel toward 255 (white).
  3. For a shade, interpolate each channel toward 0 (black).
  4. Encode each generated RGB triplet back to HEX.

Worked example

Input#5B5CF0
Output20% tint #7C7DF3 · 20% shade #494AC0

The generator applies the same numeric mix amount to each sRGB channel, producing deterministic steps around the base.

When to use it

  • Build quick hover/surface/outline candidates around a brand color.
  • Compare lighter and darker digital variants without guessing HEX values.
  • Create a starting tonal ramp before manual accessibility tuning.

Accuracy and limits

  • RGB mixing toward white/black is not perceptually even.
  • Generated variants still need contrast testing in the context where they will be used.

Useful next steps

Lighten / Darken Compare RGB white/black mixing with HSL lightness adjustment. Contrast Checker Verify whether a generated variant works in its real UI role. Shade Families Browse computed ramps alongside standardized named colors.