I’m working on implementing a widget transparency option for my app widget although I’m having some trouble getting the hex color values right. Being completely new to hex color transparency I searched around a bit although I couldn’t find a specific answer to my question.
I want to set transparency by hex color so let’s say my hex color id “#33b5e5” and I want it to be 50% transparent. Then I’ll use “#8033b5e5” because 80 is 50%.
I found a useful chart here: http://www.dtp-aus.com/hexadeci.htm . With this data I managed to come up with this:
0% = #00
10% = #16
20% = #32
30% = #48
40% = #64
50% = #80
60% = #96
70% = #112
80% = #128
90% = #144
Now the issues start appearing when I get higher than 100 in hex. Hex color codes can only be 8 symbols long right? For example #11233b5e5 (80%) crashes.
What can I do to enable me to use the higher numbers aswell?
Here’s a correct table of percentages to hex values for opacity. E.g. for 50% white you’d use #80FFFFFF. To think in terms of transparency instead, flip the order of the percentages (more opaque = less transparent).
% | Hex |
---|---|
100% | FF |
95% | F2 |
90% | E6 |
85% | D9 |
80% | CC |
75% | BF |
70% | B3 |
65% | A6 |
60% | 99 |
55% | 8C |
50% | 80 |
45% | 73 |
40% | 66 |
35% | 59 |
30% | 4D |
25% | 40 |
20% | 33 |
15% | 26 |
10% | 1A |
5% | 0D |
0% | 00 |
(source question)