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?

3

## 10 Answers

Here’s a correct table of percentages to hex values. E.g. for 50% white you’d use #80FFFFFF.

% | 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)

4

I appreciate that the OP had the android tag, but this proofs useful in iOS as well if you use an extension. Anyway the reason for the comment is that if you use translucent colours on your navigation bar, then use 85% to match the colour of the UIStatusbar as well. github.com/jwknz/UIColor-Hex-Swift

– jwknzHex values for decimal 0-255, with percentages is also very helpful.

– SufianThis is a list of OPACITY; the question is asking for TRANSPARENCY. To fix, just reverse the table.

– MiStr@jwknz not only android and iOS, I’d argue the entirety of the web!!!!

– mesqueeb

# Short answer

You can see the full table of percentages to hex values and **run** the code in this playground in https://play.golang.org/p/l1JaPYFzDkI .

# Short explanation in pseudocode

### Percentage to hex values

**decimal**= percentage * 255 / 100 . ex : decimal = 50*255/100 = 127.5- convert
**decimal**to hexadecimal value . ex: 127.5 in decimal = 7*16ˆ1 + 15 = 7F in hexadecimal

### Hex values to percentage

- convert the hexaxdecimal value to decimal. ex: D6 = 13*16ˆ1 + 6 = 214
- percentage = (value in decimal ) * 100 / 255. ex : 214 *100/255 = 84%

More infos for the conversion decimal <=> hexadecimal

# Long answer: how to calculate in your head

The problem can be solved generically by a cross multiplication.

We have a percentage (ranging from 0 to 100 ) and another number (ranging from 0 to 255) then converted to hexadecimal.

- 100 <==> 255 (FF in hexadecimal)
- 0 <==> 0 (00 in hexadecimal)

For 1%

- 1 * 255 / 100 = 2,5
- 2,5 in hexa is
**2**if you round it down.

For 2%

- 2 * 255 / 100 = 5
- 5 in hexa is
**5**.

The table in the best answer gives the percentage by step of 5%.

How to calculate the numbers between in your head ? Due to the **2.5** increment, add 2 to the first and 3 to the next

- 95% — F2 // start
- 96% — F4 // add 2 to F2
- 97% — F7 // add 3 . Or F2 + 5 = F7
- 98% — F9 // add 2
- 99% — FC // add 3. 9 + 3 = 12 in hexa : C
- 100% — FF // add 2

I prefer to teach how to find the solution rather than showing an answer table you don’t know where the results come from.

Give a man a fish and you feed him for a day; teach a man to fish and

you feed him for a lifetime

0

Color hexadecimal notation is like following: #AARRGGBB

- A : alpha
- R : red
- G : green
- B : blue

You should first look at how hexadecimal works. You can write at most FF.

1

Make sure to verify which of ARGB or RGBA your system uses (or something else). Can prevent you from scratching your head and getting confused over something rather simple and probably obscure.

– Jerry

That chart is not showing percents. “#90” is not “90%”.

That chart shows the hexadecimal to decimal conversion. The hex number 90 (typically represented as 0x90) is equivalent to the decimal number 144.

Hexadecimal numbers are base-16, so each digit is a value between 0 and F. The maximum value for a two byte hex value (such as the transparency of a color) is 0xFF, or 255 in decimal. Thus 100% is 0xFF.

3

If it’s not a matter of hexadecimal to decimal conversion what is the correct way to measure transparency? 0xFF is still more then two numbers. Is there some kind of correct chart of a system that I’m not aware of?

–It

*is*a matter of hex to decimal. The problem is that you can’t just take the decimal number and call it a percent (eg 50 in decimal is not a percent). Since the maximum decimal value you can represent in hex is 255, a value of 0x7F (decimal 127) is approximately 50%. The decimal number 50 (0x32) is only about 20%.As for 0xFF being more than 2 digits- the “0x” is just a notational convenience so you don’t have to specify “hexadecimal number…” every time you write out a number. In your XML, you will still leave that out. Thus a 50% transparent black background will be written in a color.xml file as “#7F000000”, as per the #AARRGGBB scheme @erkangur mentioned above.

I built this small helper method for an android app, may come of use:

```
/**
* @param originalColor color, without alpha
* @param alpha from 0.0 to 1.0
* @return
*/
public static String addAlpha(String originalColor, double alpha) {
long alphaFixed = Math.round(alpha * 255);
String alphaHex = Long.toHexString(alphaFixed);
if (alphaHex.length() == 1) {
alphaHex = "0" + alphaHex;
}
originalColor = originalColor.replace("#", "#" + alphaHex);
return originalColor;
}
```

0

This might be very late answer. But this chart kills it.

All percentage values are mapped to the hexadecimal values.

https://web.archive.org/web/20200812155307/http://online.sfsu.edu/chrism/hexval.html

2

try this on google search (or click here)

`255 * .2 to hex`

it will generate `0x33`

as a result.

However, google does not round off values so you can only use 1-digit multipliers. if you want to use say .85, you have to get the rounded-off value of 255 * .85 first, then type `(rounded-value here) to hex`

in google search.

Using python to calculate this, for example(written in python 3), 50% transparency :

```
hex(round(256*0.50))
```

🙂

I realize this is an old question, but I came across it when doing something similar.

Using SASS, you have a very elegant way to convert RGBA to hex ARGB: `ie-hex-str`

. I’ve used it here in a mixin.

```
@mixin ie8-rgba ($r, $g, $b, $a){
$rgba: rgba($r, $g, $b, $a);
$ie8-rgba: ie-hex-str($rgba);
.lt-ie9 &{
background-color: transparent;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr="#{$ie8-rgba}", endColorstr="#{$ie8-rgba}");
}
}
.transparent{
@include ie8-rgba(88,153,131,.8);
background-color: rgba(88,153,131,.8);
}
```

outputs:

```
.transparent {
background-color: rgba(88, 153, 131, 0.8);
}
.lt-ie9 .transparent {
background-color: transparent;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr="#CC589983", endColorstr="#CC589983");
zoom: 1;
}
```

1

Question has android label.

I always keep coming here to check for int/hex alpha value. So, end up creating a simple method in my java utils class. This method will convert the percentage to hex value and append to the color code string value.

```
public static String setColorAlpha(int percentage, String colorCode){
double decValue = ((double)percentage / 100) * 255;
String rawHexColor = colorCode.replace("#","");
StringBuilder str = new StringBuilder(rawHexColor);
if(Integer.toHexString((int)decValue).length() == 1)
str.insert(0, "#0" + Integer.toHexString((int)decValue));
else
str.insert(0, "#" + Integer.toHexString((int)decValue));
return str.toString();
}
```

So, `Utils.setColorAlpha(30, "#000000")`

will give you `#4c000000`

Android Material Design: 100%:

`FF`

, 87%:`DE`

, 70%:`B3`

, 54%:`8A`

, 50%:`80`

, 38%:`61`

, 12%:`1F`

8 character colour codes are hexadecimal. (They aren’t specific to Android.) You’re prepending decimal digits to it.

Also here is table of percentages between 0-100: gist.github.com/lopspower/03fb1cc0ac9f32ef38f4