Hex RGBA

Live preview with transparency, as you type. Everything runs locally.

    Batch conversion

    Paste one value per line, or comma-separated. Free and unlimited — export straight to CSV.

    InputOutput

    Results will appear here.

    Adding a fourth channel for transparency

    Plain RGB and 6-digit hex describe a fully opaque color — there's no channel available to express partial transparency. RGBA extends the model with a fourth value, alpha, which controls how much of whatever is behind the color shows through: alpha 1 (or 100%) is fully opaque, alpha 0 is fully transparent (invisible), and anything in between blends the color with its background in proportion to the alpha value. The 8-digit hex form used on this page, #RRGGBBAA, is the hex equivalent — the same three color bytes as ordinary hex, plus a fourth byte for alpha, all packed into one string rather than written as four separate numbers.

    Why alpha is a byte in hex but a fraction in rgba()

    A point worth being precise about: the alpha byte in 8-digit hex is 0–255, exactly like the other three channels, while CSS's rgba() function traditionally expresses alpha as a decimal fraction from 0 to 1 (like 0.5 for 50% opacity), not 0–255. Converting between the two requires a scaling step — an alpha byte of 0x80 (128 in decimal) corresponds to roughly 0.5 in rgba()notation, since 128 is roughly half of 255. This tool handles that scaling automatically in both directions, but it's a common source of manual conversion errors when someone tries to eyeball the relationship between an alpha byte and a fractional alpha value.

    8-digit hex is a newer CSS feature

    Unlike 6-digit hex, which has been part of CSS since its earliest color specification, 8-digit hex with an alpha channel was only added in CSS Color Module Level 4, and browser support arrived considerably later than support for rgba(). Code that needs to support older browsers sometimes still uses rgba() for transparency specifically for that compatibility reason, even in a codebase that otherwise prefers hex for opaque colors. Modern evergreen browsers all support 8-digit hex now, so the choice today is largely a matter of house style rather than a compatibility constraint.

    A worked example

    Take #FF000080: the first six digits, FF0000, are pure red. The last two digits, 80, are the alpha byte — 128 in decimal, which is 128⁄255 ≈ 0.502, so this color renders as red at roughly 50% opacity: rgba(255, 0, 0, 0.5). Note that 80 isn't exactly half of FF (255) — 50% opacity as a clean fraction doesn't land on a round hex byte value, which is normal, since 255 doesn't divide evenly by 2. A handful of common opacity values (0%, 100%, and a few others) do land on exact hex bytes; most don't, and get rounded to the nearest representable byte.

    Where RGBA shows up in practice

    Semi-transparent overlays — a dark scrim behind a modal dialog, a subtle tint over an image, a translucent card background over a busy page — are the most common use of RGBA in web and app design. It's also useful for hover and disabled states, where a UI element's base color is kept the same but shown at reduced opacity to signal it's inactive, without needing a second, separately-defined color. Design tools like Figma and Sketch expose alpha as a percentage slider alongside the color picker for exactly this reason, and export colors with alpha in either 8-digit hex or rgba() form depending on the export target.

    When RGBA is the wrong tool

    Alpha describes transparency at the point a color is defined — it does not describe what that color will actually look like once rendered against a specific background, because that depends on what's behind it. If the goal is to know the final, flattened solid color that results from a specific semi-transparent color over a specific background, theColor Opacity Calculator performs that composite calculation directly, rather than just splitting an 8-digit hex value into its four component bytes.

    Similarly, alpha is not the same thing as a lighter or more muted version of a color — a semi-transparent red over a white background looks pink, but a fully opaque pink is a distinct, fixed color that doesn't change no matter what's behind it. If the goal is a genuinely lighter variant of a color rather than a transparency effect, the tint and shade calculator generates that directly as an opaque color.

    FAQ

    What is #FF000080 in RGBA?
    #FF000080 is rgba(255, 0, 0, 0.5) — the extra two hex digits (80) encode alpha, roughly 50% opacity.
    Why does this need an 8-digit hex instead of 6?
    Alpha needs its own byte. This is the CSS Color Level 4 #RRGGBBAA format — the plain Hex ↔ RGB tool covers 6-digit opaque colors.
    Can I convert a list of colors at once?
    Yes — use the batch converter below. Paste one value per line or comma-separated, and export the results as a CSV file.
    g then:h homeb basee encodingc colorp programming