Hex ↔ RGB Converter

A hex to rgb converter takes a color written as a HEX triplet like #ff5733 and re-expresses it in RGB notation as rgb(255, 87, 51), or runs the conversion the other direction. Both forms describe the same sRGB color from IEC 61966-2-1, the default color space every browser renders into. HEX is base-16 shorthand; RGB is the same channels in base-10.

This HEX ↔ RGB Converter accepts either notation, validates the input as you type, and updates the paired value live along with a swatch preview so you can see the color before pasting it into a stylesheet. Frontend developers, designers, and brand teams use a hex to rgb converter to add alpha to a brand color (which requires RGB), to round-trip values between Figma exports and CSS variables, and to do quick conversions without opening the OS color picker.

Why use a HEX ↔ RGB Converter?

• Add alpha to a HEX color. Modern CSS supports #rrggbbaa, but the older rgba(r, g, b, a) form is still required for compatibility with email clients, canvas APIs, and many CSS-in-JS libraries.
• Bridge design tools and CSS variables. Designers ship HEX; many CSS variable schemes prefer raw r, g, b so the alpha can be set independently with rgb(var(--brand) / 0.5).
• Convert without opening a color picker. Paste a HEX into the input and read the RGB value before pasting it into your codebase.
• Validate partial input. The converter accepts three-character (#fff) and six-character (#ffffff) HEX, and ignores incomplete values so partial typing does not throw an error.
• Stay private. All conversion happens in your browser; no color values are sent anywhere.

How to use the HEX ↔ RGB Converter

1. Type or paste a value into the Hex field, for example #3b82f6 or #3b8.
2. Read the matching RGB value in the RGB field, formatted as r, g, b.
3. Edit the RGB value directly to convert the other way.
4. Check the preview swatch on the bottom-left to confirm the color visually.
5. Copy whichever form you need and paste it into your CSS, design token, or canvas API call.

HEX / RGB conversion formula

Each HEX color is three (or six) characters of base-16 grouped into pairs that map to the red, green, and blue channels. The converter splits the string, parses each pair as a base-16 integer, and the result is the matching decimal value from 0 to 255.

// HEX → RGB
function hexToRgb(hex) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return { r, g, b };
}
 
// RGB → HEX
function rgbToHex(r, g, b) {
  const toHex = (n) => n.toString(16).padStart(2, "0");
  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}

Three-character HEX expands by doubling each character: #abc becomes #aabbcc, then parses as RGB the same way. The conversion is lossless in both directions; the only rounding happens if you start in HSL and end in HEX.

Common color values

A few canonical colors and their HEX / RGB equivalents, useful as a sanity check while reading converter output.

If a HEX value converts to a familiar RGB triple from this table, you have a good sanity check that the math is correct.

Common use cases

• Frontend developers building token systems. Convert brand HEX values to raw r, g, b triples so a single CSS variable can drive both opaque and translucent variants.
• Email designers writing inline styles. Some older email clients render rgb() but not #rrggbbaa, so converting to RGB and adding alpha as rgba() keeps designs intact.
• Canvas and WebGL developers passing colors to a context. The 2D Canvas API accepts both forms; converting upfront avoids parsing inside hot loops.
• Brand teams documenting color libraries. Record HEX and RGB side by side so engineers, designers, and print vendors all have the form they expect.
• Accessibility reviewers feeding values into contrast checkers. Most checkers accept either notation; pre-converting saves a step.

Frequently asked questions

How do I convert HEX to RGB?

Split the HEX into pairs of hex digits, then parse each pair as a base-16 integer. #ff5733 becomes 0xff = 255, 0x57 = 87, 0x33 = 51, so the RGB form is rgb(255, 87, 51). The converter does this in your browser as you type.

What is the difference between HEX and RGB colors?

HEX and RGB describe the same color in the same color space (sRGB). HEX uses two hex characters per channel and is compact and copy-friendly. RGB writes the same numbers in decimal, supports alpha as rgba(), and is easier to compute against in JavaScript.

How do I add transparency to a HEX color?

Either append two hex characters representing the alpha (#ff573380 = 50%) or convert to RGB and use rgba(255, 87, 51, 0.5). The rgba() form has wider compatibility across legacy email clients and older CSS-in-JS libraries.

What does the 3-character HEX form mean?

A three-character HEX like #abc is shorthand for #aabbcc; each character doubles to form the full six-character value. The shortcut only works when both characters in each channel are the same digit. The converter accepts both forms.

Are HEX and RGB always identical?

Yes, when both describe the same sRGB color. The conversion is lossless because it is a direct base change. Rounding only matters when you go through HSL or a wider gamut like Display-P3, neither of which this converter touches.

Can I convert RGB to HEX in CSS?

Modern CSS lets you write either form directly, so manual conversion is rarely necessary. For programmatic conversion, use Number(n).toString(16).padStart(2, "0") per channel and concatenate with a # prefix.

What is sRGB and why does it matter?

sRGB is the standard color space defined in IEC 61966-2-1 that every browser renders into by default. Both HEX and rgb() values are interpreted as sRGB unless wrapped in a wider-gamut function like color(display-p3 ...). Stay in sRGB unless you have a specific reason to target a wider gamut.

Does the converter store my colors?

No. Conversion runs in your browser, the inputs live in component state, and nothing is sent to a server or persisted. Reload the page and the previous values are gone.

Related tools

• HAR Viewer: Open and inspect HTTP Archive files captured from DevTools.
• User-Agent Parser: Decode any user agent string into browser, OS, and engine.
• Browser Info: Show your current browser, OS, language, and hardware capabilities.
• Color Picker: Pick colors from a palette and convert between HEX, RGB, and HSL.