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.

to
ADVERTISEMENT

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 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.

HEX vs RGB – comparison

FeatureHEXRGB
Format#RRGGBBrgb(R, G, B)
Values00–FF (hex)0–255 (decimal)
Opacity8-digit (#RRGGBBAA)rgba(R, G, B, A)
Shorthand#RGB (3 digits)No shorthand
Used inCSS, design toolsCSS, programming
ADVERTISEMENT

How to use the converter?

  1. 1. Enter a value

    Type a number in the input field. You can use a period or comma as the decimal separator.

  2. 2. Read the result

    The conversion result appears instantly in the field next to it – no clicking required.

  3. 3. Copy or reverse

    Click Copy result or use the Reverse button to convert in the opposite direction.

When is this converter useful?

  1. JavaScript & Canvas API

    Canvas fillStyle and color blending functions require numeric R, G, B — convert Figma HEX exports in one step.

  2. React & CSS-in-JS

    styled-components and Emotion need decimal channel values for dynamic opacity: rgba(${r}, ${g}, ${b}, 0.5).

  3. WCAG accessibility audits

    Contrast ratio formulas use relative luminance — which is derived from RGB decimal values, not HEX strings.

  4. Brand color documentation

    Document Stripe, Shopify, or GitHub brand colors in both HEX and RGB for design system tokens and developer handoff.

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

Explore other unit converters

pt to pxpx to ptrem to pxpx to remem to pxpx to emcm to pxpx to cmmm to pxpx to mmcm to inchesinches to cmmm to inchesinches to mmmiles to kmkm to milesmeters to feetfeet to metersinches to feetfeet to incheslb to ozoz to lbml to ozoz to mlliters to gallonsgallons to literskg to lblb to kgkg to gg to kgkg to stonestone to kginches to pxpx to inchesfeet to pxpx to feetpica to pxpx to picameters to pxpx to metersRGB to CMYKbytes to KBKB to bytesKB to MBMB to KBMB to GBGB to MBKB to GBGB to KBGB to TBTB to GBKB to TBTB to KBUnix to dateDEC to BINDEC to HEXMbps to MB/s

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.

HEX to RGB – Arteon

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.