Gerade wenn man mit Designerinnen oder Designern zusammenarbeiten, sind Transparenzen in HEX-Farbwerten öfters mal ein Thema. Denn es wird meist eine Akzentfarbe definiert und diese dann z.B. über verschiedene Transparenzen verstärkt oder abgeschwächt. Es kommt nun jedoch vor, dass man nur die Information wie 40% Deckkraft bekommt und keinen eigenen HEX-Farbwert. Hier muss nun vom Entwickler umständlich gerechnet werden, wie man 40% Deckkraft abbildet. In diesem Beitrag stelle ich nun eine Tabelle zur Verfügung, wo man direkt die Werte ablesen kann und gleichzeitig gibt es noch einen kleinen Code-Schnipsel, welcher den entsprechenden Wert „berechnet“.
| Deckkraft in Prozent | HEX-Wert | Deckkraft in Prozent | HEX-Wert |
|---|---|---|---|
| 0 % | 00 | 51% | 82 |
| 1 % | 03 | 52% | 85 |
| 2 % | 05 | 53% | 87 |
| 3 % | 08 | 54% | 8A |
| 4 % | 0A | 55% | 8C |
| 5 % | 0D | 56% | 8F |
| 6 % | 0F | 57% | 91 |
| 7 % | 12 | 58% | 94 |
| 8 % | 14 | 59% | 96 |
| 9 % | 17 | 60% | 99 |
| 10% | 1A | 61% | 9C |
| 11% | 1C | 62% | 9E |
| 12% | 1F | 63% | A1 |
| 13% | 21 | 64% | A3 |
| 14% | 24 | 65% | A6 |
| 15% | 26 | 66% | A8 |
| 16% | 29 | 67% | AB |
| 17% | 2B | 68% | AD |
| 18% | 2E | 69% | B0 |
| 19% | 30 | 70% | B3 |
| 20% | 33 | 71% | B5 |
| 21% | 36 | 72% | B8 |
| 22% | 38 | 73% | BA |
| 23% | 3B | 74% | BD |
| 24% | 3D | 75% | BF |
| 25% | 40 | 76% | C2 |
| 26% | 42 | 77% | C4 |
| 27% | 45 | 78% | C7 |
| 28% | 47 | 79% | C9 |
| 29% | 4A | 80% | CC |
| 30% | 4D | 81% | CF |
| 31% | 4F | 82% | D1 |
| 32% | 52 | 83% | D4 |
| 33% | 54 | 84% | D6 |
| 34% | 57 | 85% | D9 |
| 35% | 59 | 86% | DB |
| 36% | 5C | 87% | DE |
| 37% | 5E | 88% | E0 |
| 38% | 61 | 89% | E3 |
| 39% | 63 | 90% | E6 |
| 40% | 66 | 91% | E8 |
| 41% | 69 | 92% | EB |
| 42% | 6B | 93% | ED |
| 43% | 6E | 94% | F0 |
| 44% | 70 | 95% | F2 |
| 45% | 73 | 96% | F5 |
| 46% | 75 | 97% | F7 |
| 47% | 78 | 98% | FA |
| 48% | 7A | 99% | FC |
| 49% | 7D | 100% | FF |
| 50% | 80 |
Um nun nicht jedes Mal in der Tabelle nach dem passenden HEX-Wert zu schauen, zeige ich euch eine kleine Funktion, welche diese Aufgabe automatisch für uns übernimmt.
Als Eingabeparameter wird die Angabe der Deckkraft in Prozent erwartet und am Ende erhalten wir die HEX-Repräsentation der Deckkraft, wie es bereits die Tabelle anzeigt. Man kann die Methode nun auch leicht modifizieren, so dass diese bereits die Farbe als HEX-Wert entgegen nimmt und dann die Farbe inkl. Deckkraft zurückliefert.
private string PercentToHex(double percentValue)
{
// check that p is between 0 and 100
var percent = Math.Max(0, Math.Min(100, percentValue));
// calculate nearest integer (0 - 255) of percent
var intValue = (int)Math.Round(percentValue / 100 * 255);
// get hexadecimal representation of intValue
var hexValue = intValue.ToString("X");
// return corresponding alpha value
return hexValue.PadRight(2, '0').ToUpper();
}
Mit diesen zwei Hilfsmitteln ist es nun relativ leicht die gewünschten Farbwerte in seiner eigenen App zu verwenden.
