HEX to RGB Converter
Convert HEX color codes to RGB values instantly with live color preview.
RGB
rgb(227, 235, 1)
RGBA
rgba(227, 235, 1, 1)
Red
227
Green
235
Blue
1
Formula
R = hex[0..1] to decimal, G = hex[2..3] to decimal, B = hex[4..5] to decimal
Common Color Reference
How HEX Color Codes Work
A HEX color code is really just three numbers written in hexadecimal (base-16) instead of the decimal (base-10) you are used to. The six characters after the # sign are split into three pairs: the first two characters control red, the middle two control green, and the last two control blue.
Hexadecimal uses the digits 0-9 plus the letters A-F to represent values 0 through 15. A two-digit hex number can represent values from 00 (which is 0) to FF (which is 255). So each color channel has 256 possible values, and three channels together give you 256 x 256 x 256 = over 16.7 million possible colors.
To convert a hex pair to decimal manually, take the first digit's value times 16, then add the second digit's value. For example, in #5A, that is 5 x 16 + 10 (A = 10) = 90.
HEX vs RGB vs HSL: When to Use Each
Code Examples
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("#FF5733"); // { r: 255, g: 87, b: 51 }/* These are identical colors */
.card { background: #FF5733; }
.card { background: rgb(255, 87, 51); }
/* RGB shines when you need transparency */
.overlay { background: rgba(255, 87, 51, 0.5); }
/* Modern HEX also supports alpha (8 digits) */
.overlay { background: #FF573380; }Frequently Asked Questions
How do I convert HEX to RGB?
Split the hex code into three pairs of characters (RR, GG, BB) and convert each pair from base-16 to base-10. For example, #FF5733 splits into FF (255), 57 (87), and 33 (51), giving you rgb(255, 87, 51).
What is a HEX color code?
A HEX color code is a 6-character string preceded by # that represents a color using hexadecimal notation. Each pair of characters encodes the red, green, and blue channels, with values ranging from 00 (none) to FF (maximum).
What is RGB?
RGB stands for Red, Green, Blue. It is an additive color model where each channel has a value from 0 to 255. Combining all three at full intensity (255, 255, 255) produces white, while all zeros produces black.
Can I use 3-digit HEX codes?
Yes. A 3-digit HEX code is shorthand where each digit is doubled. #F53 expands to #FF5533. This only works when each pair has two identical characters. #ABC becomes #AABBCC.
Is HEX or RGB better for CSS?
Both render identically in browsers. HEX is more compact and widely used in design tools. RGB is more readable and allows alpha transparency with rgba(). Modern CSS also supports hex alpha with 8-digit codes like #FF573380.
What is the difference between RGB and RGBA?
RGBA adds an alpha (transparency) channel to RGB. The alpha value ranges from 0 (fully transparent) to 1 (fully opaque). rgba(255, 87, 51, 0.5) is the same color as rgb(255, 87, 51) but at 50% opacity.
How do I add transparency to a HEX color?
Add two more hex digits for alpha. #FF573380 is 50% transparent (80 in hex is 128 in decimal, which is roughly 50% of 255). Alternatively, convert to rgba() and set the fourth value.
What hex value is white?
#FFFFFF is white (all channels at maximum). The shorthand is #FFF. In RGB, white is rgb(255, 255, 255).
What hex value is black?
#000000 is black (all channels at zero). The shorthand is #000. In RGB, black is rgb(0, 0, 0).
How do hex digits work?
Hexadecimal uses 16 symbols: 0-9 and A-F. A=10, B=11, C=12, D=13, E=14, F=15. To convert a hex pair like FF: 15x16 + 15 = 255. To convert 80: 8x16 + 0 = 128.
Can I convert HEX to RGB in JavaScript?
Yes. Use parseInt with base 16: parseInt('FF', 16) returns 255. Or use a one-liner: const [r,g,b] = hex.match(/\w\w/g).map(x => parseInt(x, 16)).
Do all browsers support HEX and RGB equally?
Yes. Both HEX and RGB color formats have been supported in every browser since the earliest days of CSS. There is zero compatibility difference between them.
Disclaimer: This tool provides approximate conversions for reference purposes. Color rendering may vary slightly across different displays and browsers.