What is the difference between HEX and RGB?

HEX uses a six-character hexadecimal code, RGB uses three decimal numbers. Both represent the same colors in different notation.

Can I convert RGB to HEX too?

Yes. The converter works both ways — enter either format.

Do I need to include the # symbol?

No. It works with or without the # prefix.

HEX to RGB Converter

Convert HEX to RGB, RGB to HEX, and HSL values instantly. Live two-way color converter with 50+ named colors. Free, no signup needed.

Gold

HEX Color

RGB Values

HEX #e8c547

RGB rgb(232, 197, 71)

HSL hsl(47, 79%, 59%)

CSS --color: #e8c547;

Recently Converted

How HEX actually works

HEX is base‑16 notation for RGB. Each channel (red, green, blue) takes two hex digits covering 0–255 in decimal, or 00–FF in hex. #e8c547 breaks down as: e8 → red = 232, c5 → green = 197, 47 → blue = 71. That's it. HEX is popular because it's compact — a colour in three bytes fits in one short token, nicely suited for CSS, JSON configs, and design tool export.

The hash prefix # isn't part of the value; it's just a convention CSS uses to disambiguate hex codes from class names. #FF0000 and FF0000 represent the same colour. CSS also accepts the three‑digit shorthand: #F00 is #FF0000 (each digit doubled). Four and eight digit forms add alpha: #FF000080 is red at 50% opacity.

The maths for converting by hand

HEX → RGB: take each two‑digit pair, interpret it as base 16. The first digit is multiplied by 16, the second added directly. c5 = 12×16 + 5 = 197.

RGB → HEX: for each channel, divide by 16 for the first digit and take the remainder for the second. 197 / 16 = 12 remainder 5, so 197 → c5. Digits 10–15 are written as a–f.

HSL bonus

The tool also shows HSL (hue, saturation, lightness). The conversion from RGB to HSL is non‑trivial — it involves finding the max and min of the three channels, computing a chroma value, then mapping hue to a sector of the colour wheel. The formulas are published on the W3C CSS Colour Module spec if you want to study them. HSL is useful because it matches how humans describe colour: "a warm orange", "pale blue", "a punchy green" all map to moves in hue, lightness, or saturation respectively.

When you'll reach for this tool

A brand guideline gives you RGB but your CSS pipeline expects HEX (or vice versa).
Figma exports a colour as HEX but your developer needs the same value as RGB with alpha for a rgba() CSS function.
You've got a screenshot of a colour with RGB values written next to it and need to quickly check how it looks.
You want to convert a HEX to HSL so you can tweak lightness for hover/focus states.

A note on "named" colours

CSS supports ~140 named colours — tomato, slateblue, peachpuff, rebeccapurple. They're defined in the CSS spec with exact HEX equivalents. Using them in a design system isn't great (they're fixed and limited) but they're fun for quick prototypes. This tool shows the nearest named colour above the preview when you pick one that's close.