HEX Opacity Calculator

Developer

Why Use the HEX Opacity Calculator?

Adding transparency to a HEX code means appending two extra hex digits, and this HEX opacity calculator works them out for you from a simple percentage slider. Set a base color and an opacity, and you get the 8-digit #RRGGBBAA code plus matching rgba() and hsla() values, previewed over a checkerboard so you can see exactly how see-through the result is. A reference table of alpha suffixes from 100% down to 0% in 10% steps sits alongside for quick lookups.

How to Use the HEX Opacity Calculator

1. Enter the base color with the picker or type a HEX, rgb(), hsl() or CSS color name value into the text box.
2. Drag the opacity slider between 0% and 100% and watch the checkerboard preview show through as the color becomes more transparent.
3. Click Copy next to the 8-digit HEX, rgba() or hsla() output, depending on which format your project uses.
4. Use the alpha suffix table to find the two-digit code for common values such as 80% or 50% and add it to any other six-digit HEX code.

Best For

• Creating a semi-transparent dark overlay so white headline text stays readable on top of a hero photo.
• Defining hover and pressed background tints for buttons and list rows from a single brand color.
• Translating an opacity value from a design file into an 8-digit HEX code a developer can paste into CSS.
• Building subtle tinted borders, dividers and focus rings that blend with whatever background sits behind them.

Pro Tip

When you only want a background to be see-through, use an alpha color like rgba() or 8-digit HEX on that background instead of the CSS opacity property. The opacity property fades the whole element, including its text, icons and child elements, while an alpha color affects only that one paint layer. For HTML email, prefer rgba() or a solid fallback color, because support for 8-digit HEX varies across email clients.