🎨 Hex to RGB Converter

What is the Hex to RGB Converter?

Hex and RGB are two ways of writing the same color. RGB describes a color as three channels, red, green, and blue, each from 0 to 255. A hex code packs those same three numbers into six hexadecimal digits, two per channel, because base-16 needs exactly two digits to cover the range 0 to 255 (00 to FF). A hex to RGB converter simply reverses that packing: it splits the six digits into three pairs and reads each pair as a number from 0 to 255.

The conversion is exact and lossless in both directions, so #3B82F6 and rgb(59, 130, 246) are the same pixel color, just written differently. Designers tend to copy hex from tools like Figma or a brand style guide, while CSS, canvas, and many charting libraries expect rgb() or rgba() when you need transparency. That gap is why a fast hex to RGB converter is one of the most-used utilities in a front-end workflow: you paste the hex your design gives you and get the rgb() string your code wants.

This hex to RGB converter also handles the two things people trip over. First, #RGB shorthand: a three-digit code like #abc is expanded by doubling each digit to #aabbcc before parsing, so #abc becomes rgb(170, 187, 204), not a broken value. Second, case and the hash symbol are optional, so 3b82f6, #3B82F6, and 3B82F6 all resolve to the same RGB triple. Anything that is not 3 or 6 valid hex digits is rejected with a friendly message instead of a silent wrong answer.

Beyond RGB, the tool converts the same color to HSL (hue, saturation, lightness), which is often easier to reason about when you want a lighter or more muted variant. For #3B82F6 that is hsl(217, 91%, 60%): a blue hue at 217 degrees, high saturation, medium lightness. Having hex, RGB, RGBA, and HSL side by side lets you copy whichever format the current file needs without hunting through a separate hex to RGB converter for each one.

Modern CSS also accepts an 8-digit hex code, RRGGBBAA, where the last pair sets alpha the same way rgba() does but as a 0 to 255 value instead of a 0 to 1 decimal. #3B82F680 is the same blue at roughly 50 percent opacity, since 80 in hex is 128, and 128 divided by 255 is about 0.50. Support for 8-digit hex is solid in all current major browsers because it arrived with the CSS Color Module Level 4 spec, but if you need to support very old software, rgba() remains the safer, longer-supported choice for transparency.

Hex and RGB values also feed directly into accessibility checks. The W3C Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 between normal body text and its background, and that ratio is calculated from the RGB channels of each color. Once you have the RGB triple from this converter, you can drop it straight into a contrast checker to confirm text stays readable, or into the color picker of an image editor, since editors like Photoshop and GIMP almost always expect RGB rather than hex.

When to use it

• Turning a brand hex code from a style guide into the rgb() value your CSS or design token file expects.
• Building an rgba() color so you can add transparency (for example a 20 percent overlay) that plain hex cannot express in older code.
• Feeding exact 0 to 255 channel values into a canvas, SVG, or charting library that takes numeric RGB rather than a hex string.
• Checking that a shorthand code like #abc expands correctly to #aabbcc = rgb(170, 187, 204) before you commit it.
• Setting an 8-digit hex or rgba() overlay color for a modal background or hover state without breaking support in older browsers.
• Getting exact RGB channels for a contrast checker so text and background meet WCAG readability requirements.

How to use the Hex to RGB Converter

1. Type or paste your hex color into the input. You can include the hash or not, use upper or lower case, and use #RGB shorthand or full #RRGGBB.
2. Read the parsed Red, Green, and Blue values (0 to 255) and check the live swatch matches the color you expected.
3. Copy the rgb(), rgba(), or hsl() string you need with the Copy button next to each one.
4. Adjust the color with the built-in picker if you want to nudge it, then copy the updated values.

Formula & method

Worked examples

Common hex codes and their RGB values

Single hex digit to decimal value

Opacity percentage to hex alpha pair (for 8-digit hex or rgba)

Common mistakes to avoid

• Reading each hex pair as base 10. F6 is not 76 in the usual sense. Each pair is base 16, so F6 = 15x16 + 6 = 246. A good hex to RGB converter does this base conversion for you so you never have to do the arithmetic by hand.
• Not expanding #RGB shorthand. Shorthand like #abc means #aabbcc, not #ab0c00 or #0a0b0c. Each of the three digits is doubled before parsing, so #abc is rgb(170, 187, 204).
• Assuming hex can carry transparency. A 6-digit hex code only holds red, green, and blue. To add opacity you either use an 8-digit hex (RRGGBBAA) or convert to rgba(), for example rgba(59, 130, 246, 0.5) for 50 percent.
• Confusing hex order with RGB order. Hex is written RRGGBB, the same channel order as rgb(), so the first pair is always red. Do not reverse it. #FF8800 is rgb(255, 136, 0), an orange, not rgb(0, 136, 255).
• Typing rgb() values as percentages. CSS rgb() takes 0 to 255 integers by default, not percentages. rgb(50%, 50%, 50%) is valid modern CSS but means something different from rgb(50, 50, 50), so do not add a percent sign to the 0 to 255 values this converter gives you.
• Assuming every browser understands 8-digit hex. RRGGBBAA hex works in all current major browsers but was only added with the CSS Color Module Level 4 spec. If you must support very old browsers, use rgba() for transparency instead of an 8-digit hex code.

Glossary

Hex color code

A color written as # followed by 3 or 6 hexadecimal digits, where each channel uses two digits from 00 to FF.

RGB

A color model that mixes Red, Green, and Blue light, each on a 0 to 255 scale, written as rgb(r, g, b).

RGBA

RGB plus an Alpha channel for opacity, from 0 (transparent) to 1 (opaque), written as rgba(r, g, b, a).

HSL

Hue (0 to 360 degrees), Saturation, and Lightness (both percentages). A more intuitive way to lighten or desaturate a color.

Hexadecimal

A base-16 number system using digits 0 to 9 and letters A to F, where A is 10 and F is 15.

#RGB shorthand

A 3-digit hex code where each digit is doubled to make the full 6-digit code, so #f0c becomes #ff00cc.

8-digit hex (RRGGBBAA)

A hex code with two extra digits for alpha, so FF is fully opaque and 00 is fully transparent; supported in all current major browsers.

WCAG contrast ratio

A measure of the brightness difference between text and background RGB values; the W3C recommends at least 4.5:1 for normal body text.

Frequently asked questions