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.
50%
HEX
#3a86ff80RGBA
rgba(58, 134, 255, 0.5)Alpha
50%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
- Pick a color and adjust the opacity slider.
- Use quick presets for common opacity values.
- 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.