I was recently working on a Power Apps project and I usually create a screen to store all the styles and configurations, such as colors, font weight and size, among other things. For this project, I decided to store all the colors in a SharePoint list with the following columns: Color Name (This is the Title column renamed) and Color Value. We decided to use Hex color values instead of RGB because of its simplicity and because there are many websites that provide color pickers, such as w3schools.
I am very familiar with how to apply transparency to colors using RGBA(), but not to hex colors using ColorValue(). With RGBA(), you can change the Alpha value from 0, which is transparent, to 1, which is full. And to add transparency, you can use any decimals between 0 and 1, such as
RGBA(255, 255, 0, 0.7). But what about transparency for hex colors? How do you do it? You can use an 8-digit hex value in the following format: #rrggbbaa.
Let’s say you are using Yellow (#FFFF00) and you need to set the transparency to 70%. You would set the hex value as follows: #FFFF00B3, where B3 is the transparency level. The table below contains all the transparency levels from 0 to 100%. Also, you can check out this GitHub page by Mikhael Lopez where I found all this information. Giving credit to where credit it’s due 😀
| Transparency % | Value |
|---|---|
| 100% | FF |
| 99% | FC |
| 98% | FA |
| 97% | F7 |
| 96% | F5 |
| 95% | F2 |
| 94% | F0 |
| 93% | ED |
| 92% | EB |
| 91% | E8 |
| 90% | E6 |
| 89% | E3 |
| 88% | E0 |
| 87% | DE |
| 86% | DB |
| 85% | D9 |
| 84% | D6 |
| 83% | D4 |
| 82% | D1 |
| 81% | CF |
| 80% | CC |
| 79% | C9 |
| 78% | C7 |
| 77% | C4 |
| 76% | C2 |
| 75% | BF |
| 74% | BD |
| 73% | BA |
| 72% | B8 |
| 71% | B5 |
| 70% | B3 |
| 69% | B0 |
| 68% | AD |
| 67% | AB |
| 66% | A8 |
| 65% | A6 |
| 64% | A3 |
| 63% | A1 |
| 62% | 9E |
| 61% | 9C |
| 60% | 99 |
| 59% | 96 |
| 58% | 94 |
| 57% | 91 |
| 56% | 8F |
| 55% | 8C |
| 54% | 8A |
| 53% | 87 |
| 52% | 85 |
| 51% | 82 |
| 50% | 80 |
| 49% | 7D |
| 48% | 7A |
| 47% | 78 |
| 46% | 75 |
| 45% | 73 |
| 44% | 70 |
| 43% | 6E |
| 42% | 6B |
| 41% | 69 |
| 40% | 66 |
| 39% | 63 |
| 38% | 61 |
| 37% | 5E |
| 36% | 5C |
| 35% | 59 |
| 34% | 57 |
| 33% | 54 |
| 32% | 52 |
| 31% | 4F |
| 30% | 4D |
| 29% | 4A |
| 28% | 47 |
| 27% | 45 |
| 26% | 42 |
| 25% | 40 |
| 24% | 3D |
| 23% | 3B |
| 22% | 38 |
| 21% | 36 |
| 20% | 33 |
| 19% | 30 |
| 18% | 2E |
| 17% | 2B |
| 16% | 29 |
| 15% | 26 |
| 14% | 24 |
| 13% | 21 |
| 12% | 1F |
| 11% | 1C |
| 10% | 1A |
| 9% | 17 |
| 8% | 14 |
| 7% | 12 |
| 6% | 0F |
| 5% | 0D |
| 4% | 0A |
| 3% | 08 |
| 2% | 05 |
| 1% | 03 |
| 0% | 00 |
Photo by Marc Schulte on Unsplash
Fausto Capellan, Jr 