How Tints, Shades and Related Hues Are Calculated

The converter gives you a small set of variations on your starting color. You can reproduce them from the formulas below, then check any candidate against its intended text or background.

How the tint strip is made

A tint moves each eight-bit sRGB channel toward 255. For an amount t, the formula is round(channel + (255 − channel) × t). The strip uses t = 0, 0.25, 0.5, 0.75 and 1, ending at white.

How the shade strip is made

A shade moves each channel toward zero with round(channel × (1 − t)). It uses the same five values of t, starting with the original color and ending at black. Rounding gives each swatch an exact eight-bit value.

Why equal steps can look uneven

These formulas work on gamma-encoded sRGB numbers. Equal numeric steps may not look equally spaced in lightness. Choose a candidate in context, then measure its contrast; the strip is not a print-matching or color-difference tool.

Find complementary and analogous hues

The complement adds 180 degrees to HSL hue. The analogous colors subtract and add 30 degrees, wrapping around the hue circle. Saturation and lightness stay fixed before conversion back to eight-bit sRGB. That conversion can introduce small rounding differences.

complement = (hue + 180) modulo 360
analogous A = (hue - 30 + 360) modulo 360
analogous B = (hue + 30) modulo 360

Choose a color for a specific use

• Keep the starting color’s exact value.
• Choose a variation for a role, such as a card background.
• Check it with the text color that will appear on it.
• Save the chosen value in your palette so the result is easy to reproduce.

Related hues do not necessarily have useful text contrast. Different colors can have similar luminance, while two shades of gray can have a strong ratio. Use the variations to find candidates and the contrast checker to test their roles.