ToolNestHex to RGB: How to Convert by Hand
To convert a hex color to RGB, split the hex digits into three pairs — red, green, blue — and convert each pair from hex to decimal. For example, #FF5733 becomes R:255, G:87, B:51, because FF₁₆ = 255, 57₁₆ = 87, and 33₁₆ = 51. Skip the math with our free color converter, which also handles HSL and CMYK.
The short answer
A hex color like #FF5733 is just three numbers wearing a disguise. Drop the # sign and split the six digits into pairs: FF, 57, 33. Each pair is a base-16 (hexadecimal) number from 00 to FF, mapping to 0–255 in decimal. The first pair is red, the second green, the third blue — the three channels of light your screen mixes to make every color. Convert each pair: F is 15 in decimal, so FF = 15×16 + 15 = 255; 57 = 5×16 + 7 = 87; 33 = 3×16 + 3 = 51. So #FF5733 is rgb(255, 87, 51) — a vivid orange-red. That is the entire conversion: split into pairs, multiply the first digit by 16, add the second.
What a hex color actually is
Hex colors come from how screens make light. Each pixel has red, green, and blue subpixels, and each channel gets 8 bits — 256 intensity levels. Three channels × 8 bits = 24-bit color, or 16,777,216 possible colors (256³). Hexadecimal is just a compact way to write those three bytes: two hex digits per channel instead of three decimal digits, so #FF5733 instead of rgb(255, 87, 51). The # prefix is a convention from HTML and CSS, signaling 'what follows is hex.' Designers love hex because it is short and copy-paste friendly; developers love it because it maps one-to-one onto bytes. Underneath, though, it is always three numbers between 0 and 255 — which is exactly what RGB notation says out loud.
The hand method, step by step
Take #FF5733 and work it slowly. Step 1: strip the # → FF5733. Step 2: split into pairs → FF | 57 | 33, labeled R, G, B. Step 3: convert each pair. Hex digits run 0–9 then A–F, where A=10, B=11, C=12, D=13, E=14, F=15. For FF: first digit F=15, so 15×16 + 15 = 240 + 15 = 255. For 57: 5×16 + 7 = 80 + 7 = 87. For 33: 3×16 + 3 = 48 + 3 = 51. Step 4: assemble → rgb(255, 87, 51). Try one more, #1A2B3C: 1A = 1×16 + 10 = 26; 2B = 2×16 + 11 = 43; 3C = 3×16 + 12 = 60 → rgb(26, 43, 60), a dark slate blue. After three or four of these the pattern becomes automatic, and you will start estimating colors without finishing the arithmetic.
The 3-digit shorthand
CSS allows a compressed form: #FFF means #FFFFFF, #F53 means #FF5533. Each single digit is simply doubled — the shorthand digit D expands to the pair DD. This works because the shorthand covers the 4,096 colors where each channel's two digits are identical (00, 11, 22 … FF). #000 is black, #FFF is white, #F00 is pure red. The expansion rule is pure duplication, not multiplication: #ABC becomes #AABBCC, which is rgb(170, 187, 204) — AA = 10×16 + 10 = 170. A common mistake is reading #123 as rgb(1, 2, 3); it is actually #112233 = rgb(17, 34, 51). When converting shorthand by hand, always expand first, then convert pairs exactly as before.
Reading colors by sight
With practice you can glance at a hex code and feel the color. Pure channels are the anchors: #FF0000 is red, #00FF00 is green, #0000FF is blue — one channel maxed, the others off. #FFFFFF (all maxed) is white; #000000 (all zero) is black; #808080 (all mid) is neutral gray. Equal pairs always make grays: #333333 is dark gray, #CCCCCC light gray. High red plus high green with low blue makes yellows and oranges (#FFFF00 yellow, our #FF5733 orange-red). High blue with high red makes purples and magentas (#FF00FF magenta). Warm vs cool reads off the red-blue balance: red-dominant codes feel warm, blue-dominant feel cool. You will not nail exact shades this way, but you will instantly spot 'that is a dark blue' vs 'that is a bright pink' — enough to catch a wrong paste before it ships.
Uppercase or lowercase? Both work
Hex digits are case-insensitive: #FF5733, #ff5733, and #Ff5733 are the identical color. CSS, design tools, and browsers accept any mixture. The convention varies by team — many style guides prefer lowercase (#ff5733) because it reads calmer in code, while design tools often emit uppercase. What matters is consistency within a project, not which case you pick. This is one of those small formatting questions, like the uppercase vs lowercase rules for text, where the real rule is just 'pick one and stick with it.' One caution: when comparing color strings in code, normalize the case first — '#FFF' !== '#fff' as raw strings even though they are the same color, a classic source of duplicate-theme bugs.
RGB vs HSL vs CMYK: when each is used
RGB describes colors as light mixtures — perfect for screens, which literally emit red, green, and blue light. HSL describes the same colors as humans think about them: hue (the color wheel angle, 0–360°), saturation (how vivid), lightness (how bright). Designers prefer HSL for adjustments — 'make it a bit darker' is just lowering L, while in RGB it means scaling three numbers. Our #FF5733 is hsl(11, 100%, 60%): hue 11° (red-orange), fully saturated, 60% light. CMYK is the print world: cyan, magenta, yellow, and black ink on paper, where colors subtract instead of add — the same design looks different printed because the physics differ. Rule of thumb: hex/RGB for screens, HSL for tweaking, CMYK when something goes to a printer. A good converter speaks all four, translating losslessly between the screen formats.
The alpha channel: 8-digit hex
Modern CSS supports an 8-digit form, #RRGGBBAA, where the fourth pair is opacity: FF is fully opaque, 00 fully transparent. #FF573380 is our orange-red at 50% opacity (80₁₆ = 128, about half of 255). There is also a 4-digit shorthand, #RGBA, doubling like the 3-digit form. Alpha in hex trips people up because the scale is inverted from intuition: in everyday language 100% means opaque, but here FF (the maximum) means opaque and 00 means invisible. The older rgba() notation — rgba(255, 87, 51, 0.5) — is often clearer for humans, which is why many teams use hex for solid colors and rgba() whenever transparency is involved. Either way, the conversion rule never changes: split into pairs, hex to decimal, 0–255 per channel.
Where hex codes live
You will meet hex colors far beyond stylesheets. Design tools (Figma, Photoshop) copy them to the clipboard on every eyedropper pick. SVG graphics inline them as fill and stroke attributes. JSON theme configs store palettes as hex strings — that is how your editor theme or app skin is defined. QR codes can be recolored with brand hex values for printed materials. Data-visualization libraries take hex arrays for chart series. Even emails and documents carry them in their styling. Because hex is just text, it survives copy-paste across every one of these contexts without corruption — no rich-text formatting to strip, no locale issues with decimal commas. That portability is the quiet reason a 1990s web convention still runs the visual internet.
Convert instantly — and check contrast too
Type any hex, RGB, or HSL value into our free color converter and get every format back instantly, plus a live preview swatch and a contrast ratio against white and black — so you know whether your text will actually be readable. It runs entirely in your browser with nothing to install. Pair it with the reading skills above: use the converter for precision, your eyes for speed. And if you are wrangling text rather than colors, our case guide and JSON explainer cover the other notations developers meet daily.