HEX ↔ RGB Color Converter
HEX and RGB are two common ways to encode the same screen color. This converter works both ways: HEX → RGB and RGB → HEX.
Enter #RRGGBB or R, G, B channels (0–255), click Calculate, and copy CSS-ready output.
Results
Enter a color, choose the direction, and click Calculate.
What is HEX and RGB color coding?
RGB is an additive color model used on screens. A color is mixed from three light channels: red (R), green (G), and blue (B). Higher channel values mean stronger light in that channel.
In typical CSS notation each channel is an integer from 0 to 255 (8 bits per channel). Zero means no light in that channel; 255 means full intensity.
rgb(255, 0, 0)— redrgb(0, 255, 0)— greenrgb(0, 0, 255)— bluergb(0, 0, 0)— black (no light)rgb(255, 255, 255)— white (all channels full)
HEX is another notation for the same values. Instead of three decimal numbers you use a hexadecimal string in the form #RRGGBB:
RR— redGG— greenBB— blue
Each pair is one 0–255 number written in hex (digits 0–9 and letters A–F). So #FF0000 is the same color as rgb(255, 0, 0).
How do I convert HEX to RGB?
Manual HEX → RGB conversion works like this:
- Remove the leading
#if present (e.g.#4CAF50→4CAF50). - Split the six characters into three pairs:
RR,GG,BB. - Convert each pair from hexadecimal to decimal.
- Write the result as
rgb(r, g, b).
A useful rule for one hex pair:
decimal value = 16 × first digit + second digit
Where A=10, B=11, C=12, D=13, E=14, F=15. Example: 4C → 16 × 4 + 12 = 76.
The other way (RGB → HEX): convert each 0–255 channel to a two-digit hex value and join them as #RRGGBB. This calculator performs both directions when you click Calculate.
Example of converting HEX to RGB
Take the color #4CAF50.
| Step | Value | Calculation |
|---|---|---|
| Input | #4CAF50 | drop # → 4CAF50 |
| Split | 4C · AF · 50 | RR · GG · BB |
| R | 4C | 16 × 4 + 12 = 76 |
| G | AF | 16 × 10 + 15 = 175 |
| B | 50 | 16 × 5 + 0 = 80 |
| Result | rgb(76, 175, 80) | |
The reverse is the same values: 76, 175, 80 → #4CAF50.
How to use this HEX ↔ RGB color converter
- Choose the direction with Convert from: — HEX or RGB.
- If HEX is the source, enter a color (
#RRGGBB,RRGGBB, or shorthand#RGB). The R, G, B fields are then read-only outputs. - If RGB is the source, enter three integers from 0 to 255. The HEX field is then read-only.
- Click Calculate. Results appear only after submit — there is no live recalculation while typing.
- In the results panel you get normalized HEX (uppercase with
#),rgb(r, g, b), separate channels, a color preview, a CSS snippet, and Copy buttons.
Switching the source clears the previous result — click Calculate again after changing direction.
What is HEX shorthand notation?
Shorthand #RGB works only when both digits of each full pair are identical. Then one character per channel is enough:
#FFF=#FFFFFF(white)#000=#000000(black)#F00=#FF0000(red)
Expansion duplicates each character: F → FF, 0 → 00.
This calculator accepts HEX shorthand and expands it to full #RRGGBB before conversion. When you enter shorthand, the results area also shows a short expansion note.
Manual conversion cheat sheet
- HEX → RGB: drop
#→ three pairs → each pair to decimal →rgb(r, g, b) - RGB → HEX: each channel to 2-digit hex → join → add
# - Hex digits: 0–9, A=10 … F=15
- Pair formula:
16 × first + second
Common colors — HEX and RGB
| Color | HEX | RGB |
|---|---|---|
| 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) |
| Material green | #4CAF50 | rgb(76, 175, 80) |
FAQ — practical examples
- What is the difference between HEX and RGB?
- Both represent the same screen color in different formats. HEX uses hexadecimal notation, for example
#FF5733. RGB uses decimal red/green/blue channels from 0 to 255, for examplergb(255, 87, 51). This converter switches between those representations: choose HEX or RGB as the source, then click Calculate. - How do you convert HEX to RGB?
- Split the HEX code into red, green, and blue pairs, then convert each hexadecimal pair to decimal. Example:
#FF5733→FF,57,33→FF = 255,57 = 87,33 = 51→rgb(255, 87, 51). In the calculator, set source to HEX, enter the color, and click Calculate. - How do you convert RGB to HEX?
- Convert each 0–255 channel into a two-digit hexadecimal value and join them with a leading
#. Example:rgb(255, 87, 51)→255 = FF,87 = 57,51 = 33→#FF5733. Choose source RGB, enter R/G/B, click Calculate — output is normalized to uppercase. - Does HEX have to be uppercase?
- No. CSS HEX is case-insensitive, so
#00ff00and#00FF00are the same color. This calculator normalizes results to uppercase with a leading#for consistency and easier copy-paste. - Is shorthand HEX like #FFF valid?
- Yes. Shorthand HEX is valid CSS and expands by duplicating each character:
#FFF=#FFFFFF,#0F0=#00FF00. This calculator accepts shorthand and expands it to full#RRGGBBbefore conversion. - When should I use HEX vs RGB?
- HEX is common in design handoffs, tokens, and plain CSS — compact and easy to scan in stylesheets. RGB can feel more intuitive when you think in channels or work with function-based CSS/JS color syntax. Neither format is universally better; pick what fits the workflow.