How to Convert HEX to RGB

← Back to Blog

How to Convert HEX to RGB

· 5 min read

Why Convert HEX to RGB?

HEX color codes like #FF5733 are ubiquitous in web design, but RGB format like rgb(255, 87, 51) is more intuitive or necessary in certain scenarios. When you need to add transparency in CSS, dynamically interpolate colors in JavaScript, or pass design colors to print workflows, converting to RGB is often a necessary step.

Manual Conversion Method

The core of HEX-to-RGB conversion is translating hex character pairs into decimal numbers. The steps are:

1. Remove the # sign to get a 6-character hex string
2. Split the string into three 2-character groups (RR, GG, BB)
3. Convert each group from hexadecimal to decimal

HEX: #FF5733

RR = FF → (15 × 16) + 15 = 255
GG = 57 → (5  × 16) + 7  = 87
BB = 33 → (3  × 16) + 3  = 51

RGB: rgb(255, 87, 51)

Hexadecimal Letter Reference

Hexadecimal uses letters A–F to represent values 10–15. When calculating manually, remember: A=10, B=11, C=12, D=13, E=14, F=15.

Example: #1A2B3C
R = 1A → (1 × 16) + 10 = 26
G = 2B → (2 × 16) + 11 = 43
B = 3C → (3 × 16) + 12 = 60
RGB: rgb(26, 43, 60)

Implementing HEX to RGB in Code

In JavaScript, you can use parseInt with base 16 to perform the conversion:

function hexToRgb(hex) {
  // Remove # if present
  hex = hex.replace(/^#/, '');

  // Handle 3-character shorthand
  if (hex.length === 3) {
    hex = hex.split('').map(c => c + c).join('');
  }

  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);

  return { r, g, b };
}

// Usage
hexToRgb('#FF5733'); // { r: 255, g: 87, b: 51 }

Converting 3-Character Shorthand HEX

When encountering shorthand form like #F53, first expand each character by duplicating it to get 6 characters (#FF5533), then convert using the standard method. In code, you can perform c + c on each character to expand it, as shown in the JavaScript example above.

The rgba() Format in CSS

Once you have the RGB values, you can easily use the rgba() function in CSS to add transparency. The alpha value ranges from 0 (fully transparent) to 1 (fully opaque):

/* Fully opaque */
background: rgb(255, 87, 51);

/* 50% transparent */
background: rgba(255, 87, 51, 0.5);

/* 20% transparent overlay */
background: rgba(255, 87, 51, 0.2);

This is something HEX format cannot do directly (although modern CSS supports 8-character HEX for transparency), making RGB/RGBA the preferred choice in scenarios requiring transparency effects.

Using Online Tools for Quick Conversion

For daily design work, manual calculation is inefficient. Our online color picker tool instantly converts HEX to RGB — just enter any HEX code and the tool immediately shows the corresponding RGB, HSL, and other format values, ready to copy.

Try the online tool now — no installation, completely free.

Open Tool →