Hex Opacity Converter

How to use

1. 1Choose Opacity to hex to build an 8-digit hex from a color plus an opacity, or Hex alpha to opacity to read the percentage of an existing alpha byte.
2. 2In Opacity to hex, type or paste a 3 or 6 digit hex (or use the color picker), then drag the opacity slider or type the percentage directly. Quick percent presets cover 0, 10, 25, 50, 75, 80, and 100.
3. 3Copy the 8-digit hex, rgba(), rgb() with slash alpha, the Tailwind arbitrary class, or the alpha byte on its own using the Copy buttons.
4. 4In Hex alpha to opacity, paste an 8-digit hex, a short 4-digit #RGBA, or a bare 2-digit alpha byte like BF to see the matching percentage, decimal, and 0 to 255 value.
5. 5Use the reference table at the bottom to scan 5 percent steps and copy any hex alpha byte (or grab the whole table as CSV).

About this tool

Hex Opacity Converter answers the two questions designers and CSS authors look up all the time: what 8-digit hex value matches a given opacity, and what opacity does an existing hex alpha byte represent. In Opacity to hex mode you pick a 6-digit base color (with a native color picker, a sample swatch, or the input box), drag an opacity slider from 0 to 100 percent, and the tool emits the full 8-digit hex (#RRGGBBAA), the matching rgba() string, the modern CSS Color Level 4 slash-alpha syntax (rgb(R G B / 50%)), a Tailwind arbitrary value class like bg-[#3b82f680], and the alpha byte on its own (so you can append it to any other 6-digit hex without recalculating). The conversion uses the CSS standard rounding (255 times the fraction, rounded to nearest), so 50 percent maps to alpha byte 0x80 and 75 percent maps to 0xBF, matching what design tools like Figma and Sketch generate. In Hex alpha to opacity mode you paste an 8-digit hex, a short 4-digit #RGBA form, or just a 2-digit alpha byte like BF, and the tool reports the equivalent opacity percentage, decimal (0 to 1), and 0 to 255 byte value, plus the rebuilt 8-digit hex and rgba() string when a full color is supplied. A reference table at the bottom maps every 5 percent step from 0 to 100 to its 2-digit hex alpha, with an inline copy button per row and a Copy CSV button to grab the whole chart. A live preview swatch is rendered on a checkerboard background so you can see real transparency, not a blended dark color. Useful for building semi-transparent overlays, frosted glass cards, hover and disabled states, drop shadows tuned by opacity, design tokens that include an alpha layer, Tailwind arbitrary opacity classes, and anywhere you need to migrate between #RRGGBB plus opacity and #RRGGBBAA. The whole tool runs in your browser; nothing about the colors you check is sent anywhere.

Free to use. Works in your browser. No signup, no login.