Hex Opacity Generator

Add opacity to a hex colour

CSS supports an eight-digit hex notation where the last two digits set the opacity, or alpha, of a colour. This tool converts a six-digit hex colour and an opacity percentage into the corresponding eight-digit hex code and the equivalent rgba value. Pick a colour and an opacity of, say, fifty percent, and you get the eight-digit hex with the correct alpha pair and the matching rgba string, both ready to paste into your CSS.

The alpha byte ranges from 00 for fully transparent to FF for fully opaque, and the tool calculates it precisely from your percentage.

Transparency in CSS

Semi-transparent colours are everywhere in modern design: subtle overlays, shadows, hover tints and frosted panels all rely on them. Eight-digit hex keeps everything in one compact value, while rgba is the more traditional and widely supported form. Having both means you can use whichever your codebase prefers.

Remember that opacity on a colour affects only that colour, unlike the opacity property which fades an entire element and its contents. All conversion happens locally in your browser.

Notes on the generated code

Because the hex opacity generator runs entirely in your browser, you can experiment with every option and watch the generated code update instantly, with nothing uploaded and no account required. The output is clean, standards-based CSS that works in any project without external libraries or a build step, so you can paste it straight into your stylesheet and refine it further by hand whenever you need to.

Related tools

• Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
• Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
• Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
• Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.