Hex transparency in colors [duplicate]

Question

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?

Shantay

Android Material Design: 100%: FF, 87%: DE, 70%: B3, 54%: 8A, 50%: 80, 38%: 61, 12%: 1F – Timmie

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

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

I have tried to use HEX colors with alpha value in Chrome and the format that works is #RRGGBBAA (not #AARRGGBB). – Devereux

https://10x-programming.com/hex-values-to-decimal-and-percentage-converter Bookmark & use this handy online tool instead :) – Culbert

Answer 1

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)

Anthem

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 – Chophouse

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

https://10x-programming.com/hex-values-to-decimal-and-percentage-converter You can use this handy online tool instead :) – Culbert

Answer 2

Short answer: full table of percentages

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 .

Ok the table tells the results not how to find the results. The next parts explain how you can calculate yourself.

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%

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

Catholicity

Answer 3

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.

Sudhir

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. – Seaborg

Answer 4

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.

Soupy

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? – Shantay

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%. – Soupy

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 @Sudhir mentioned above. – Soupy

Answer 5

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

Partible

Answer 6

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.

Karinkarina

Answer 7

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

Heaton

Question has android label. – Dynamotor

Answer 8

I always keep coming here to check for int/hex alpha value. So, I end up creating a simple method in my java utils class. This method will convert the percentage of transparency 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

Commissariat