# Hex to RGB: convert colour codes by hand or in code

[Canonical HTML page](https://gradiently.design/guide/hex-to-rgb)

A hex code is just three numbers written in base 16. Once you can see the pairs, converting by hand takes seconds, and the code version is four lines.

## The short version

- To convert hex to RGB, split the six digit code into three pairs and convert each pair from base 16 to a number between 0 and 255.
- Each pair is worked out as the first digit times 16, plus the second digit, where the letters a to f stand for 10 to 15.
- The hex code #7c3aed is rgb(124 58 237): 7c is 124, 3a is 58 and ed is 237.
- A three digit hex code is shorthand where each digit is doubled, so #f60 is the same colour as #ff6600.
- Hex and RGB describe exactly the same sRGB colours, so converting between them never changes how a colour looks.

To convert **hex to RGB**, split the code into three pairs of characters, one each for red, green and blue, and turn each pair from base 16 into a normal number between 0 and 255. For `#7c3aed`, the pairs are `7c`, `3a` and `ed`, which become 124, 58 and 237, so the colour is `rgb(124 58 237)`. Nothing about the colour changes. Hex and RGB are two spellings of the same three numbers.

## How a hex colour code is built

A hex code has six characters after the hash. The first two are the red channel, the middle two are green and the last two are blue. Each channel can hold 256 values, from 0 (none of that light) to 255 (all of it). Base 16 can write any of those 256 values in exactly two characters, which is why hex became the compact way to type colours on the web. For the bigger picture of how these codes relate to each other, see [hex color codes explained](https://gradiently.design/guide/color-codes-explained).

Base 16 counts from 0 to 9 and then carries on with letters. That is the only thing you need to memorise:

| Hex digit | Value | Hex digit | Value |
| --- | --- | --- | --- |
| 0 to 9 | 0 to 9 | c | 12 |
| a | 10 | d | 13 |
| b | 11 | e | 14 |
| f | 15 | ff (a pair) | 255 |

Letters are case insensitive: #7C3AED and #7c3aed are the same colour.

## How to convert hex to RGB by hand

Each pair is a two digit number in base 16. The left digit counts sixteens and the right digit counts ones. Multiply the left digit by 16, add the right digit, and you have that channel's value.

1. **Drop the hash and split into pairs** `#7c3aed` becomes `7c`, `3a` and `ed`. These are red, green and blue in that order.
2. **Convert the red pair** `7c`: 7 × 16 = 112, and c is 12, so red is 112 + 12 = **124**.
3. **Convert the green pair** `3a`: 3 × 16 = 48, and a is 10, so green is 48 + 10 = **58**.
4. **Convert the blue pair** `ed`: e is 14, 14 × 16 = 224, and d is 13, so blue is 224 + 13 = **237**.
5. **Write the result** Modern CSS takes `rgb(124 58 237)`. The older comma form `rgb(124, 58, 237)` still works everywhere.

Two quick checks keep you honest. `00` is always 0 and `ff` is always 255, so any pair starting with a letter from a to f is 160 or more, and any pair starting with 0 to 7 is below 128. If your answer for `ed` comes out small, you have read the digits the wrong way round.

- #7c3aed = 124 58 237: #7c3aed
- #336699 = 51 102 153: #336699
- #ff6600 = 255 102 0: #ff6600
- #0d9488 = 13 148 136: #0d9488
- #1e293b = 30 41 59: #1e293b

Five worked conversions. Try one by hand, then check it against the swatch name.

## Shorthand codes and alpha

A **three digit code** is a shortcut: double each digit to get the full code. `#f60` means `#ff6600`, which is `rgb(255 102 0)`. `#fff` is white and `#000` is black. Only colours whose pairs repeat a digit can be written this way, so `#7c3aed` has no short form.

An **eight digit code** adds a fourth pair for opacity. It converts the same way, then you divide by 255 to get a fraction. `#7c3aed80` ends in `80`, which is 128, and 128 ÷ 255 is about 0.5, so it equals `rgb(124 58 237 / 50%)`. A four digit code such as `#f608` is the shorthand version of the same idea.

```css
.card {
  /* the same violet written four ways */
  color: #7c3aed;
  color: rgb(124 58 237);
  color: rgb(124, 58, 237);

  /* half transparent */
  background: #7c3aed80;
  background: rgb(124 58 237 / 50%);
}
```

Every line in each group renders identically. Use whichever your team reads fastest, and stay consistent.

## Hex to RGB in JavaScript

In code, `parseInt` with a radix of 16 does the base conversion for you. The function below accepts three, four, six and eight digit codes, with or without the hash, and returns the channels plus an alpha between 0 and 1.

```js
function hexToRgb(hex) {
  let h = hex.replace(/^#/, '');
  if (h.length === 3 || h.length === 4) {
    h = h.split('').map((c) => c + c).join('');
  }
  if (!/^[0-9a-f]{6}([0-9a-f]{2})?$/i.test(h)) {
    throw new Error('Not a hex colour: ' + hex);
  }
  const n = (i) => parseInt(h.slice(i, i + 2), 16);
  return {
    r: n(0),
    g: n(2),
    b: n(4),
    a: h.length === 8 ? Math.round((n(6) / 255) * 100) / 100 : 1,
  };
}

hexToRgb('#7c3aed');   // { r: 124, g: 58, b: 237, a: 1 }
hexToRgb('f60');       // { r: 255, g: 102, b: 0, a: 1 }
hexToRgb('#7c3aed80'); // { r: 124, g: 58, b: 237, a: 0.5 }
```

No library needed. The validation line stops a typo from quietly becoming black.

## How to convert RGB to hex

Going back is division. Divide the channel by 16: the whole number is the first digit and the remainder is the second. For 153, 153 ÷ 16 is 9 remainder 9, so the pair is `99`. For 51 it is 3 remainder 3, giving `33`, and 102 gives 6 remainder 6, or `66`. So `rgb(51 102 153)` is `#336699`. In JavaScript, `toString(16)` does it, with a pad so single digits keep their leading zero:

```js
const rgbToHex = (r, g, b) =>
  '#' + [r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('');

rgbToHex(51, 102, 153); // '#336699'
rgbToHex(13, 148, 136); // '#0d9488'
```

Without padStart, 13 would become d instead of 0d and the code would be one character short.

## When to use hex, RGB or something else

Hex is compact and easy to paste between tools, which is why brand guides and design files use it. RGB is easier to reason about when you need to change one channel or add transparency in code. Neither is good at the questions designers actually ask, such as "make this a little lighter" or "find a softer version of this blue". For those, [HSL colour](https://gradiently.design/guide/hsl-colors) and [OKLCH](https://gradiently.design/guide/oklch-explained) describe colours by hue and lightness, so small edits behave predictably.

### Hex or RGB is right for

- Brand guides and handoff to developers
- Copying a colour between apps
- Adding transparency in CSS or canvas
- Matching an exact value from a spec

### Reach for HSL or OKLCH for

- Making a colour lighter or darker
- Building tints and shades for a palette
- Smoother gradients between distant hues
- Theming with CSS variables

One more distinction matters for print. Hex and RGB describe light on a screen, so a printer has to translate them into ink, and very bright screen colours can dull on paper. [RGB vs CMYK](https://gradiently.design/guide/rgb-vs-cmyk) explains what to expect. On screen, the converted colours are identical, and when you need a colour to fade out, the alpha forms above are what you write; [transparent gradients in CSS](https://gradiently.design/guide/css-gradient-transparent) shows them at work.

Before you ship any converted colour as text, check it against its background with a [colour contrast checker](https://gradiently.design/guide/color-contrast-accessibility). In Gradiently you rarely need to: auto ink picks light or dark type for each line from the Mark's own palette, so the words read.

## FAQ

### How do you convert hex to RGB?

Split the six digit code into three pairs and convert each from base 16: multiply the first digit by 16 and add the second, with a to f meaning 10 to 15. #7c3aed becomes 124, 58, 237.

### What is #ffffff in RGB?

It is rgb(255 255 255), pure white. Every pair is ff, which is 15 × 16 + 15 = 255.

### How do I convert hex to RGBA?

Convert the first three pairs as usual. If the code has eight digits, convert the last pair too and divide it by 255 for the alpha, so 80 gives about 0.5.

### Does converting hex to RGB change the colour?

No. Both are notations for the same sRGB values, so the colour renders identically either way.

### How do I convert RGB back to hex?

Divide each channel by 16: the whole number is the first hex digit and the remainder the second. In JavaScript use value.toString(16).padStart(2, '0').