If you've ever worked on a website, designed a graphic, or picked a color for a presentation, you've dealt with hex codes like #FF5733 and RGB values like rgb(255, 87, 51). They represent exactly the same color — just written in different languages. A hex to RGB converter online free translates between them instantly, so you can copy the format your tool needs without doing mental math. In this guide, you'll learn what both formats mean, how to convert hex to RGB step by step, the simple formula behind it, and the color examples designers use every day.
What Are Hex and RGB Codes?
Both formats describe colors for screens, and both are built on the same idea: every color on a screen is made by mixing red, green, and blue light in different amounts.
Hex Codes
A hex code (short for hexadecimal) is a six-digit code that starts with a # symbol, like #3498DB. Each pair of digits represents one color channel: the first two digits are red, the next two are green, and the last two are blue. Each digit can be 0–9 or A–F, where A = 10, B = 11, C = 12, D = 13, E = 14, and F = 15. So #FF0000 means full red, no green, no blue — pure red.
Hex codes are compact and easy to copy, which is why they're the default in CSS stylesheets, design tools like Figma, and color pickers everywhere.
RGB Values
RGB values write the same three channels as decimal numbers from 0 to 255, like rgb(52, 152, 219). Each number is the intensity of one channel: 0 means the light is fully off, 255 means it's fully on. So rgb(255, 255, 255) is white (all lights on) and rgb(0, 0, 0) is black (all lights off).
RGB is the format you'll see in image editors, programming languages, and anywhere you need to adjust a color channel with a slider or a calculation — including transparency, where RGBA adds a fourth "alpha" value for opacity.
How to Convert Hex to RGB: Step by Step
Converting manually takes less than a minute once you know the trick. Let's convert #3498DB together:
Step 1: Remove the # and Split Into Three Pairs
Strip off the # symbol, leaving 3498DB. Then split the six characters into three pairs: 34 (red), 98 (green), and DB (blue).
Step 2: Convert Each Pair from Hexadecimal to Decimal
Each pair is a two-digit hexadecimal number. Convert it to decimal by multiplying the first digit by 16 and adding the second digit:
- Red — 34: 3 × 16 + 4 = 48 + 4 = 52
- Green — 98: 9 × 16 + 8 = 144 + 8 = 152
- Blue — DB: D is 13, so 13 × 16 + 11 = 208 + 11 = 219
Step 3: Write the RGB Value
Put the three decimal numbers together in order: rgb(52, 152, 219). That's it — you've converted #3498DB to RGB.
Step 4 (Optional): Use a Free Online Converter Instead
Doing this by hand is useful to understand, but for real work, a free online hex to RGB converter is far faster — especially for a whole color palette. Just paste the hex code, and the RGB value appears instantly, with no chance of an arithmetic slip. The free converter on King5 Tools does exactly this, in your browser, with no sign-up.
The Simple Formula
The conversion formula is the same for every pair:
Decimal value = (first hex digit × 16) + second hex digit
Remember the letter values: A = 10, B = 11, C = 12, D = 13, E = 14, F = 15. A few shortcuts make it even easier: 00 is always 0, FF is always 255, and 80 is always 128 (roughly half brightness). So pure green #00FF00 becomes rgb(0, 255, 0) at a glance, and medium gray #808080 becomes rgb(128, 128, 128).
Common Color Examples
Here are the hex and RGB values for the colors designers reach for most often. Keep this table handy for your next project:
- Black — #000000 — rgb(0, 0, 0)
- White — #FFFFFF — rgb(255, 255, 255)
- Red — #FF0000 — rgb(255, 0, 0)
- Green — #00FF00 — rgb(0, 255, 0)
- Blue — #0000FF — rgb(0, 0, 255)
- Yellow — #FFFF00 — rgb(255, 255, 0)
- Cyan — #00FFFF — rgb(0, 255, 255)
- Magenta — #FF00FF — rgb(255, 0, 255)
- Orange — #FFA500 — rgb(255, 165, 0)
- Purple — #800080 — rgb(128, 0, 128)
- Gray — #808080 — rgb(128, 128, 128)
- Coral — #FF7F50 — rgb(255, 127, 80)
- Sky Blue — #87CEEB — rgb(135, 206, 235)
- Gold — #FFD700 — rgb(255, 215, 0)
- Teal — #008080 — rgb(0, 128, 128)
Why Designers Need Both Formats
If hex and RGB describe the same colors, why does anyone need both? Because different tools and tasks expect different formats:
- Web development: CSS accepts both, but hex is the convention for solid colors, while RGB (and RGBA) is required when you want transparency — for example, a semi-transparent overlay using rgba(0, 0, 0, 0.5).
- Design tools: Figma, Photoshop, and Canva often show hex by default, but their color pickers and sliders work in RGB underneath.
- Programming: Many graphics libraries and game engines take RGB numbers as function arguments, so a hex code from a design mockup must be converted before it can be used in code.
- Color manipulation: Want to lighten a color by 20%? That's easy in RGB — just scale each number up. In hex, you'd have to convert first anyway.
- Accessibility checks: Contrast-ratio tools that test whether text is readable against a background usually work with RGB values.
- Brand guidelines: Brand style guides often list both formats so designers and developers can each use the one their tools expect, with zero ambiguity.
Being fluent in both formats — or having a converter one click away — removes friction from every step of the design-to-code workflow.
Copy-Paste Tips for CSS
A few practical tips will save you from the most common color mistakes in CSS:
- Paste the full code: Always copy the complete six-digit hex including the #, or the full rgb(...) with all three numbers. A missing digit silently changes the color — or breaks the rule entirely.
- Use CSS variables: Define your palette once at the top of your stylesheet, like --brand-blue: #3498DB;, then reuse the variable everywhere. Changing a color later becomes a one-line edit.
- Prefer RGBA for transparency: Instead of a solid hex, use rgba(52, 152, 219, 0.5) when you need a 50% transparent version of a color. The first three numbers stay the same — only the alpha changes.
- Watch out for the shorthand trap: In CSS, #FFF means white, but #FFFF is not a color at all in older browsers (it's interpreted as a different format). Stick to six digits unless you're sure the shorthand is intended.
- Test contrast: After pasting a color, check that text on top of it is readable. A quick contrast check beats guessing — and keeps your site accessible.
Frequently Asked Questions
What is the difference between hex and RGB?
Nothing about the color itself — they describe the exact same color in two notations. Hex writes each red, green, and blue channel as a two-digit hexadecimal number (like #FF5733), while RGB writes them as decimal numbers from 0 to 255 (like rgb(255, 87, 51)). Hex is more compact; RGB is easier to adjust numerically.
How do I convert hex to RGB without a tool?
Split the six hex digits into three pairs (red, green, blue). For each pair, multiply the first digit by 16 and add the second digit, remembering that A=10 through F=15. For example, #FF5733 becomes rgb(255, 87, 51). For speed and accuracy, though, a free online hex to RGB converter does it instantly.
Can a hex code have only 3 digits?
Yes. A three-digit hex code like #F53 is shorthand: each digit is doubled to make the six-digit version, so #F53 equals #FF5533. Always expand the shorthand before converting to RGB.
What is RGBA and when should I use it?
RGBA is RGB plus an alpha channel for transparency, written like rgba(52, 152, 219, 0.5) where the last number (0 to 1) is the opacity. Use it in CSS whenever you need a semi-transparent color — for overlays, shadows, or hover effects — because plain hex can't express transparency on its own.
Conclusion
Hex and RGB are two dialects of the same language, and once you know the formula — split into pairs, multiply the first digit by 16, add the second — you can translate between them anywhere. But for day-to-day work, there's no reason to do the math yourself: a free online converter turns any hex code into RGB (and back) in a single click.
Next time a design mockup hands you a hex code and your code needs RGB, try the free hex to RGB converter at King5 Tools — and while you're there, explore the other free online tools for your design and development work.