Hex transparency in colors [duplicate]

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)

---

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

---

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

---

https://i.stack.imgur.com/zSbB6.png

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

---

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

---

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

---