Hex to RGB Converter
Convert a hex color code like #2563EB into its RGB values — the red, green, and blue channel numbers (0-255 each) that hex packs into a single string.
How Hex to RGB Conversion Works
A 6-digit hex color is three 2-digit hex byte pairs in order: red, green, then blue. Each pair is a base-16 number from 00 to FF, which converts directly to a decimal value from 0 to 255 — the range every RGB channel uses on screen.
Hex to RGB Example, Step by Step
#2563EB = rgb(37, 99, 235)
#2563EB (hex) = rgb(37, 99, 235)
Split into pairs: 25 | 63 | EB 25 (hex) = 37 (decimal) -> Red 63 (hex) = 99 (decimal) -> Green EB (hex) = 235 (decimal) -> Blue
| Step | Description | Result |
|---|---|---|
| Split the hex code | #2563EB -> 25, 63, EB | 3 byte pairs |
| Convert red | 25 (hex) = 37 (decimal) | R = 37 |
| Convert green | 63 (hex) = 99 (decimal) | G = 99 |
| Convert blue | EB (hex) = 235 (decimal) | B = 235 |
Each channel converts independently — there's no interaction between red, green, and blue in this conversion, unlike HSL or CMYK where every channel depends on all three RGB values.
Where Hex to RGB Actually Comes Up
Feeding a Color Into a Canvas or WebGL API
Graphics APIs typically expect numeric RGB channels, not a hex string — converting your design system's hex color gives you the exact values to plug into fillStyle or a shader uniform.
#2563EB -> rgb(37, 99, 235)
Debugging a CSS Variable's Actual Color
When a color looks subtly wrong, breaking a hex custom property down into its RGB channels makes it easier to compare against a reference value channel by channel.
--brand-color: #2563EB -> R37 G99 B235
Preparing a Brand Color for Non-Hex-Aware Software
Some design and print tools only accept RGB input, not hex — converting a brand guideline's hex value gives you the numbers to enter there directly.
brand hex -> RGB for print tool
Common Mistakes With Hex to RGB
- Reading the hex digits as three 1-digit groups instead of three 2-digit byte pairs.
- Forgetting that 3-digit shorthand hex (#25E) needs each digit doubled before conversion.
- Mixing up channel order — hex is always red, green, blue, never a different sequence.
Why Use This Calculator Instead of Doing It by Hand
- Handles 3-digit shorthand hex automatically, no manual digit-doubling
- Runs entirely in your browser — nothing you type gets sent anywhere
- Shows each channel's conversion individually, useful for debugging
- Accepts hex with or without the # prefix
Frequently Asked Questions
How does a hex color code map to RGB?
A 6-digit hex code is three byte pairs: the first 2 digits are red, the middle 2 are green, and the last 2 are blue. Each pair is a base-16 number from 00 to FF, which is 0-255 in decimal.
What's the RGB value of #2563EB?
rgb(37, 99, 235) — 25 (hex) = 37, 63 (hex) = 99, and EB (hex) = 235.
Does this tool support 3-digit shorthand hex like #25E?
Yes — each digit is doubled first (2 becomes 22, 5 becomes 55, E becomes EE) before converting, matching how browsers interpret CSS shorthand hex.
Why does CSS support both hex and RGB for the same color?
Hex is compact for copy-pasting a single value; rgb() is more readable when you want to see or tweak individual channels, and it's required if you need an alpha channel via rgba().
Is there any precision lost converting hex to RGB?
No — this is an exact, lossless conversion. Every 2-digit hex pair maps to exactly one integer 0-255.
Why does a canvas or WebGL API want RGB instead of my CSS hex value?
Graphics APIs work with raw numeric channel data, not hex strings — converting your brand or design-token hex color to RGB gives you the values to pass directly into a canvas fillStyle array or a WebGL uniform.
How do I check what a CSS custom property's hex color actually looks like as channels?
Paste the hex value from your CSS variable here to see its red, green, and blue components individually — useful when debugging a color that looks slightly off and you need to compare channel values directly.