Hex to RGB Converter

Hex to RGB converter

This tool converts any hex colour code into its RGB equivalent and shows a live swatch. It is for developers and designers moving colours between CSS, design tools and code where one format is required and another is on hand. Paste a hex value or use the picker, and read the rgb() string plus each channel.

How it works

A hex colour encodes three 8-bit channels in base 16. The converter strips an optional leading #, and if you pass 3-digit shorthand it doubles each digit (#abc → #aabbcc). It then splits the 6 digits into three pairs and converts each pair from base 16 to a 0–255 decimal value for red, green and blue. Those become the rgb(r, g, b) string and the individual channel readouts. Anything that is not a valid 3- or 6-digit hex code is rejected with an inline message rather than a guessed colour.

Example

For #3b82f6, the three pairs convert as:

• 3b (hex) = 3×16 + 11 = 59
• 82 (hex) = 8×16 + 2 = 130
• f6 (hex) = 15×16 + 6 = 246

So #3b82f6 becomes rgb(59, 130, 246).

Everything happens in your browser — nothing is uploaded.

When to use rgb() vs hex in CSS

Both formats describe exactly the same colour — the choice is mostly about readability and tooling:

• Hex is shorter for opaque colours in stylesheets. #3b82f6 is fewer characters than rgb(59, 130, 246).
• rgb() is easier to tweak mathematically. If you need to darken the red channel by 20, you can see and change that number directly.
• CSS custom properties often store channels separately — for example --color-blue: 59 130 246 — so you can write rgb(var(--color-blue) / 0.5) for a 50% opacity variant. In that pattern you need the RGB numbers.
• Canvas API and WebGL require RGB numbers, not hex strings. Converting to rgb() first is a necessary step when drawing programmatically.
• Design tokens in tools like Figma, Storybook and Style Dictionary often export colours in multiple formats; you may receive hex from a designer and need to paste an rgb() value into code.

What each channel actually controls

Each of the three decimal values controls one primary colour of light:

• R (red) — 0 means no red light, 255 means full red. A pure red #ff0000 has R=255, G=0, B=0.
• G (green) — humans are most sensitive to green, which is why the green channel has the strongest effect on perceived brightness.
• B (blue) — full blue #0000ff has R=0, G=0, B=255.

When all three channels are equal — rgb(128, 128, 128) for example — the result is a neutral grey with no colour cast.

Adding transparency

This tool outputs the opaque rgb() form. To add transparency, switch to rgba() by appending an alpha value between 0 (fully transparent) and 1 (fully opaque). For example, rgb(59, 130, 246) becomes rgba(59, 130, 246, 0.5) for a half-transparent blue. Modern CSS also accepts the space-separated slash syntax: rgb(59 130 246 / 50%).