1. Enter a value
Type a number in the input field. You can use a period or comma as the decimal separator.
Convert HEX to RGB – CSS and JavaScript color values
JavaScript canvas, styled-components, and React inline styles need RGB numbers — not hex strings. Get the exact R, G, B values in one step.
ADVERTISEMENT
ADVERTISEMENT
Loading tool editor...
When do you need to convert HEX to RGB?
Design tools like Figma, Sketch, and Adobe XD export colors as HEX codes. But the moment you move that color into JavaScript, you often need RGB. The HTML5 Canvas API uses ctx.fillStyle = 'rgb(255, 87, 51)' or requires separate R, G, B values when blending. React inline styles accept backgroundColor: 'rgb(59, 130, 246)' but not always HEX shorthand reliably across environments.
CSS-in-JS libraries like styled-components and Emotion let you build dynamic styles in JavaScript — and color manipulation functions like rgba(${r}, ${g}, ${b}, 0.5) require decimal channel values, not hex strings. Stripe's brand blue (#635BFF), Shopify's green (#96BF48), or GitHub's dark (#24292E) all need to be parsed to RGB before you can programmatically adjust opacity or mix colors.
Chrome DevTools color picker shows both HEX and RGB — knowing how to read both speeds up debugging. WCAG contrast ratio calculations also require RGB luminance, making this conversion a routine step in accessibility audits.
All calculations run locally in your browser — nothing is sent to any server.
How to use the converter?
2. Read the result
The conversion result appears instantly in the field next to it – no clicking required.3. Copy or reverse
Click Copy result or use the Reverse button to convert in the opposite direction.
When is this converter useful?
JavaScript & Canvas API
CanvasfillStyleand color blending functions require numeric R, G, B — convert Figma HEX exports in one step.React & CSS-in-JS
styled-components and Emotion need decimal channel values for dynamic opacity:rgba(${r}, ${g}, ${b}, 0.5).WCAG accessibility audits
Contrast ratio formulas use relative luminance — which is derived from RGB decimal values, not HEX strings.Brand color documentation
Document Stripe, Shopify, or GitHub brand colors in both HEX and RGB for design system tokens and developer handoff.
What makes this converter different?
Complete privacy
All calculations run locally in your browser. No data is sent to any server.Real-time results
The result updates instantly as you type – no need to click any button.Bidirectional conversion
The Reverse button lets you convert in both directions with one click.Reference table
A ready-made table with commonly converted values and contextual descriptions.
How does HEX to RGB conversion work?
HEX uses base-16: each pair of digits (00–FF) converts to decimal 0–255. #FF5733: FF=255 (red), 57=87 (green), 33=51 (blue).
Shorthand HEX: #F53 expands to #FF5533. Each digit is doubled.
To convert RGB to HEX: convert each decimal channel to 2-digit hexadecimal. rgb(255, 87, 51) → FF, 57, 33 → #FF5733.
Practical tips
- #000000 = rgb(0,0,0) = black. #FFFFFF = rgb(255,255,255) = white.
- #FF0000 = pure red. #00FF00 = pure green. #0000FF = pure blue.
- For opacity: use rgba(255, 87, 51, 0.5) — HEX doesn't natively support alpha (except 8-digit HEX: #FF573380).
- CSS supports both: color: #FF5733 and color: rgb(255, 87, 51) are identical.
ADVERTISEMENT
HEX vs RGB – comparison
| Feature | HEX | RGB |
|---|---|---|
| Format | #RRGGBB | rgb(R, G, B) |
| Values | 00–FF (hex) | 0–255 (decimal) |
| Opacity | 8-digit (#RRGGBBAA) | rgba(R, G, B, A) |
| Shorthand | #RGB (3 digits) | No shorthand |
| Used in | CSS, design tools | CSS, programming |
HEX
- Format
#RRGGBB - Values
00–FF (hex) - Opacity
8-digit (#RRGGBBAA) - Shorthand
#RGB (3 digits) - Used in
CSS, design tools
RGB
- Format
rgb(R, G, B) - Values
0–255 (decimal) - Opacity
rgba(R, G, B, A) - Shorthand
No shorthand - Used in
CSS, programming
Explore other unit converters
Frequently asked questions
How do I convert HEX to RGB manually?
Split the HEX code into three pairs and convert each from base-16 to decimal. #FF5733: FF=255 (red), 57=87 (green), 33=51 (blue) → rgb(255, 87, 51). Each pair ranges from 00 (0) to FF (255).
How do I use RGB values in JavaScript canvas?
Use ctx.fillStyle = 'rgb(255, 87, 51)' or template literal syntax: ctx.fillStyle = `rgb(${r}, ${g}, ${b})`. The Canvas API accepts both rgb() strings and rgba() for transparency. Convert your design's HEX exports to RGB before passing them to canvas functions.
How do I add opacity to a HEX color?
Use CSS rgba(): rgba(255, 87, 51, 0.5) for 50% opacity. Alternatively, use 8-digit HEX: #FF573380 where 80 is hex for 128 (≈50% opacity). In CSS variables: --brand-alpha: rgba(255, 87, 51, 0.15) is a common pattern for overlay states.
What is shorthand HEX and when does it work?
3-digit HEX doubles each digit: #F53 expands to #FF5533. It only applies when each channel pair has identical digits (#RRGGBB where R0=R1, G0=G1, B0=B1). Tailwind's slate-900 (#0F172A) cannot be shortened; white (#FFFFFF) becomes #FFF.
Why does Chrome DevTools show both HEX and RGB?
Chrome DevTools color picker lets you toggle between HEX, RGB, HSL, and HWB. RGB is displayed as a cross-reference — useful when JavaScript code needs numeric channels or when debugging CSS-in-JS computed styles that output rgb() values.
What is #000000 and #FFFFFF in RGB?
#000000 = rgb(0, 0, 0) = pure black. All channels at minimum. #FFFFFF = rgb(255, 255, 255) = pure white. All channels at maximum. These are useful anchor points when building tonal scales or testing contrast.
Are my color codes sent to a server?
No. All HEX to RGB conversions run entirely in your browser. Nothing is transmitted to any server. The tool works offline once the page has loaded.
Help us improve our tools
Have an idea, found a bug, or want to suggest a feature? Drop us a message – we respond within 24 hours.