TailwindreadyTailwindready
Free tool

Hex Opacity Calculator

Choose a color and an opacity to get the 8 digit hex code, an rgba() value and the Tailwind class. The chart below lists every 5% step.

8 digit hex (RRGGBBAA)
#0e749080
RGBA
rgba(14, 116, 144, 0.5)
Tailwind class
bg-cyan-700/50
Exact color as an arbitrary value
bg-[#0e7490]/50
Opacity to hex alpha

Frequently asked questions

How do I add opacity to a hex color?

Append two hex digits for the alpha channel. Convert the opacity to a value out of 255 and then to hex: 50% is 127.5, rounded to 128, which is 80 in hex, so #0e7490 becomes #0e749080.

What is the hex code for 50% opacity?

80. Common ones are FF for 100%, E6 for 90%, CC for 80%, B3 for 70%, 99 for 60%, 80 for 50%, 66 for 40%, 4D for 30%, 33 for 20%, 1A for 10% and 00 for fully transparent.

How do I set background opacity in Tailwind CSS?

Use the slash syntax on the color: bg-cyan-700/50 or bg-black/20. It works on text, border, ring and shadow colors too, and with arbitrary colors like bg-[#0e7490]/50.

Does opacity-50 do the same thing?

No. opacity-50 fades the whole element, including its text and children. A color with alpha, like bg-black/50, only makes that one background translucent.

Guides that go with this tool

More free Tailwind CSS tools

CSS to Tailwind converterPaste CSS and get Tailwind v4 utility classes back.Box shadow generatorLayer shadows visually and copy the Tailwind class.Color palette generatorA full 50–950 shade scale and color combinations from any base color.Gradient generatorBuild a gradient and copy ready-to-use Tailwind classes.PX to REM converterConvert units and find the matching Tailwind spacing class.Hex to Tailwind colorFind the closest Tailwind palette color for any hex value.

Browse all 24 Tailwind CSS tools

More free tools & components

Keep going with another tool, or grab a ready-made component.

Color converterHex to Tailwind colorBrowse components