/

HEX to RGB Converter

Processed Client Side

Paste a hexadecimal color — 3, 4, 6, or 8 digits — and instantly get its rgb() and rgba() values, with a live preview.

HEX value
Hex code
RGB output
rgb
RGBrgb(124, 92, 255)
R124
G92
B255

Bookmark this tool now — skip the search next time you need it.

About HEX to RGB converter

This tool runs entirely in your browser. Whatever you paste is processed on your own device and is never uploaded, logged, or sent to any server.

Paste a hexadecimal colour and get its rgb() and rgba() equivalents, along with the individual red, green, blue, and alpha channel values and a live swatch of the result. It accepts every hex form CSS allows — three digits, four digits with alpha, six digits, and eight digits with alpha — so #f80, #ff8800, and #ff8800cc all resolve correctly. When the colour includes an alpha channel the output switches to rgba() automatically. There is also a native colour picker, so you can go the other way: pick a colour visually and read off both the hex and the RGB values.

Key features

  • Accepts 3, 4, 6, and 8-digit hex, with or without the leading hash
  • Outputs rgb(), and switches to rgba() automatically when the colour carries an alpha channel
  • Individual R, G, B, and A channel values listed separately for when you need the numbers, not the string
  • Live colour swatch, rendered over a checkerboard when the colour is partly transparent
  • Built-in colour picker for choosing a colour visually and reading its hex and RGB values
  • Invalid input is flagged immediately rather than silently rendering black
  • One-click copy of the CSS-ready value
  • Runs entirely in your browser

How to use it

  1. Type or paste your hex colour into the input field.
  2. Read the rgb() or rgba() result, with the individual channel values listed below it.
  3. Check the swatch to confirm it is the colour you expected.
  4. Use the colour picker instead if you want to choose visually.
  5. Copy the CSS-ready value.

Tips & common mistakes

  • Shorthand hex simply doubles each digit: #f80 is exactly #ff8800. It is not an approximation, so use whichever form is more readable.
  • Eight-digit hex puts alpha last as two hex digits — #ff8800cc is about 80% opaque. Safari was the last holdout on support and has handled it for years now.
  • RGB values are what you need when interpolating colours in JavaScript or animating between them; hex is a string and cannot be averaged directly.
  • Alpha is a fraction from 0 to 1 in rgba() but two hex digits from 00 to ff in eight-digit hex. 80 in hex is 50% opacity, not 80%.
  • For a colour that needs to sit on an opaque background, prefer a solid hex over an alpha value — transparency composites differently over each background it lands on.
  • If you are picking colours for a design system, look at HSL or OKLCH instead: they let you hold hue steady and vary lightness predictably, which RGB does not.
  • Converting the other direction? RGB to HEX converter goes from `rgb()` back to a hex code.
  • Want the same color expressed in the perceptually uniform OKLCH space? Convert it with HEX to OKLCH converter.

Related tools

Browse all 19 Frontend / CSS tools

Frequently asked questions

9

Paste your hex code — 3, 4, 6, or 8 digits — or pick a color with the swatch. The tool instantly shows the rgb() or rgba() value plus each R, G, B channel.

Shorthand #RGB and #RGBA, plus full #RRGGBB and #RRGGBBAA, with or without the leading # symbol. Shorthand digits are doubled automatically.

An 8-digit hex includes an alpha channel, so the tool returns an rgba() value and shows the alpha as a 0–1 number alongside the R, G, and B channels.

The input is not a recognizable hex color. Make sure it only contains 0–9 and A–F and has 3, 4, 6, or 8 digits.

Yes, exactly. Shorthand doubles each digit, so #f80 is precisely #ff8800. It is not an approximation, so use whichever form reads better.

rgba takes a fraction from 0 to 1, while eight-digit hex takes two hex digits from 00 to ff. They are easy to confuse: 80 in hex is 50% opacity, not 80%.

Whenever you are interpolating or animating between colours in JavaScript. Hex is a string and cannot be averaged; RGB gives you three numbers you can compute with.

Prefer a solid colour when the element sits on a known opaque background, because a translucent colour composites differently over every background it lands on and will not match your design.

Usually not. HSL or OKLCH let you hold the hue steady and vary lightness predictably, which is what generating a consistent colour scale requires. RGB makes that awkward.