Transparence Hex en couleurs
Je travaille sur l'implémentation d'une option de transparence de widget pour mon widget d'application, même si j'ai quelques difficultés à obtenir les valeurs de couleur hexadécimales correctes. Étant complètement nouveau en transparence de couleur hexagonale, j'ai cherché un peu partout bien que je ne puisse pas trouver de réponse spécifique à ma question.
Je souhaite définir la transparence par couleur hexagonale, disons donc mon identificateur de couleur hexagonale "# 33b5e5" et je veux qu'il soit transparent à 50%. Ensuite, je vais utiliser "# 8033b5e5" car 80 soit 50%.
J'ai trouvé un tableau utile ici: http://www.dtp-aus.com/hexadeci.htm . Avec ces données, j'ai réussi à trouver ceci:
0% = #00
10% = #16
20% = #32
30% = #48
40% = #64
50% = #80
60% = #96
70% = #112
80% = #128
90% = #144
Maintenant, les problèmes commencent à apparaître lorsque je dépasse 100 dans l'hex. Les codes de couleur hexadécimale ne peuvent contenir que 8 symboles, non? Par exemple, le numéro 11233b5e5 (80%) se bloque.
Que puis-je faire pour pouvoir utiliser les nombres les plus élevés également?
Voici un tableau correct des pourcentages aux valeurs hexadécimales. Par exemple. pour 50% de blanc, vous utiliseriez # 80FFFFFF.
- 100% - FF
- 95% - F2
- 90% - E6
- 85% - J9
- 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 )
Réponse courte
Vous pouvez voir le tableau complet des pourcentages en valeurs hexadécimales et exécuter le code de ce terrain de jeu dans https://play.golang.org/p/l1JaPYFzDkI .
Brève explication en pseudocode
Pourcentage en valeurs hexadécimales
- décimal = pourcentage * 255/100. ex: décimal = 50 * 255/100 = 127,5
- convertir décimal en valeur hexadécimale. ex: 127,5 en décimal = 7 * 16ˆ1 + 15 = 7F en hexadécimal
Valeurs hexadécimales en pourcentage
- convertit la valeur hexaxdécimale en décimal. ex: D6 = 13 * 16ˆ1 + 6 = 214
- pourcentage = (valeur décimale) * 100/255. ex: 214 * 100/255 = 84%
Plus d'infos pour la conversion décimale <=> hexadécimale
Réponse longue: comment calculer dans votre tête
Le problème peut être résolu de manière générique par un multiplication croisée .
Nous avons un pourcentage (allant de 0 à 100) et un autre nombre (allant de 0 à 255) puis convertis en hexadécimal.
- 100 <==> 255 (FF en hexadécimal)
- 0 <==> 0 (00 en hexadécimal)
Pour une%
- 1 * 255/100 = 2,5
- 2,5 en hexa est 2 si vous l’arrondissez vers le bas.
Pour 2%
- 2 * 255/100 = 5
- 5 en hexa est 5 .
Le tableau dans la meilleure réponse donne le pourcentage par pas de 5%.
Comment calculer les nombres entre dans ta tête? En raison de l'incrément 2,5 , ajoutez 2 au premier et 3 au suivant.
- 95% - F2 // début
- 96% - F4 // ajoute 2 à F2
- 97% - F7 // additionner 3. Ou F2 + 5 = F7
- 98% - F9 // additionner 2
- 99% - FC // ajouter 3. 9 + 3 = 12 en hexa: C
- 100% - FF // ajouter 2
Je préfère apprendre à trouver la solution plutôt que de remettre la table
Donnez un poisson à un homme et vous le nourrissez pendant une journée; enseigne à un homme à pêcher et tu le nourris pour la vie
La notation hexadécimale en couleur est la suivante: #AARRGGBB
- A: alpha
- R: rouge
- G: vert
- B: bleu
Vous devriez d’abord regarder comment hexadécimal fonctionne. Vous pouvez écrire au plus FF.
Ce graphique ne montre pas les pourcentages. "# 90" n'est pas "90%". Ce graphique montre la conversion hexadécimale en décimale. Le nombre hexadécimal 90 (généralement représenté par 0x90) équivaut au nombre décimal 144.
Les nombres hexadécimaux étant en base 16, chaque chiffre correspond à une valeur comprise entre 0 et F. La valeur maximale d'une valeur hexadécimale sur deux octets (telle que la transparence d'une couleur) est 0xFF ou 255 en décimal. Ainsi, 100% est 0xFF.
J'ai construit cette petite méthode d'assistance pour une application Android, qui peut être utile:
/**
* @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;
}
C'est peut-être une réponse très tardive .. Mais ce tableau le tue.
Toutes les valeurs en pourcentage sont mappées aux valeurs hexadécimales.
essayez ceci sur google (ou cliquez ici )
255 * .2 to hex
il en résultera 0x33.
Cependant, Google ne complète pas les valeurs, vous ne pouvez donc utiliser que des multiplicateurs à un chiffre. si vous voulez utiliser par exemple 0,85, vous devez commencer par obtenir la valeur arrondie 255 * .85, puis tapez (rounded-value here) to hex dans la recherche google.
Je me rends compte que c’est une vieille question, mais je l’ai trouvée en faisant quelque chose de similaire.
En utilisant SASS, vous avez un moyen très élégant de convertir RGBA en hex ARGB: ie-hex-str. Je l'ai utilisé ici dans un 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);
}
les sorties:
.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;
}En utilisant python pour le calculer, par exemple (écrit en python 3), transparence à 50%:
hex(round(256*0.50))
:)