Hex to RGB Converter — HEX, RGB, RGBA & HSL

A hex to RGB converter takes a HEX color code like #1B3A6B and turns it into the rgb(), rgba() and hsl() values that CSS, JavaScript, and design tools use for calculations, animations, and transparency. Type a hex code above, or pick a color visually, and every format updates instantly — copy whichever one your project needs with a single click.

Arb Digital's developers reach for a hex to RGB converter constantly when we're building client sites: a brand guide hands us a hex palette, but the CSS we're writing needs an rgba() value for a translucent overlay or a hover state. Converting by hand is slow and error-prone, so we built this tool into our free resources for exactly that handoff moment.

What This Hex to RGB Converter Does

This tool accepts a HEX color in any of the three formats browsers support — 3-digit shorthand, 6-digit standard, or 8-digit with alpha — and immediately outputs the equivalent RGB, RGBA and HSL values, plus a live color swatch so you can visually confirm the result. It works the other direction too: adjust the color picker and watch the HEX and RGB values update together, so you're never stuck manually typing color codes back and forth between formats.

Everything runs instantly as you type or click, with no page reload and no server round-trip. Each output line — RGB, RGBA, HSL and HEX — has its own copy button, so you can grab exactly the string you need and paste it straight into your stylesheet, a CSS-in-JS file, a design tool, or a canvas drawing script.

How to Use the Hex to RGB Converter

1. Enter a HEX code. Type it into the text field with or without the leading # — 3, 6, or 8 digits are all accepted.
2. Or pick a color visually. Click the color swatch picker to open your browser's native color wheel and choose any color by eye.
3. Read the RGB value. The headline result shows the ready-to-use rgb(r, g, b) string for that color.
4. Check RGBA if you need transparency. The RGBA line shows the same color with an alpha value — 1 by default, or automatically derived if your hex code included an 8-digit alpha pair.
5. Copy what you need. Click any copy button next to RGB, RGBA, HSL or HEX to place that exact string on your clipboard.

The Formula — How Hex to RGB Conversion Actually Works

Here's the part most tutorials skip: hex is just RGB written in base-16 instead of base-10. A 6-digit hex code like #1B3A6B is really three separate two-digit hexadecimal numbers glued together — 1B, 3A, and 6B — one pair for red, one for green, one for blue. Each pair can represent any value from 00 to FF in hexadecimal, which is exactly the same range as 0 to 255 in decimal — the range every RGB channel in CSS uses. So converting hex to RGB is nothing more than converting each of those three hex pairs into its decimal equivalent: 1B in hex equals 27 in decimal, 3A equals 58, and 6B equals 107 — which is exactly the rgb(27, 58, 107) this tool produces for that swatch. As the MDN hex-color reference confirms, this is precisely how browsers parse a hex color internally — they never treat hex and RGB as fundamentally different color spaces, only as two different ways of writing the same three numbers.

That's also why this converter can run entirely in your browser with a few lines of JavaScript: parse the hex string as a base-16 integer, then use bit shifting or substring slicing to pull out each channel, and format the result as a decimal string. No lookup table, no external color library, and no network request required — the math is genuinely that simple once you see hex for what it is.

Why Hex Codes Come in 3, 6 and 8 Digits

A lot of confusion around hex colors comes from not knowing there are three valid lengths, each with a distinct purpose:

• 3-digit shorthand (#f00) — a compact form where each digit is automatically doubled to build the full value. #f00 expands to #ff0000, because CSS repeats each character: f becomes ff, and 0 becomes 00. This shorthand only works for colors where both digits in each channel are identical, so it can't represent every possible color — just a convenient 4,096-color subset that happens to include pure red, green, blue, black, white, and the primary web-safe hues.
• 6-digit standard (#1B3A6B) — the format almost everyone means when they say "hex code." Two digits per channel give the full 0–255 range per color, for 16,777,216 possible colors — the entire RGB color space.
• 8-digit with alpha (#1B3A6BCC) — the same 6-digit color with two extra digits appended for opacity. Those final two digits work exactly like the other three pairs: a hex value from 00 (fully transparent) to FF (fully opaque) that this converter reads and turns into the decimal alpha shown in the RGBA output and the Alpha metric above.

Browser support for 8-digit hex with alpha arrived later than the other two formats, but it's now supported in every modern browser per MDN's compatibility notes. If you're still supporting genuinely ancient browsers, use rgba() instead of 8-digit hex for transparency — which is exactly what the RGBA line in this tool gives you.

Why You'd Convert Hex to RGB or RGBA in the First Place

Designers and brand guidelines almost always hand off colors as hex — it's compact, it's what color pickers in Figma and Photoshop display by default, and it's the format most people recognize on sight. But once that hex code lands in real CSS, RGB and RGBA are frequently the more useful forms:

• Transparency and overlays. Hex alone has no opacity concept in its plain 6-digit form. To fade a brand color into a semi-transparent overlay, modal backdrop, or hover state, you need rgba(r, g, b, alpha) — and you need the RGB numbers to build it.
• CSS animations and JavaScript color interpolation. Animating between two colors — a button that shifts shade on hover, a loading bar that changes hue — is far easier to reason about and calculate in RGB or HSL than in raw hex strings, because RGB gives you three separate numeric channels you can interpolate mathematically.
• Canvas and WebGL work. The HTML canvas API and many graphics libraries expect RGB or RGBA values, not hex, when you're drawing programmatically.
• Dynamic theming. When a theme system needs to lighten, darken, or blend a base color at runtime, working with the individual R, G and B numbers (or HSL's hue/saturation/lightness) is much more tractable than string-manipulating a hex code.

This is the practical reason a hex to RGB converter earns a permanent spot in a front-end developer's toolkit: the handoff format and the working format are often different, and converting by hand invites transposition errors that are painfully hard to spot in a six-character string.

HSL: The Bonus Format You Often Actually Want

Alongside RGB and RGBA, this tool also converts your hex color to HSL — Hue, Saturation, Lightness. Where RGB describes a color as a mix of three light channels, HSL describes it the way a person actually thinks about color: what hue is it, how vivid, and how light or dark. That makes HSL the easiest format for programmatically generating a hover state (bump the lightness a few points) or a muted secondary color (lower the saturation) from a single brand hex value — adjustments that are awkward to do accurately in raw hex or RGB.

Common Mistakes to Avoid

• Forgetting the shorthand doubles each digit. #1b3 is not the same as #1b3300 — it expands to #11bb33, doubling each character individually.
• Mixing up hex alpha with a percentage. An 8-digit hex alpha pair is a hex value (00–FF), not a direct percentage — 80 in hex is roughly 50% opacity, not 80%.
• Using RGB percentages inconsistently. CSS also allows rgb(10%, 20%, 40%) syntax, but mixing percentage and 0–255 syntax in the same value isn't valid — pick one notation per color function.
• Assuming every hex color has a clean 3-digit shorthand. Only colors where both digits per channel match can be shortened; most real-world brand colors, like the #1B3A6B default above, cannot.
• Copying a hex value with a stray character. A pasted hex code with extra whitespace or a missing digit will silently fail to parse in some tools — this converter validates length before rendering a result.

Related Free Tools From Arb Digital

Need to go the other direction? Use the RGB to hex converter to turn R, G, B numbers back into a hex code. Once you have your color, build a full gradient with the CSS gradient generator, add depth with the box shadow generator, check accessibility with the color contrast checker, or explore any color visually with the color picker & converter. Browse every tool at our free online tools hub.

Frequently Asked Questions