Convert HEX to RGB
Convert HEX codes like #FF5733 into CSS rgb(255, 87, 51)—fast, private, and right in your browser.
- Paste a single HEX color or a whole palette
- Use one color per line for batch conversion
- Copy your RGB results instantly
Quick start
- Paste your HEX color(s) into the input.
- Use one color per line.
- Copy the RGB results.
Single color
Input:
#22D3EEOutput:
rgb(34, 211, 238)Palette / design tokens (batch)
Input:
#FF0055
#22D3EE
#111827Output:
rgb(255, 0, 85)
rgb(34, 211, 238)
rgb(17, 24, 39)What HEX means
HEX is a compact way to write RGB values using hexadecimal (base‑16).
Most commonly, HEX appears as:
#RRGGBB
Each pair is one channel:
RR= redGG= greenBB= blue
Example:
#FF5733means:FF(red)57(green)33(blue)
Shorthand HEX
You’ll also see 3-digit shorthand:
#fffexpands to#ffffff
It’s the same color—just a shorter notation.
HEX is widely used for:
- CSS variables and theme tokens
- Tailwind / design system configs
- storing palettes in JSON/YAML
- quick copy/paste across tools
What RGB means
RGB stands for Red, Green, Blue—the three light channels used by screens.
- Each channel is an integer from 0 to 255.
rgb(0, 0, 0)is black.rgb(255, 255, 255)is white.
RGB is especially useful when you need to:
- do math with colors (mixing, gradients, interpolation)
- use canvas / WebGL APIs
- animate colors or generate tints/shades programmatically
How HEX → RGB conversion works
Conceptually, the converter does this for each line:
- Read the HEX pairs for red/green/blue
- Convert each pair from base‑16 to base‑10
- Format the result as
rgb(r, g, b)
A small example:
#22D3EE22→ 34D3→ 211EE→ 238
So #22D3EE becomes rgb(34, 211, 238).
Common mistakes (and quick fixes)
Extra spaces at the start/end of a line
This variant does not trim lines.
If a line has extra whitespace, try removing it:
✅ #FF0055
🚫 #FF0055
Missing the #
Use standard CSS-style HEX with the leading #:
✅ #111827
🚫 111827
Invalid length
HEX should be either 3 or 6 hex digits (plus the #):
✅ #fff, #ffffff
🚫 #ffff, #fffffff
Non-hex characters
HEX digits must be 0–9 or A–F:
✅ #12ABEF
🚫 #12ABEG
Practical uses
- Turn design tokens into RGB for color math and generation
- Use rgb(…) in code when building gradients, animations, or UI states
- Convert documentation palettes from HEX into a more readable numeric format
- Work with canvas / image tools that expect RGB channel values
If you’re doing anything programmatic with color, RGB is often the easiest format to manipulate—then you can always convert back to HEX for final tokens and CSS.
