HEX to RGB Converter

by

Paste a CSS HEX color to get its RGB values and copy-ready CSS text, including opacity when the code has alpha.

Did we solve your problem today?

How to use our HEX to RGB Converter

  1. Paste or type your color in the HEX code field, such as #1E90FF. The leading # is optional.
  2. Use 3, 4, 6, or 8 hexadecimal digits, using only 0-9 and A-F. Four-digit and eight-digit codes include alpha as the final digit or pair.
  3. Click Calculate and copy the RGB CSS color for an opaque color, or the RGBA CSS color when transparency is included.
  4. Use the red, green, and blue channel values when a code editor or design tool asks for separate values.
  5. Sanity-check the Expanded HEX code before copying: shorthand #3A7 should become #33AA77, and each color channel should be from 0 to 255.
Example inputs for HEX to RGB Converter
Example inputs for HEX to RGB Converter

Definitions

HEX code: A CSS color written with hexadecimal digits 0-9 and A-F, usually with a leading #, such as #1E90FF.

RGB: A color described by red, green, and blue channel values. Each channel is a whole number from 0 to 255.

Shorthand HEX: A 3-digit or 4-digit HEX code in which each digit is repeated. For example, #3A7 expands to #33AA77.

Alpha: The transparency part at the end of a 4-digit or 8-digit HEX code. Alpha 0 is fully transparent and alpha 1 is fully opaque.

RGBA: CSS color text containing red, green, blue, and alpha, such as rgba(255, 0, 0, 0.502).

Opacity: Alpha written as a percentage. 0% is fully transparent, while 100% is fully opaque.

Common mistakes and quick fixes

Mistake: Entering a code with 2, 5, or 7 digits.
Fix: Check HEX code and then recalculate. After the optional #, use exactly 3, 4, 6, or 8 hexadecimal digits.

Mistake: Including spaces, a color name, or CSS text such as rgb(255, 0, 0).
Fix: Check HEX code and then recalculate. Paste only the HEX token, such as #FF0000 or FF0000.

Mistake: Putting transparency at the start of an 8-digit code.
Fix: Check HEX code and then recalculate. Put alpha last. #FF000080 is red with about 50.2% opacity.

Mistake: Reading shorthand #3A7 as channel values 3, A, and 7.
Fix: Check HEX code and then recalculate. Repeat each shorthand digit. #3A7 expands to #33AA77.

Mistake: Treating alpha byte 128 as exactly 50% opacity.
Fix: Use the displayed Alpha or Opacity value. 128 out of 255 is about 0.502 alpha, or 50.2% opacity.

Mistake: Copying a prior RGB value after editing the HEX code.
Fix: Calculate again after every edit. The earlier conversion is cleared to prevent copying the wrong color.

Limitations & Key Assumptions / Boundary Conditions

  • The converter accepts only CSS-style HEX tokens with 3, 4, 6, or 8 hexadecimal digits and one optional leading #.
  • Spaces inside the token, color names, CSS variables, and functions such as rgb() or hsl() are not HEX codes and cannot be converted.
  • For 4-digit and 8-digit input, the final digit or pair is treated as alpha. Alpha-first formats are outside this converter's input rules.
  • RGB values are encoded CSS channel values. They do not guarantee the same appearance across screens, print, color profiles, or brightness settings.
  • A color with alpha can appear different over different backgrounds because the background shows through it.

Methodology

Read and expand the HEX code

The converter removes outside spaces and one optional leading #, then checks for 3, 4, 6, or 8 hexadecimal digits. Letters are converted to uppercase. In shorthand codes, each digit repeats: #3A78 becomes #33AA7788.

expanded HEX = repeat each digit for 3-digit or 4-digit input

Convert the color channels

The first three pairs in expanded HEX are red, green, and blue. Each pair is base 16, meaning the left digit is worth 16 times its value. For example, 1E is 1 times 16 plus 14, which equals 30.

channel value = 16 x first digit value + second digit value

For #1E90FF, the pairs are 1E, 90, and FF. They convert to 30, 144, and 255, so the RGB CSS color is rgb(30, 144, 255).

RGB CSS color = rgb(red channel, green channel, blue channel)

Convert alpha when present

A 4-digit or 8-digit code has alpha in its final expanded pair. The alpha byte is divided by 255 to get a value from 0 to 1, then multiplied by 100 for opacity. In #FF000080, 80 is 128 in decimal, so alpha is 128 divided by 255, or about 0.502. Opacity is about 50.2%.

alpha = alpha channel byte / 255

opacity percent = alpha x 100

RGBA CSS color = rgba(red channel, green channel, blue channel, alpha)