The best answers to the question “Hex transparency in colors [duplicate]” in the category Dev.

__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?

__ANSWER__:

# 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

__ANSWER__:

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)

__ANSWER__:

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.

__ANSWER__:

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.