HEX to RGB

What is a HEX colour?

A hex colour is a six-digit number written in base-16 (hexadecimal) that encodes the red, green and blue intensity of an sRGB colour. The first pair of digits is the red channel, the middle pair the green channel, the last pair the blue channel — each from 00 (none) to FF (255, full). So #FF0000 is pure red, #00FF00 pure green, #0000FF pure blue, and #FFFFFF is the sum of all three channels at full strength: white. Hex notation has been the dominant way to write colours in HTML and CSS since the format was introduced in 1996 because it’s compact, deterministic and trivial to copy between tools.

What is the rgb() function?

rgb() is the canonical CSS functional notation for an sRGB colour, written with three decimal channel values from 0 to 255 — for example rgb(255, 0, 0) for red. It’s exactly the same colour space as hex, just expressed in decimal instead of hexadecimal. Where hex is more common in design files and final stylesheets, rgb() is easier to generate programmatically (it’s just three numbers in a string) and plays nicely with CSS custom properties, JavaScript and design-token systems that store channel values as integers.

The conversion math

Each pair of hex digits is a base-16 number in the range 00–FF. Convert it to decimal: FF = 15 × 16 + 15 = 255, 1A = 1 × 16 + 10 = 26, B0 = 11 × 16 + 0 = 176. So #1AB0FF becomes rgb(26, 176, 255). The three-digit shortcut #abc doubles each digit before this step: #abc → #aabbcc → rgb(170, 187, 204). The converter does this in a few lines of JavaScript — no library required.

Use cases

CSS authoring. Sometimes you want the rgb() form in your stylesheet because you’ll be tweaking alpha later (a CSS preprocessor can turn rgb(0, 229, 255) into rgba(0, 229, 255, 0.5) more naturally than a six-digit hex), or because your design-token system emits decimal triplets.

JavaScript and canvas work. Canvas’s fillStyle, strokeStyle and most colour-handling libraries accept rgb() strings or decimal channel values directly. Converting a hex from a Figma export into the three decimals you need to pass to ctx.fillStyle = ... is the single most common reason developers reach for this conversion.

Accessibility and contrast work. Most WCAG contrast calculators take rgb() values; converting designer-supplied hex into rgb() is the first step in plugging a colour into a contrast tool.

Email and legacy systems. Some HTML email clients are stricter about rgb() than hex (or vice-versa). When debugging a colour that isn’t rendering, swapping notation is a quick sanity check.

Pitfalls

• Hex is sRGB only. The converter assumes the input is sRGB (the default colour space of the web). Wide-gamut hex (display-p3 hex isn’t a thing) and CMYK hex strings (these are sometimes invented in print-design contexts but aren’t standard) aren’t supported.
• Alpha is not preserved. Eight-digit hex (#RRGGBBAA) loses the alpha channel here — use the HEX to RGBA landing.
• Named colours not accepted. red, blue, dodgerblue and the 148 other CSS named colours aren’t parsed by this landing; use the Color Name Finder to get a hex first.

How to use this HEX to RGB converter

1. Paste your hex colour into the input. It can have a leading # or not, and can be six or three digits, uppercase or lowercase.
2. The rgb(r, g, b) output and the colour swatch update live — there is no Convert button.
3. If your input isn’t a valid hex (wrong length, contains non-hex characters, missing digits), a friendly inline message says what’s wrong without consuming a click.
4. Tap Copy to put the rgb() string on your clipboard.

Privacy

Conversion is a five-line function running in your browser tab. No server is involved at any point. The page caches its small JavaScript bundle and from then on works fully offline.

Compatibility notes

The output is standard CSS rgb() notation supported by every browser since the 1990s. If you need the modern slash-separated syntax (rgb(255 0 0 / 0.5)), the Color Converter offers it; this landing emits the classic comma-separated form because that’s still the most widely compatible and the form most CSS linters accept by default.