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)
Answer from Ben Clayton on Stack OverflowHere'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: full table of percentages
You can see the full table of percentages to hex values and run the code in this playground in
- Golang https://play.golang.org/p/l1JaPYFzDkI .
- Kotlin https://pl.kotl.in/o9BnFYhRn
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
- 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
Hexadecimal color code for transparent?
colors - Transparent ARGB hex value - Stack Overflow
hex - What is the hexadecimal code for a transparent color? - Stack Overflow
Color Hex of the background of Discord Dark?
Videos
Working with hexadecimal color code. It isn´t specificaly for a website, but for a color puzzle, but I figured somebody here would help the best. I´m looking for a way to write down just transperent color (Notning). I looked it up and found that #ffffff00 or #000000 should do the trick?
If anyone has any experience, every idea is helpfull. Thank you.
Here is the table of % to hex values:
Example: For 85% white, you would use #D9FFFFFF.
Here 85% = "D9" & White = "FFFFFF"
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
How is it calculated?
Quoting maleta in a now-deleted comment:
FF is number written in hex mode. That number represent 255 in decimal. For example, if you want 42% to calculate you need to find 42% of numbeer 255 and convert that number to hex. 255 * 0.42 ~= 107 107 to hex is "6B
-- maleta (2016-12-27 10:32:28Z, License: CC BY-SA 3.0)
Transparency is controlled by the alpha channel (AA in #AARRGGBB). Maximal value (255 dec, FF hex) means fully opaque. Minimum value (0 dec, 00 hex) means fully transparent. Values in between are semi-transparent, i.e. the color is mixed with the background color.
To get a fully transparent color set the alpha to zero. RR, GG and BB are irrelevant in this case because no color will be visible. This means #00FFFFFF ("transparent White") is the same color as #00F0F8FF ("transparent AliceBlue").
To keep it simple one chooses black (#00000000) or white (#00FFFFFF) if the color does not matter.
In the table you linked to you'll find Transparent defined as #00FFFFFF.
There is no such thing; transparency is done via another channel.
It depends on the format. Some systems require RRGGBB, which doesn't include alpha.
Some have their format as AARRGGBB, so your provided color would be 05FF00FF.
Conversely, some have their format as RRGGBBAA, thus your provided color would be FF00FF05.