Skip to content
ChromaBrew

Alpha channel tool

Add transparency to any color. Get HEX8, RGBA and percentage opacity values with a live preview on white, gray and black backgrounds. Free, instant, browser-only.

Add transparency to any color and get the HEX8, RGBA and percentage opacity values at once, previewed on white, gray and black backgrounds. HEX8 extends a hex code with two alpha digits.

Preview on multiple backgrounds catches contrast problems before they ship, because transparency reads differently depending on what sits beneath it.

50%
HEX#3a86ff80
RGBArgba(58, 134, 255, 0.5)
Alpha50%

Quick presets

Preview on common backgrounds

Want the full design system from a color? Open the color palette generator to create accessible palettes, semantic tokens, light and dark themes, and production-ready CSS — all from a single color.

How to use this tool

  1. Pick a color and adjust the opacity slider.
  2. Use quick presets for common opacity values.
  3. Copy the HEX8 or RGBA value.

Frequently asked questions

What is HEX8?
HEX8 is an 8-digit hex code where the last two digits represent alpha (transparency). For example, #3a86ff80 is blue at 50% opacity.
How do I parse HEX8 back to a color?
The first 6 digits are the color, the last 2 are the alpha channel in hex. #ff000080 = red at 50% opacity (0x80 = 128, 128/255 ≈ 50%).
Why preview on multiple backgrounds?
Transparency looks different depending on what's behind it. Previewing on white, gray and black helps you catch contrast issues before shipping.

Related tools

Related guides

Alpha channel tool runs entirely in your browser — nothing you enter is sent to a server.