Why is fifty percent alpha 0x80 instead of 0x50?

The final hex pair counts transparency in the same zero-to-255 range as the colour channels. Half of 255 rounds to 128, which is 0x80; 0x50 would be about thirty-one percent.

Which of the two strings should I store as a token?

Store whichever your tooling reads back more reliably — usually the 8-digit hex in a token file and the rgba string in component code — and note the other beside it so the two are never edited apart.

Why does the swatch show a checkerboard?

Because a checkerboard is the standard way to reveal transparency. Without it, a translucent colour on a white card looks exactly like a lighter opaque colour, and the alpha is invisible.

Can I start from a colour that already has transparency?

No. The field normalises what you enter to six-digit hex, so the base is always opaque and the slider is the only source of alpha.

Does alpha change the colour itself?

The six-digit base colour is unchanged; alpha only decides how much of the surface behind shows through. That is why the same translucent value reads differently on a light and a dark page.

Alpha Color Generator

Color

Alpha: 50%

Result

rgbargba(59, 130, 246, 0.50)

hex8#3B82F680

You Might Also Need

Color Overlay Generator

Generate CSS color overlays with blend modes

CSS Color Formatter

Format any color into a CSS-ready string

The alpha color generator pairs a colour with an opacity percentage and prints both spellings of the result — an rgba() function and an 8-digit hex value — over a checkerboard that makes the transparency visible.

What is Alpha Color Generator?

Transparency is written two ways in CSS, and the alpha color generator produces both from a single control. Set a colour, drag the alpha slider, and the result panel shows a checkerboard preview with two copy rows beneath it: an rgba color generator value such as rgba(59, 130, 246, 0.50), and the matching 8-digit hex value, #3B82F680, for the same colour at the same half opacity.

rgba — decimal channels with the alpha as a two-decimal fraction, the form most stylesheets, templates and older linters expect.
hex8 — the same colour with its transparency byte appended, which is the color with transparency written as one string and the form design tokens and CSS variables usually prefer.
The preview composites the value over a twenty-pixel checkerboard tile of four grey and white quadrants, which is the only honest way to show alpha: a translucent colour painted on plain white is indistinguishable from a lighter opaque one.

The two outputs are computed differently, and that explains the last digit. The rgba string divides the slider by one hundred and prints two decimals; the hex value multiplies the same percentage by 255, rounds it, and appends the result as a byte. That is why fifty percent is 0x80 rather than 0x50 — the transparency channel counts in the same zero-to-255 range as the colour channels, not in percentages — and why the two strings describe the same intent with slightly different numbers: 0.50 against 128/255, which is 0.5020.

A practical use is building a tint scale from one brand colour. Instead of defining faint, medium and strong variants by hand, generate the steps from the same base so the family stays mathematically consistent and a later brand change updates the whole ladder by moving one value. The catch is that every variant built this way inherits whatever surface it is painted on, which is why such a scale should be reviewed on the darkest and the lightest background it will meet rather than on the checkerboard alone.

The slider moves in whole percents, so alpha arrives in 101 steps and the rgba string always lands on two decimals.
The two notations do not map onto each other exactly. Pick one as the token and note the other beside it rather than treating the strings as interchangeable.
The base colour is always opaque. The field normalises input to six-digit hex, so a translucent value cannot be used as the starting point.
The preview composites over a checkerboard rather than over the surface the colour will actually sit on, so the final appearance still depends on whatever is behind it in the page.

Use it for overlays, scrims, focus rings, hairlines and layered surfaces, where the colour is meant to composite with what is behind it. Where the value has to stay identical no matter what it is painted on, generate an opaque variation instead — alpha follows its backdrop, a lightened or darkened colour does not. When the alpha is already known and only the flattened result matters, the opacity calculator composites it against a real background and hands back the solid equivalent, which is also the value to quote when a downstream tool cannot render transparency at all.

How to use Alpha Color Generator

Set the base colour with the field at the top of the page.
Drag the alpha slider to the opacity you want; the percentage is shown beside it.
Watch the checkerboard preview for how much of the surface will show through.
Copy the rgba row for functional syntax, or the hex8 row when the value has to be a single token.

When to use Alpha Color Generator vs related tools

Use this when a colour has to composite with what is behind it — overlays, scrims, borders and layered surfaces. The opacity calculator answers the opposite question by flattening a translucent value into the solid colour it produces, the overlay generator applies alpha over a real image, the CSS color formatter covers the opaque notations, and the color-on-background preview shows how a finished value reads on a chosen surface.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.