How to Convert HEX to RGB for CSS Colors
You found a color code like #3B82F6 on a website. But your CSS needs it in RGB format. How do you convert it?
Quick Answer
Each pair of digits in a HEX code is a number from 0-255 for red, green, and blue. Use the free color converter at dotsapps.com to instantly get RGB, HSL, or any format you need.
What HEX and RGB Color Codes Mean
HEX colors start with a # sign and have 6 characters. Each pair stands for red, green, or blue. The characters use numbers 0-9 and letters A-F.
RGB colors use three plain numbers from 0 to 255. The first number is red. The second is green. The third is blue. So rgb(255, 0, 0) is pure red.
Both formats describe the exact same colors. They just write them differently. HEX is shorter. RGB is easier to read and tweak.
How to Convert HEX to RGB by Hand
Take the HEX code #3B82F6. Split it into three pairs: 3B, 82, F6.
Convert each pair from base-16 to base-10:
- 3B → (3 × 16) + 11 = 59 (red)
- 82 → (8 × 16) + 2 = 130 (green)
- F6 → (15 × 16) + 6 = 246 (blue)
The result is rgb(59, 130, 246). That math gets old fast. A converter does it in one click.
When to Use RGB Instead of HEX in CSS
Use RGB when you need rgba() for transparency. You can write rgba(59, 130, 246, 0.5) for a half-see-through blue. HEX can do this too with 8 digits, but rgba is easier to read.
RGB also makes it simple to adjust one channel. Want more red? Just bump the first number. With HEX, you have to think in base-16.
For everything else, HEX and RGB work the same. Pick whatever your team prefers.
Common HEX to RGB Values You Should Know
Here are colors web developers use every day:
- #FFFFFF → rgb(255, 255, 255) — White
- #000000 → rgb(0, 0, 0) — Black
- #FF0000 → rgb(255, 0, 0) — Red
- #00FF00 → rgb(0, 255, 0) — Green
- #0000FF → rgb(0, 0, 255) — Blue
- #808080 → rgb(128, 128, 128) — Gray
For any other color, paste it into the converter and get the RGB value instantly.
How to Do It: Step-by-Step
- 1
Go to the Color Converter tool on dotsapps.com
- 2
Paste your HEX code (like #3B82F6) into the input field
- 3
See the RGB value appear instantly along with HSL and other formats
- 4
Click Copy next to the RGB value to grab it for your CSS
Frequently Asked Questions
Is HEX the same as RGB?
They describe the same colors in different ways. HEX uses base-16 numbers. RGB uses base-10 numbers from 0 to 255. You can convert between them without losing anything.
Can I use HEX colors with transparency?
Yes. Add two more characters to make an 8-digit HEX code. For example, #3B82F680 is 50% transparent. But most developers prefer rgba() because it is easier to read.
What is the HEX code for white?
#FFFFFF is white. In RGB that is rgb(255, 255, 255). All color channels are at their maximum value.
Why do designers use HEX instead of RGB?
HEX codes are shorter and easy to copy from design tools like Figma. They fit neatly in CSS files. But RGB is better when you need to adjust individual color channels or add transparency.
Ready to Try It?
Color Converter is free, private, and works right in your browser. No sign-up needed.
Open Color Converter