HEX to RGB Converter: Color Code Translator

HEX to RGB Converter

#3b82f6 converts to rgb(59, 130, 246). Each pair of hex digits maps directly to one RGB channel: 3b is the red channel (59), 82 is green (130), and f6 is blue (246). Both formats represent the same color; they are just different notations for the same underlying values.

How Hex Maps to RGB

A hex color code is six hexadecimal digits split into three pairs. Hexadecimal is base 16, using digits 0 through 9 and letters a through f. Each pair represents one channel value from 0 (hex 00) to 255 (hex ff).

For #3b82f6:

You can verify any pair in a terminal or browser console:

parseInt('3b', 16) // 59
parseInt('82', 16) // 130
parseInt('f6', 16) // 246

To go the other direction (RGB to hex), convert each channel to base 16 and zero-pad to two digits:

(59).toString(16).padStart(2, '0')  // '3b'
(130).toString(16).padStart(2, '0') // '82'
(246).toString(16).padStart(2, '0') // 'f6'

Hex Shorthand

3-digit hex colors are shorthand for 6-digit ones. Each digit is duplicated: #rgb expands to #rrggbb.

#f00  →  #ff0000  →  rgb(255, 0, 0)
#0f0  →  #00ff00  →  rgb(0, 255, 0)
#abc  →  #aabbcc  →  rgb(170, 187, 204)

Not every 6-digit hex can be shortened. #3b82f6 cannot, because 3b, 82, and f6 do not have matching digits in each pair.

Alpha Channels: 8-Digit Hex and rgba()

Standard 6-digit hex has no opacity. Two options exist for transparency:

The first is rgba() in CSS: rgba(59, 130, 246, 0.5) adds a 50% opacity alpha value. The alpha parameter is a float from 0 (transparent) to 1 (opaque).

The second is 8-digit hex: #3b82f680. The last two digits are the alpha channel, also 00 to ff. 80 in hex is 128 in decimal, which is roughly 50% of 255. The exact calculation: 128 / 255 ≈ 0.502.

8-digit hex is fully supported in modern browsers, but some design tools and older CSS preprocessors do not recognize it. rgba() is the safer choice if compatibility is a concern.

CSS Color Functions: Which to Use When

CSS offers four main ways to specify colors:

/* HEX — compact, common in design tools and style guides */
color: #3b82f6;

/* RGB — useful when you need to compose values dynamically */
color: rgb(59 130 246);        /* modern syntax, no commas */
color: rgba(59, 130, 246, 0.5); /* with alpha, legacy syntax */

/* HSL — best for programmatic manipulation */
color: hsl(217 91% 60%);

/* HWB, oklch — newer models with better perceptual uniformity */
color: oklch(60% 0.15 250);

For static colors in a stylesheet, HEX is concise. Use rgb() when building colors from CSS custom properties. Use hsl() or oklch() when you need to adjust lightness or saturation without changing hue.

Conversion in Code

# Python
def hex_to_rgb(hex_color):
    hex_color = hex_color.lstrip('#')
    return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))

hex_to_rgb('#3b82f6')  # (59, 130, 246)

// JavaScript
function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

hexToRgb('#3b82f6'); // { r: 59, g: 130, b: 246 }

/* CSS — use a custom property if you need rgb values for rgba() */
:root {
  --color-primary-rgb: 59, 130, 246;
}

.element {
  background: rgba(var(--color-primary-rgb), 0.1);
}

This pattern is common in design systems where you need both a solid and a transparent version of the same color.