utilyfe

Hex to RGB Converter

Paste a hex code and get RGB, RGBA and HSL values ready to copy, transparency included.

Runs entirely in your browser. Nothing you enter is uploaded or stored.

RGB
rgb(255, 87, 51)
RGBA
rgba(255, 87, 51, 1)
HSL
hsl(11, 100%, 60%)
HSLA
hsla(11, 100%, 60%, 1)
Modern CSS
rgb(255 87 51)
Also try:RGB to Hex ConverterColor Contrast Checker

How to use the Hex to RGB Converter

  1. 1Type or paste a hex code: the # is optional, and 3, 4, 6 and 8-digit codes all work.
  2. 2Or click the colour box on the left to pick a colour instead.
  3. 3Read the RGB, RGBA, HSL and HSLA values, plus the modern space-separated form.
  4. 4Press Copy next to the one you need.

What a hex colour code is

A hex colour is a compact way of writing three numbers (how much red, green and blue to mix) in base 16. Each channel takes two digits, so a full code has six: two for red, two for green, two for blue. Base 16 counts 0–9 and then a–f, which means two digits can express 256 different values, 0 to 255: exactly the range an RGB channel uses. That’s why #ff5733 and rgb(255, 87, 51) describe the very same orange: one writes the numbers in base 16, the other in ordinary decimal.

Converting by hand

Take #ff5733 and split it into ff, 57 and 33. For each pair, multiply the first digit by 16 and add the second, remembering that a–f stand for 10–15. So ff is 15 × 16 + 15 = 255, 57 is 5 × 16 + 7 = 87, and 33 is 3 × 16 + 3 = 51. Put them together and you have rgb(255, 87, 51). Three-digit shorthand is expanded first by doubling each digit: #f53 becomes #ff5533, then converts the same way. It only works when both digits of every pair match, which is why not every colour has a shorthand.

Transparency in hex codes

Add a fourth pair and the code carries opacity. #ff573380 is #ff5733 with an alpha of 80, and the four-digit shorthand #f538 works the same way. Alpha is stored in the same 0–255 range as the colour channels, so it converts to the 0–1 decimal CSS uses by dividing by 255. A few values are worth knowing: ff is fully solid, cc is 80%, bf is 75%, 40 is 25% and 00 is invisible. 50% sits between 7f and 80, because half of 255 isn’t a whole number: this tool reads 80 as 0.502. One warning for anyone moving between platforms: CSS puts alpha last, while Android writes it first as #AARRGGBB, so the same digits can mean different colours.

Choosing which format to use

All the outputs are the same colour; they differ in what’s convenient. rgb() and rgba() are the classic forms and work everywhere. HSL describes a colour as hue, saturation and lightness, which makes it the easiest to adjust by hand: nudging the lightness up gives a lighter shade of the same colour, something hex and RGB make awkward. The modern form, rgb(255 87 51 / 0.5), drops the commas and puts alpha after a slash. It’s the one to reach for when a colour is stored in a CSS variable, because the three numbers can live in the variable and the opacity can change wherever it’s used.

Rounding and precision

Hex and RGB are exact: whole numbers from 0 to 255. HSL isn’t, because its natural values are fractional, and the tool shows them rounded to whole numbers as they’re usually written. Converting an HSL value back to RGB can therefore land a step away from the colour you started with. For alpha, the tool shows up to three decimals, which is enough to return to the same 0–255 step every time. If you’re matching a colour exactly, copy the RGB or hex value rather than the HSL one.

Converted on your device

There’s no server behind this converter. The conversion is a few lines of arithmetic that run in your browser as you type, so nothing you enter is sent, stored or logged anywhere.

Questions

How do I convert hex to RGB by hand?
Split the six digits into three pairs (red, green, blue) and convert each pair from base 16 to a normal number. For #ff5733: ff is 15×16 + 15 = 255, 57 is 5×16 + 7 = 87, and 33 is 3×16 + 3 = 51, so the colour is rgb(255, 87, 51). A 3-digit code is shorthand: each digit is doubled first, so #f53 means #ff5533.
What's the difference between rgb() and rgba()?
rgba() takes a fourth value, alpha, that sets how see-through the colour is: 1 is fully solid and 0 is invisible. rgb() has no alpha, so it's always solid. Current browsers also accept alpha inside rgb() itself, using the modern form, so the two are interchangeable in new code.
What do 4-digit and 8-digit hex codes mean?
They add transparency. The last digit of a 4-digit code, or the last pair of an 8-digit code, is alpha: #ff573380 is the colour #ff5733 at about half opacity. In CSS the alpha comes last, after the three colour channels.
Why does 50% opacity show as 0.502 and not 0.5?
Hex can only store alpha in 256 steps, from 00 to ff. Half of 255 is 127.5, which isn't a whole step, so the nearest code is 80, which is 128 out of 255: 0.502. The tool shows that exact value, and writing 0.502 back into CSS gives you the same step again.
Do I need the #, and does upper or lower case matter?
Neither. ff5733, #FF5733 and #ff5733 are the same colour, and the tool reads all of them. You only need the # when you paste the code into CSS.
What is the Modern CSS row?
It's the same colour written with spaces instead of commas, with alpha after a slash: rgb(255 87 51 / 0.5). Every current browser understands it. It's the form that lets you keep a colour's three numbers in a CSS variable and set the opacity separately, like rgb(var(--brand) / 0.5).
Why doesn't the HSL value convert back to exactly the same hex?
HSL is shown with whole-number hue, saturation and lightness, the way it's normally written. Rounding those numbers throws away a little precision, so turning them back into RGB can land a step or two away from the original. If you need the exact colour, use the RGB or hex value: they're exact.
My colour looks wrong in an Android or iOS project. Why?
Android writes hex colours with alpha first (#AARRGGBB) where CSS puts it last as #RRGGBBAA. The same eight digits mean different colours in each. If a translucent colour looks wrong after moving between the two, that's the first thing to check.
Is my colour sent anywhere?
No. The conversion is a few lines of arithmetic that run inside this browser tab. Nothing is uploaded, logged or stored.