Hex to RGB converter

How to use the hex to RGB converter

1. Paste or type the hex code. The # is optional, so 4A90E2, #4a90e2 and 0x4A90E2 all work.
2. Read the result: rgb(74, 144, 226), with the red, green and blue values listed separately and the arithmetic for each pair shown underneath.
3. Copy the form you need. The rgba() row is ready for a transparent version, the "modern CSS" row uses the space-separated syntax, and the HSL row gives the hue, saturation and lightness.

A code that isn't valid gets a plain error rather than a wrong color: a letter outside A to F, or a length other than 3, 4, 6 or 8 digits, is the usual cause. Going the other way, from numbers to a code, is the job of the RGB to hex converter.

How to read a hex color code

A six-digit code is three pairs: #RRGGBB. The first pair is red, the second green, the third blue. Each pair is a number from 0 to 255 written in hexadecimal (base 16), which counts 0, 1, 2 … 9, A, B, C, D, E, F before it needs a second digit. A is 10, B is 11, C is 12, D is 13, E is 14 and F is 15.

So #4A90E2 splits into 4A (red), 90 (green) and E2 (blue). The higher the pair, the more of that light: E2 is a high blue, 4A a low red, which is why the color is a sky blue.

The hex to RGB formula

For each pair, multiply the first digit by 16 and add the second digit:

• 4A: 4 × 16 + 10 = 74
• 90: 9 × 16 + 0 = 144
• E2: 14 × 16 + 2 = 226

Together: rgb(74, 144, 226). The biggest pair, FF, is 15 × 16 + 15 = 255; the smallest, 00, is 0. That's the whole method, and it's what the converter does for you, with the working printed under each channel.

Worked examples

Three-digit shorthand and eight-digit alpha

A 3 digit hex code such as #333 or #FC0 is shorthand: each digit is doubled to make the full code. #333 is #333333, #FC0 is #FFCC00. The converter expands it and tells you the six-digit form it used. Shorthand only exists for colors whose pairs are doubled digits, so #4A90E2 cannot be shortened.

An 8 digit hex color adds a fourth pair for alpha (opacity): #RRGGBBAA. 00 is fully transparent and FF fully opaque. To convert the alpha pair, divide its value by 255: 80 is 128 ÷ 255 = 0.502, so #FF000080 is a red at about 50% opacity, written rgba(255, 0, 0, 0.5). There's a 4-digit shorthand too (#F008 = #FF000088). Eight-digit codes are part of CSS Color Level 4 and are supported by all current browsers (MDN: hex color).

The "hex to rgba" use case is usually this: you have a brand color as a six-digit code and need it at 20% for a hover background. Convert it here, then set the last number yourself: rgba(74, 144, 226, 0.2).

Hex to RGB in CSS: which form to use

In CSS, #4A90E2, rgb(74, 144, 226), rgb(74 144 226) and rgba(74, 144, 226, 1) are the same color, and rgba() is now just an alias of rgb() (MDN: rgb()). Reasons to prefer the RGB form:

• You need transparency and want it readable: rgb(74 144 226 / 20%) says what it does.
• You keep channels in custom properties: --brand: 74 144 226; then rgb(var(--brand) / 0.5).
• You're feeding a canvas, WebGL or image-processing code that wants numbers, not strings.

Otherwise hex is shorter and most code bases use it for solid colors. Both are 8-bit sRGB, so neither can express a wide-gamut Display P3 color; for that CSS has color(display-p3 r g b).

Common web colors in hex and RGB

Grey scales and a handful of CSS named colors come up constantly in stylesheets. Each row is converted with the formula above.

The named colors are fixed by the CSS named-color list, so teal always means #008080.

Hex to RGB percentage

CSS also accepts channels as percentages: rgb(29% 56.5% 88.6%). To get them, divide each channel by 255 and multiply by 100. For #4A90E2: 74 ÷ 255 = 29.0%, 144 ÷ 255 = 56.5%, 226 ÷ 255 = 88.6%. The per-channel table in the result shows the percentages alongside the decimal values, which is useful for shader code and for design tools that show channels as 0–1 or 0–100%.

Hex to HSL

Hue, saturation and lightness are a different description of the same color. For #4A90E2: scale the channels to 0–1 (0.290, 0.565, 0.886). Lightness is the average of the highest and lowest channels, (0.886 + 0.290) ÷ 2 = 0.588, so 59%. Saturation is the range (0.596) divided by 1 − |2L − 1| = 0.824, giving 0.72, so 72%. Blue is the highest channel, so the hue is 60° × ((R − G) ÷ range + 4) = 60 × 3.539 ≈ 212°. The result is hsl(212, 72%, 59%). Greys like #333 have no hue or saturation, so they come out as hsl(0, 0%, 20%).

Hex to RGB in JavaScript and Python

For one color use the converter; for a batch, these short versions apply the same formula.

JavaScript reads the six digits as one number and splits it with bit shifts:

const hexToRgb = (hex) => {
  const n = parseInt(hex.replace('#', ''), 16);
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
};
hexToRgb('#4A90E2'); // [74, 144, 226]

Python converts each pair with int(pair, 16):

h = '#4A90E2'.lstrip('#')
tuple(int(h[i:i + 2], 16) for i in (0, 2, 4))  # (74, 144, 226)

Both expect a six-digit code. Expand 3-digit shorthand first, and take the last pair off an 8-digit code as alpha.

What the numbers don't tell you

RGB values from a hex code assume the sRGB color space, which is what browsers use by default. If the code came from a photo in Display P3 or Adobe RGB, the same numbers describe a stronger color there. See sRGB vs Adobe RGB vs Display P3 if colors shift after upload. And a hex code is only a color, not a judgement: run the result through the color contrast checker before using it for text.