RGB to Colortone Converter – Tints, Shades and Tones in RGB

How to use the RGB to Colortone Converter

Type or paste an RGB color into the RGB field, such as rgb(255, 99, 71) or just 255, 99, 71.

Set the number of steps per ramp, between 2 and 20.

Set Copy as to the format you want, for example RGB for the channel numbers.

Click Copy palette to copy the steps for gradients, states or chart series.

RGB to colortone with the channel math visible

Working in RGB makes it easy to see exactly what a tint or shade does. This RGB to colortone tool takes one color and moves each of its three channels in equal steps toward white, black or mid gray, producing ready-to-use ramps.

What happens to each channel

Ramp	Target	Channel at step t
Tints	rgb(255, 255, 255)	x + (255 − x) × t
Shades	rgb(0, 0, 0)	x × (1 − t)
Tones	rgb(128, 128, 128)	x + (128 − x) × t

Shades are the simplest: all three channels shrink by the same factor, so their ratios stay the same. That is why the hue of a shade does not drift. Tints and tones move each channel by a different amount, which reduces saturation.

Example with RGB output and 4 steps

Tints (mixed with white):
    0%  rgb(255, 99, 71)
   25%  rgb(255, 138, 117)
   50%  rgb(255, 177, 163)
   75%  rgb(255, 216, 209)
  100%  rgb(255, 255, 255)
Shades (mixed with black):
    0%  rgb(255, 99, 71)
   25%  rgb(191, 74, 53)
   50%  rgb(128, 50, 36)
   75%  rgb(64, 25, 18)
  100%  rgb(0, 0, 0)

Check the 50% shade: 255 × 0.5 = 127.5, 99 × 0.5 = 49.5 and 71 × 0.5 = 35.5. Halves round up, giving rgb(128, 50, 36). The tones ramp, not shown here, ends at rgb(128, 128, 128) and passes rgb(192, 114, 100) at 50%.

A note on perceived lightness

The blending uses the stored sRGB numbers directly, the same way a browser composites a semi-transparent color over white or black. Equal numeric steps are only approximately even to the eye, so if a ramp feels uneven, raise the step count and pick the steps that look right.

Letting CSS compute the same steps

Modern browsers can mix colors themselves with color-mix(). Mixing in the srgb space uses the same channel arithmetic as this tool, so the results line up:

/* 25% tint of tomato: rgb(255, 138, 117) */
background: color-mix(in srgb, rgb(255 99 71), white 25%);

/* 25% shade: rgb(191, 74, 53) */
border-color: color-mix(in srgb, rgb(255 99 71), black 25%);

Use the generated ramp when you need fixed values, for example in design tokens, email templates or older browsers, and color-mix() when the base color comes from a CSS variable that can change at runtime. Other mixing spaces such as oklab give perceptually smoother steps but different numbers.

Input formats

rgb(255, 99, 71), rgb(255 99 71) or bare 255, 99, 71.
Percent channels such as rgb(100%, 38.8%, 27.8%), which resolve to the same tomato red.
Hex codes and CSS names are detected too. Alpha is ignored.

Starting from a name instead? Use Colortone to RGB. For single values, RGB to HEX and RGB to HSL convert without building ramps.

Frequently asked questions

How do I calculate a shade of an RGB color?

Multiply every channel by (1 − t), where t is how far toward black you want to go. A 25% shade of rgb(255, 99, 71) is rgb(191, 74, 53) after rounding.

How do I calculate a tint of an RGB color?

Move each channel toward 255: x + (255 − x) × t. For a 50% tint of rgb(255, 99, 71) that gives rgb(255, 177, 163).

Why is the tone target 128 and not 127.5?

Channels are whole numbers, and #808080, which is 128 on every channel, is the conventional middle gray. The tones ramp therefore ends at rgb(128, 128, 128).

Do shades keep the same hue?

Yes. Scaling all three channels by the same factor keeps their ratios, so the hue stays constant apart from tiny rounding effects in very dark steps.

RGB to Colortone Generator