Hex to RGBA Color Converter
Convert a CSS hex color (#rrggbb or #rgb) to an RGBA value with a custom alpha channel. Free, instant.
How to use this tool
- Enter your hex color code (e.g. #3a86ff or #f0f).
- Set the alpha value between 0 (invisible) and 1 (opaque).
- Copy the rgba() result into your CSS.
Convert a CSS hex color to rgba() with a custom alpha (opacity) value. Useful when you need semi-transparent colors in CSS.
Formula
Given a hex color #rrggbb:
R = parseInt(rr, 16) G = parseInt(gg, 16) B = parseInt(bb, 16)
Alpha (a) = clamp(input, 0, 1), rounded to 2 decimal places
Result: rgba(R, G, B, a)
Short 3-digit hex #rgb is expanded to #rrggbb by doubling each digit before parsing.
How it works
Strip the leading # from the hex string. If the result is 3 characters long, double each character to produce a 6-character string (e.g., #f00 → #ff0000). Then parse the first two hex characters as the red channel, the next two as green, and the last two as blue — each yielding an integer 0–255. The alpha value is clamped to the range 0–1 and rounded to two decimal places, then assembled into a CSS rgba() string.
Common mistake: Entering an alpha value greater than 1 (e.g., 50 to mean 50%) is a common error. The alpha channel in CSS rgba() expects a value between 0 and 1, not 0 and 100 — 0.5 means 50% opacity, not 50.
Worked example
Convert #ff0000 with 50% opacity to an RGBA value
- Input hex: #ff0000, alpha: 0.5.
- Parse channels: R = parseInt('ff', 16) = 255, G = parseInt('00', 16) = 0, B = parseInt('00', 16) = 0.
- Clamp and round alpha: clamp(0.5, 0, 1) = 0.5.
- Assemble: rgba(255, 0, 0, 0.5)
rgba(255, 0, 0, 0.5) — pure red at 50% opacity.
Common mistakes to avoid
- Entering an alpha value as a percentage (e.g. 50) instead of a decimal (0.50) -- the alpha channel in RGBA is 0 to 1, not 0 to 100.
- Omitting the leading # symbol or entering a 3-digit shorthand without realizing it is expanded (e.g. #abc becomes #aabbcc, not #abc000).
- Pasting an 8-digit hex color (with alpha byte at the end, like #rrggbbaa) and expecting the extra two digits to set alpha -- only the first 6 are used in standard RGB-to-RGBA conversion.
Key terms
- Hex color (#rrggbb)
- A CSS color notation where rr, gg, and bb are two-digit hexadecimal values (00–ff) representing red, green, and blue channel intensities.
- RGBA
- A CSS color function — rgba(red, green, blue, alpha) — specifying color channels as integers 0–255 and opacity as a decimal 0–1.
- Alpha channel
- A value from 0 (fully transparent) to 1 (fully opaque) that controls how much of the background shows through a color.
- Short hex (#rgb)
- A 3-character CSS hex shorthand where each digit is implicitly doubled: #rgb expands to #rrggbb (e.g., #f00 = #ff0000).
Frequently asked questions
- What is RGBA?
- RGBA is like RGB but with a fourth channel — alpha — that controls opacity. 0 is fully transparent, 1 is fully opaque.
- Can I use 3-digit hex codes?
- Yes. #abc is automatically expanded to #aabbcc before conversion.