HEX to Colortone Online – Tints, Shades and Tones of a Hex

How to use the HEX to Colortone Converter

Type or paste a hex color such as #FF6347 into the HEX field, or choose one with Pick colour.

Choose how many steps each ramp should have, from 2 to 20 (10 by default).

Pick a Copy as format: HEX, RGB, RGBA, HSL, HSV or CMYK.

Click Copy palette to copy all tints, shades and tones, or click a swatch to load that step and copy it from its field.

HEX to colortone: tints, shades and tones

A single brand hex code rarely covers every need of an interface. You also want a pale background, a darker hover state and a muted border. This hex to colortone generator builds those variants for you by mixing the color with white, black and gray in equal steps.

What a colortone is here

The tool produces three ramps for the color you enter:

Tints: the color mixed with white, #FFFFFF.
Shades: the color mixed with black, #000000.
Tones: the color mixed with mid gray, #808080.

Each ramp runs from 0% (your original color) to 100% (pure white, black or gray). It also reports the closest of the CSS named colors, measured by straight-line distance between RGB values.

The mixing formula

Every step is a linear blend of each RGB channel toward the target, where t is the step's percentage:

channel = original + (target − original) × t

25% tint of #FF6347 (255, 99, 71):
  R = 255 + (255 − 255) × 0.25 = 255    → FF
  G =  99 + (255 −  99) × 0.25 = 138    → 8A
  B =  71 + (255 −  71) × 0.25 = 117    → 75   → #FF8A75

25% shade:  255 × 0.75 = 191.25, 99 × 0.75 = 74.25, 71 × 0.75 = 53.25
            → rgb(191, 74, 53) → #BF4A35

Example output with 4 steps

Tints (mixed with white):
    0%  #FF6347
   25%  #FF8A75
   50%  #FFB1A3
   75%  #FFD8D1
  100%  #FFFFFF
Shades (mixed with black):
    0%  #FF6347
   25%  #BF4A35
   50%  #803224
   75%  #401912
  100%  #000000
Tones (mixed with gray):   #FF6347, #DF6A55, #C07264, #A07972, #808080

The last ramp is shortened here to save space; Copy palette lists it line by line like the others. On the page each ramp is a row of swatches, and the preview names the closest CSS color, here tomato.

Options

Steps (2–20) sets how finely each ramp is divided. N steps give N + 1 colors per ramp, because both ends are included. The default of 10 gives increments of 10%.
Copy as sets the notation that Copy palette uses: HEX, RGB, RGBA, HSL, HSV or CMYK. The swatches always show hex codes.

Input details

Three-, four-, six- and eight-digit codes work, with or without # or 0x. Shorthand #F63 expands to #FF6633. An alpha pair is dropped, so #FF6347CC produces the same ramps as #FF6347. CSS names like tomato are recognized too.

To start from a color name instead, see Colortone to HEX. For single conversions use HEX to RGB, or grab a starting color from the random color generator.

Frequently asked questions

What is the difference between a tint, a shade and a tone?

A tint is a color mixed with white, a shade is mixed with black and a tone is mixed with gray. Tints get lighter, shades get darker and tones get duller while staying at a similar brightness.

Why do 10 steps give 11 colors?

Each ramp includes both ends: the original color at 0% and the pure mixing color at 100%. Ten equal intervals therefore need eleven colors.

Can I use this to build a 50–900 style palette?

Yes, as a starting point. Take a few tints for the light end and a few shades for the dark end. Because mixing is linear in RGB, you may want to fine-tune the spacing by eye.

Is the closest CSS name an exact match?

Only if the distance is zero, as with #FF6347 and tomato. Otherwise it is simply the nearest of the 148 named colors by RGB distance, which can look noticeably different.

What happens to transparency in an 8-digit hex code?

It is ignored. The ramps are built from the opaque color, so every generated step has full opacity.

HEX to Colortone Generator