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

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.

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

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. 1

   Drop the hash and split into pairs

   #7c3aed becomes 7c, 3a and ed. These are red, green and blue in that order.

2. 2

   Convert the red pair

   7c: 7 × 16 = 112, and c is 12, so red is 112 + 12 = 124.

3. 3

   Convert the green pair

   3a: 3 × 16 = 48, and a is 10, so green is 48 + 10 = 58.

4. 4

   Convert the blue pair

   ed: e is 14, 14 × 16 = 224, and d is 13, so blue is 224 + 13 = 237.

5. 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.

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.

.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%);
}

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.

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 }

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:

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'

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 and OKLCH describe colours by hue and lightness, so small edits behave predictably.

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 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 shows them at work.

Before you ship any converted colour as text, check it against its background with a colour contrast checker. 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.