Hex Opacity: What is it & hex opacity table

Hex opacity refers to the level of transparency in a color, represented as a hexadecimal value. In web design and development, hex opacity is commonly used in CSS (Cascading Style Sheets) to specify the degree of transparency for a particular color.

The hex opacity value ranges from 00 to FF, with 00 being fully transparent and FF being fully opaque. This allows designers to control the transparency of elements on a webpage, creating visually appealing effects and enhancing user experience.

Understanding and utilizing hex opacity is essential for creating modern and visually engaging web designs.

Using Hex Opacity in CSS

If you want a background color to be semi-transparent, you can use the RGBA color model and specify the opacity using a hexadecimal value. In CSS, this would look like background-color: #000000AA, where “AA” represents the level of opacity. This can be especially useful when you want to create overlays, fade effects, or blend elements together on your website.

Hex Opacity Table

While it may not be intuitive to find the hex value percentage, here is a handy table to quickly find the opacity to append to your hex color to make it transparent.

So for example if you want your color to be 95% opacity you would append the hex code F2 to your hex color. For example red with a 95% opacity would be #ff0000f2.

Opacity Value (%)Hex Code
100FF
99FC
98FA
97F7
96F5
95F2
94F0
93ED
92EB
91E8
90E6
89E3
88E0
87DE
86DB
85D9
84D6
83D4
82D1
81CF
80CC
79C9
78C7
77C4
76C2
75BF
74BD
73BA
72B8
71B5
70B3
69B0
68AD
67AB
66A8
65A6
64A3
63A1
629E
619C
6099
5996
5894
5791
568F
558C
548A
5387
5285
5182
5080
497D
487A
4778
4675
4573
4470
436E
426B
4169
4066
3963
3861
375E
365C
3559
3457
3354
3252
314F
304D
294A
2847
2745
2642
2540
243D
233B
2238
2136
2033
1930
182E
172B
1629
1526
1424
1321
121F
111C
101A
917
814
712
60F
50D
40A
308
205
103
000

Leave a Comment