Colortone to HEX Converter

Colortone to HEX: from a color name to a full palette

CSS color names are easy to remember but awkward in design tools, which usually want hex. This colortone to HEX converter looks up a name such as steelblue, gives you its hex code, and adds a set of tints, shades and tones in hex so you can build a small palette around it.

What you can type

• Any of the 148 CSS named colors, including both gray and grey spellings. Case and spaces do not matter, so Steel Blue works.
• Hex codes: #4682B4, 4682B4, 0x4682B4 or shorthand #48b.
• Color functions: rgb(), rgba(), hsl(), hsla(), hsv(), hsb() and cmyk().

Bare number lists such as 70, 130, 180 are read as RGB. The keyword transparent is not accepted, because it has no color to build ramps from.

Example: steelblue in 4 steps

Tints (mixed with white):
    0%  #4682B4
   25%  #74A1C7
   50%  #A3C1DA
   75%  #D1E0EC
  100%  #FFFFFF
Shades (mixed with black):
    0%  #4682B4
   25%  #356287
   50%  #23415A
   75%  #12212D
  100%  #000000
Tones (mixed with gray):
    0%  #4682B4
   25%  #5582A7
   50%  #63819A
   75%  #72818D
  100%  #808080

Each step blends the red, green and blue channels in a straight line toward white, black or #808080. The 50% tint, for example, is (70 + 255) / 2 = 162.5 → A3, (130 + 255) / 2 = 192.5 → C1 and (180 + 255) / 2 = 217.5 → DA.

The closest-name hint

For codes that are not named colors, the preview swatch still shows the nearest CSS name. It is chosen by straight-line distance in RGB, which is quick but not perceptual. #1E40AF, a strong royal blue, is matched to darkslateblue, a noticeably more muted purple-blue. Use the hint as a rough label, not as a replacement value.

Steps

The steps setting (2–20, default 10) controls how many intervals each ramp has. You always get one more color than the number of steps, since the original and the pure end color are both listed.

If you already start from a hex code, HEX to Colortone builds the same ramps from the HEX field. For a single value in every format, use the color converter, or HEX to RGB for channel numbers.

Named colors that surprise people

CSS color names come from an old mix of HTML and X11 lists, so a few of them do not mean what you would expect. Converting them to hex shows the real value before it ends up in a stylesheet:

• darkgray is #A9A9A9, which is lighter than gray at #808080.
• green is only #008000; the full green channel, #00FF00, is called lime.
• aqua and cyan are both #00FFFF, and fuchsia and magenta are both #FF00FF.
• rebeccapurple, #663399, was added in CSS Color Level 4.

When you use a ramp for text and backgrounds, check each pair with the color contrast checker: light tints often fail as text colors, while dark shades work well on the lightest tints.