ToolNimba Browse

🎨 HEX to RGB Color Converter

By ToolNimba Editorial Team · Updated 2026-06-19

Edit any field or use the picker. The others update live.

Paste a color in any common format and read it back in the others. Enter a hex code like #337BFF, an rgb() value, or HSL, and this converter gives you the matching HEX, RGB and HSL at once, plus a live swatch so you can see the color. Everything below explains how the three formats relate, with worked examples you can follow by hand and a chart of common web colors.

What is the Color Converter?

HEX, RGB and HSL are three ways of writing the same thing: a single screen color. RGB is the most direct. It describes a color as three channels (red, green and blue) each running from 0 to 255, which is how displays actually emit light. (255, 0, 0) is full red, (0, 0, 0) is black, and (255, 255, 255) is white. HEX is simply RGB written in base 16 (hexadecimal) so it fits in a compact six-character string. A hex code like #337BFF splits into three pairs: 33, 7B and FF. Each pair is one channel converted to a two-digit hex number, so 33 is red 51, 7B is green 123, and FF is blue 255.

The mapping between a hex pair and a 0 to 255 value is pure base conversion. Hex digits run 0-9 then A-F, where A is 10 and F is 15. The left digit counts sixteens and the right digit counts ones, so the pair 7B is (7 x 16) + 11 = 123. The reverse, going from RGB to HEX, divides each channel by 16: the quotient is the first digit and the remainder is the second. Because two hex digits cover 0 to 255 exactly (16 x 16 = 256 values), every RGB color has one clean six-digit hex code.

HSL takes a different angle and is built for humans rather than hardware. It describes a color by hue, saturation and lightness. Hue is an angle from 0 to 360 degrees around a color wheel (0 is red, 120 is green, 240 is blue). Saturation is how vivid the color is, from 0 percent (gray) to 100 percent (fully colorful). Lightness runs from 0 percent (black) through the pure color at 50 percent to 100 percent (white). Designers reach for HSL because it is intuitive to tweak: to make a button darker on hover you just lower the lightness, and to build a palette you hold the hue and nudge saturation and lightness, which is awkward to do in raw RGB or HEX.

When to use it

  • Converting a brand hex code from a style guide into the rgb() value a design tool or CSS file expects.
  • Turning an RGB value picked from a screenshot back into a tidy hex code to paste into HTML or CSS.
  • Generating HSL so you can build hover and active states by shifting lightness while keeping the same hue.
  • Checking that a 3-digit shorthand hex expands to the full 6-digit value you intended.

How to use the Color Converter

  1. Type or paste a color in any field: HEX (with or without the #), RGB, or HSL.
  2. The other formats update automatically and the swatch shows the resulting color.
  3. Copy the format you need (for example the rgb() string for CSS or the hex code for a design tool).

Formula & method

A hex code is RGB in base 16: each pair is one channel, so #RRGGBB means R = hex(RR), G = hex(GG), B = hex(BB), each from 0 to 255. HEX to RGB: convert each pair, where the value = (left digit x 16) + right digit. RGB to HEX: for each channel, first digit = value ÷ 16 and second digit = value mod 16, mapped to 0-9 then A-F.

Worked examples

Convert the hex code #337BFF to RGB.

  1. Split into pairs: 33, 7B, FF.
  2. Red 33 = (3 x 16) + 3 = 51.
  3. Green 7B = (7 x 16) + 11 = 112 + 11 = 123.
  4. Blue FF = (15 x 16) + 15 = 240 + 15 = 255.

Result: rgb(51, 123, 255)

Convert rgb(255, 0, 0) to a hex code.

  1. Red 255: 255 ÷ 16 = 15 remainder 15, so FF.
  2. Green 0: 0 ÷ 16 = 0 remainder 0, so 00.
  3. Blue 0: 0 ÷ 16 = 0 remainder 0, so 00.
  4. Join the pairs and add the #.

Result: #FF0000

Convert the hex code #008000 (web green) to HSL.

  1. HEX to RGB: 00, 80, 00 gives R = 0, G = 128, B = 0.
  2. Scale to 0-1: R = 0, G = 0.502, B = 0; max = 0.502, min = 0.
  3. Lightness L = (0.502 + 0) ÷ 2 = 0.251, about 25 percent.
  4. Green is the max channel, so hue = 120 degrees; saturation = 100 percent.

Result: hsl(120, 100%, 25%)

Common web colors in HEX and RGB

ColorHEXRGB
Black#000000rgb(0, 0, 0)
White#FFFFFFrgb(255, 255, 255)
Red#FF0000rgb(255, 0, 0)
Green#008000rgb(0, 128, 0)
Lime#00FF00rgb(0, 255, 0)
Blue#0000FFrgb(0, 0, 255)
Yellow#FFFF00rgb(255, 255, 0)
Cyan#00FFFFrgb(0, 255, 255)
Magenta#FF00FFrgb(255, 0, 255)
Gray#808080rgb(128, 128, 128)
Orange#FFA500rgb(255, 165, 0)

Common mistakes to avoid

  • Thinking the # is required. In CSS the leading # is part of the hex notation, but for conversion the digits are what matter. 337BFF and #337BFF are the same color, so the # is optional when you enter a value here.
  • Mixing 3-digit and 6-digit hex. Shorthand like #3BF expands by doubling each digit to #33BBFF, not by padding with zeros. Treating #3BF as #03B0F0 gives a completely different color.
  • RGB channels outside 0 to 255. Each RGB channel only goes from 0 to 255, since that is exactly what two hex digits cover. Values like 300 or negative numbers are invalid and cannot map to a hex pair.
  • Confusing HSL percentages with the hue angle. Hue is an angle from 0 to 360 degrees, while saturation and lightness are percentages from 0 to 100. Writing the hue as a percentage breaks the color.

Glossary

HEX
A color written in base 16 as #RRGGBB, where each two-digit pair is one RGB channel from 00 to FF (0 to 255).
RGB
Red, green and blue channels, each from 0 to 255, describing how much of each primary light makes up the color.
HSL
Hue, saturation and lightness: a human-friendly model that describes a color by its tint, vividness and brightness.
Hue
The position of a color on the color wheel, given as an angle from 0 to 360 degrees (0 red, 120 green, 240 blue).
Saturation
How vivid or pure a color is, from 0 percent (gray) to 100 percent (fully colorful).
Lightness
How light or dark a color is, from 0 percent (black) through the pure color at 50 percent to 100 percent (white).

Frequently asked questions

How do I convert hex to rgb?

Split the six-digit hex into three pairs and convert each pair from base 16 to a 0 to 255 number. For example #337BFF becomes 33 = 51, 7B = 123 and FF = 255, giving rgb(51, 123, 255). This tool does it instantly when you paste the hex code.

What is #FFFFFF in rgb?

#FFFFFF is white, which is rgb(255, 255, 255). Each FF pair is the maximum channel value of 255, so all three primaries are at full strength, producing white.

How to convert rgb to hex?

Convert each channel to a two-digit hex number, then join them with a leading #. For each channel, divide by 16 for the first digit and take the remainder for the second, mapping 10 to 15 onto A to F. So rgb(255, 0, 0) becomes #FF0000.

What is HSL?

HSL stands for hue, saturation and lightness. Hue is an angle from 0 to 360 degrees on the color wheel, saturation is how vivid the color is from 0 to 100 percent, and lightness runs from 0 percent (black) through the pure color at 50 percent to 100 percent (white). It is popular with designers because it is easy to tweak.

Is hex the same as rgb?

Yes, in the sense that a hex code is just RGB written in base 16. Both describe the same red, green and blue channels. HEX packs them into a compact six-character string, while RGB writes them as three decimal numbers from 0 to 255, so they convert back and forth exactly.

How do I convert rgb to hsl?

Scale each RGB channel to a 0 to 1 range and find the largest and smallest. Lightness is the average of those two. Saturation depends on how far apart they are, and hue depends on which channel is largest. For example rgb(0, 128, 0) becomes hsl(120, 100%, 25%).