web-dev-qa-db-fra.com

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?

1186
SweSnow

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 )

3458
Ben Clayton

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

  1. décimal = pourcentage * 255/100. ex: décimal = 50 * 255/100 = 127,5
  2. 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

  1. convertit la valeur hexaxdécimale en décimal. ex: D6 = 13 * 16ˆ1 + 6 = 214
  2. 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

123
Raymond Chenon

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.

35
erkangur

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.

21
Tanis.7x

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;
}
17
dwbrito

enter image description here

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.

http://online.sfsu.edu/chrism/hexval.html

16
amalBit

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.

6
chjarder

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;
}
2
fontophilic

En utilisant python pour le calculer, par exemple (écrit en python 3), transparence à 50%:

hex(round(256*0.50))

:)

1
Geng Jiawen