How to Convert HEX to RGB Online
- Type or paste a HEX color code (like
#FF5733orFF5733) into the HEX field. - HEXToRGB instantly validates it and shows RGB, RGBA, HSL, HSV and CMYK values plus a live preview swatch.
- Click any value, or use Copy HEX, Copy RGB or Copy CSS, to copy it to your clipboard.
- To go the other way (RGB to HEX), drag the R, G, B and Alpha sliders or type numbers — the HEX code updates in real time.
The HEX to RGB Formula
A 6-digit HEX code is three pairs of hexadecimal digits: #RRGGBB. Each pair is a base-16 number from 00 (0) to FF (255). Convert each pair to decimal:
/* #FF5733 */
R = FF₁₆ = 15×16 + 15 = 255
G = 57₁₆ = 5×16 + 7 = 87
B = 33₁₆ = 3×16 + 3 = 51
→ rgb(255, 87, 51)In JavaScript this is simply parseInt("FF", 16). For the reverse, RGB to HEX, use n.toString(16).padStart(2, "0") for each channel.
HEX vs RGB vs HSL: Which Color Format Should You Use?
| Format | Example | Best for |
|---|---|---|
| HEX | #FF5733 | Compact codes for design tools, brand guides & CSS |
| HEX8 | #FF573380 | HEX with transparency (alpha) |
| RGB / RGBA | rgba(255, 87, 51, 0.5) | Readable channels, JS/canvas, opacity control |
| HSL | hsl(11, 100%, 60%) | Building themes, tints & shades |
| HSV / HSB | hsv(11, 80%, 100%) | Color pickers in Photoshop, Figma & Sketch |
Understanding Alpha Transparency (RGBA & 8-Digit HEX)
The alpha channel sets opacity from 0 (invisible) to 1 (solid). In 8-digit HEX the last pair stores alpha on a 0–255 scale: 80 ≈ 50%, CC = 80%, FF = 100%. Use the Alpha slider above to generate both rgba() and #RRGGBBAA at once — the checkerboard behind the swatch shows exactly how transparent your color is.
Frequently Asked Questions
How do I convert HEX color codes to RGB?
Split the 6-digit HEX code into three pairs (RR, GG, BB) and convert each pair from base-16 to base-10. For example, #FF5733 becomes FF=255, 57=87, 33=51, so the RGB value is rgb(255, 87, 51). With HEXToRGB you just paste the HEX code and the RGB, RGBA, HSL and HSV values appear instantly.
What is the difference between HEX and RGB color formats?
HEX and RGB describe exactly the same colors using the same red, green and blue channels. HEX writes each channel as a two-digit hexadecimal number (00–FF) in one compact string like #FF5733, while RGB writes each channel as a decimal number from 0 to 255, like rgb(255, 87, 51). HEX is compact and popular in design tools; RGB is easier to read and adjust by hand.
How does RGBA alpha opacity work in web design?
RGBA adds a fourth alpha channel that controls opacity from 0 (fully transparent) to 1 (fully opaque). For example rgba(255, 87, 51, 0.5) is 50% transparent, letting the background show through. The same opacity can be written as an 8-digit HEX code where the last two digits are the alpha, e.g. #FF573380.
What do 3-digit and 8-digit HEX codes mean?
A 3-digit HEX code is shorthand where each digit is doubled, so #FFF equals #FFFFFF and #F53 equals #FF5533. An 8-digit HEX code (#RRGGBBAA) adds two digits for alpha transparency, so #FF5733CC is the same as rgba(255, 87, 51, 0.8). HEXToRGB also accepts 4-digit shorthand (#RGBA).
How do I convert RGB to HEX?
Convert each RGB channel (0–255) to a two-digit hexadecimal number and join them with a leading #. For example rgb(255, 87, 51) becomes FF, 57 and 33, giving #FF5733. In HEXToRGB, type values into the R, G, B and Alpha fields and the HEX code updates in real time.
What is a good WCAG contrast ratio for text?
WCAG 2.x requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text to pass level AA, and 7:1 for normal text and 4.5:1 for large text to pass level AAA. HEXToRGB shows your color's contrast ratio against white and dark backgrounds with pass/fail badges.
Is HEXToRGB free and private?
Yes. HEXToRGB is 100% free with no sign-up. All color conversion runs locally in your browser with JavaScript — nothing is uploaded or sent to a server.