# Hex transparency in colors

<>

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

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

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
1. decimal = percentage * 255 / 100 . ex : decimal = 50*255/100 = 127.5
2. convert decimal to hexadecimal value . ex: 127.5 in decimal = 7*16ˆ1 + 15 = 7F in hexadecimal
##### Hex values to percentage
1. convert the hexaxdecimal value to decimal. ex: D6 = 13*16ˆ1 + 6 = 214
2. percentage = (value in decimal ) * 100 / 255. ex : 214 *100/255 = 84%

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 handing table

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

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.

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.

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;
}
```

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

All percentage values are mapped to the hexadecimal values.

http://online.sfsu.edu/chrism/hexval.html

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.

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;
}
}

.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;
zoom: 1;
}```

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

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

:)

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