FileKiln

HEX to RGB Converter

Convert HEX colors to RGB and back, with alpha support and a live swatch. Accepts #abc, #aabbcc, #aabbccdd, and rgb()/rgba() input. In-browser.

Ready when you arehex ⇄ rgb
Runs on your computer. Nothing gets uploaded.

Your stuff stays yours. The conversion happens in this page's JavaScript. Nothing you paste here leaves your machine, and the tool keeps working with the network unplugged.

Accepts every common CSS color spelling: three-digit shorthand like #abc, six-digit hex, eight-digit hex with alpha, and rgb()/rgba() functions. Output shows the value in each notation and paints a live swatch so you can confirm it is the color you meant before it lands in a stylesheet.

How to convert a color

  1. Type or paste one color into the Color in box. Hex values work with or without the leading # and in any letter case, and rgb() or rgba() values work with commas between the numbers.
  2. Press Convert.
  3. Read the Conversions out box. You always get HEX, RGB, and CSS lines. An RGBA line is added only when the color is not fully opaque.
  4. Check the swatch under the output. It is painted with the exact red, green, blue, and alpha values the tool parsed.
  5. Copy the line you need, or use Copy result to take all of them.

How hex and RGB describe the same color

Screens mix red, green, and blue light, and CSS stores each channel as a whole number from 0 to 255. That range is exactly one byte, which is why hex notation works so well: two hexadecimal digits cover 00 to ff, which is 0 to 255 in decimal. The first digit counts sixteens and the second counts ones, so 6f is 6 × 16 + 15 = 111, a7 is 167, and cc is 204. The color #6fa7cc is therefore rgb(111, 167, 204).

Alpha, the opacity channel, is stored differently in the two notations. In rgba() it is a decimal from 0 (invisible) to 1 (solid). In eight-digit hex it is a fourth byte from 00 to ff, so the tool divides by 255. That conversion is rarely a round number. 80 is 128, and 128 ÷ 255 is 0.50196, which the RGBA line rounds to two decimal places. Going the other way, an alpha of 0.5 becomes 127.5, which rounds to 128, or 80.

Shorthand doubles each digit. Three digits (#abc) expand to six (#aabbcc), and four digits (#abcd) expand to eight, with dd as alpha. The CSS Color specification defines the byte order as red, green, blue, then alpha.

A worked example

Enter #6fa7cc80 and press Convert. The output is:

HEX:   #6fa7cc80
RGB:   rgb(111, 167, 204)
RGBA:  rgba(111, 167, 204, 0.5)
CSS:   #6fa7cc (with alpha)

Entering rgba(111, 167, 204, 0.5) produces the same four lines, because 0.5 maps back to 80. Now try shorthand with alpha, #abcd:

HEX:   #aabbccdd
RGB:   rgb(170, 187, 204)
RGBA:  rgba(170, 187, 204, 0.87)
CSS:   #aabbcc (with alpha)

Here dd is 221, and 221 ÷ 255 rounds to 0.87. If you paste 0.87 back in, 0.87 × 255 is 221.85, which rounds to 222, or de. That one-step drift is too small to see, but it explains why a hex value can change slightly after a trip through a decimal alpha.

Common problems and fixes

The CSS line lost the transparency

For translucent colors, the CSS line shows the six-digit color followed by the note (with alpha). The six-digit value on its own is fully opaque. If you want the transparency in your stylesheet, copy the eight-digit value from the HEX line or the full RGBA line instead.

"Unrecognized color" for a value that works in your browser

The tool reads comma-separated whole numbers only. Modern CSS also allows rgb(111 167 204 / 50%), percentages, hsl(), and names like steelblue, and none of those are parsed here. Rewrite the value as rgba(111, 167, 204, 0.5) or as hex.

"RGB channels max out at 255 and alpha at 1."

A channel above 255 or an alpha above 1 is rejected. This often happens when an alpha is written as a percentage number such as 50. Use the 0 to 1 scale.

An Android color comes out wrong

Android color resources and many design tools that export for Android write eight-digit hex as #AARRGGBB, with alpha first. CSS expects alpha last. Move the first two digits to the end before converting: #806fa7cc becomes #6fa7cc80.

The swatch looks different from your design

A translucent swatch blends with the page behind it, so the same value looks lighter on a light theme and darker on a dark one. Judge translucent colors against the background they will actually sit on.

Related tasks

To convert other hexadecimal values to decimal or binary, use the number base converter.

Questions this tool gets asked

Does it support alpha (transparency)?

Yes. Eight-digit hex like #6fa7cc80 and rgba() input both work, and the alpha value is carried through to every output notation.

What is #abc shorthand?

Three-digit hex doubles each digit, so #abc means #aabbcc. The converter expands it the same way browsers do.

Why a swatch?

A rendered color check catches transposed digits instantly, which numbers alone rarely do.

Related tools