Comprendre les couleurs sur Android (six caractères)

212

J'essaie de comprendre comment les couleurs fonctionnent dans Android. J'ai cette couleur définie comme arrière-plan de mon LinearLayout, et j'obtiens un arrière-plan gris avec une certaine transparence:

<gradient android:startColor="#b4555555" android:endColor="#b4555555"
 android:angle="270.0" />

Si je supprime les deux derniers caractères (55), j'obtiens une couleur unie, perdant la transparence. J'essayais de trouver une page où je peux voir une explication à ce sujet, mais je ne l'ai pas trouvée.

Thiago
la source

Réponses:

170

Si vous fournissez 6 chiffres hexadécimaux, cela signifie RVB (2 chiffres hexadécimaux pour chaque valeur de rouge, vert et bleu).

Si vous fournissez 8 chiffres hexadécimaux, c'est un ARGB (2 chiffres hexadécimaux pour chaque valeur d'alpha, rouge, vert et bleu respectivement).

Donc, en supprimant le 55 final, vous passez de A = B4, R = 55, G = 55, B = 55 (un gris principalement transparent) à R = B4, G = 55, B = 55 (un entièrement non - pinky sombre et transparent).

Voir la documentation "Couleur" pour les formats pris en charge.

Jon Skeet
la source
Et comment définir la transparence de textView via du code? Je veux convertir la valeur ARGB en int, donc je pourrais l'utiliser ensuite dans la méthode textView.setBackgroundColor (int color). C'est possible? Une autre façon d'y parvenir?
Marek
@Marek: Une valeur ARGB est un int, effectivement. Voir les documents sur developer.android.com/reference/android/graphics/Color.html (trouver <<dans la page).
Jon Skeet
mais il n'est pas formaté comme #AARRGGBB. Il est ensuite formaté comme 0xAARRGGBB. C'est pourquoi je ne pouvais pas l'utiliser dans la méthode setBackgroundColor. Je pourrais utiliser Color.parseColor ("# AARRGGBB)
Marek
@Marek: Ce n'est pas "formaté" - c'est juste un entier. Vous pouvez combiner les différents bits répertoriés dans la documentation.
Jon Skeet
1
@ Tooaster: Non, la transparence.
Jon Skeet
1184

Android utilise des valeurs ARGB hexadécimales, au format #AARRGGBB. Cette première paire de lettres, l'AA, représente le canal alpha. Vous devez convertir vos valeurs d'opacité décimale en une valeur hexadécimale. Voici les étapes:

Processus Alpha Hex Value

  1. Prenez votre opacité en tant que valeur décimale et multipliez-la par 255. Donc, si vous avez un bloc qui est opaque à 50%, la valeur décimale serait 0,5. Par exemple: 0,5 x 255 = 127,5
  2. La fraction ne se convertira pas en hexadécimal, vous devez donc arrondir votre nombre vers le haut ou vers le bas au nombre entier le plus proche. Par exemple: 127,5 arrondit à 128; 55,25 arrondit à 55.
  3. Entrez votre valeur décimale dans un convertisseur décimal-hexadécimal, comme http://www.binaryhexconverter.com/decimal-to-hex-converter , et convertissez vos valeurs.
  4. Si vous ne récupérez qu'une seule valeur, préfixez-la par un zéro. Par exemple, si vous essayez d'obtenir une opacité de 5% et que vous passez par ce processus, vous vous retrouverez avec la valeur hexadécimale de D. Ajoutez un zéro devant pour qu'il apparaisse comme 0D.

Voilà comment vous trouvez la valeur du canal alpha. J'ai pris la liberté de dresser une liste de valeurs pour vous. Prendre plaisir!

Valeurs d'opacité hexadécimale

  • 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
BlondeFurious
la source
37
Base sur le guide de conception des couleurs du matériau Android: google.com/design/spec/style/… Plus de valeurs d'opacité hexadécimales clés: 100%: FF 87%: DE 70%: B3 54%: 8A 30%: 4D 26%: 42 12 %: 1F
cn123h
ici vous trouvez toutes les valeurs: dtp-aus.com/hexadeci.htm et vous pouvez obtenir alpha 0-100 en divisant le nombre par 255 et en le multipliant par 100. espérons que cela vous aide
Niib Fouda
12% alpha: echo "obase=16; ibase=10; (255*12+50)/100" | bc. (+50 - pour l'arrondi à la valeur la plus proche, c'est 100/2 en fait)
vigilancer
195

En partant de la réponse de @BlondeFurious , voici du code Java pour obtenir chaque valeur hexadécimale de 100% à 0% alpha:

for (double i = 1; i >= 0; i -= 0.01) {
    i = Math.round(i * 100) / 100.0d;
    int alpha = (int) Math.round(i * 255);
    String hex = Integer.toHexString(alpha).toUpperCase();
    if (hex.length() == 1)
        hex = "0" + hex;
    int percent = (int) (i * 100);
    System.out.println(String.format("%d%% — %s", percent, hex));
}

Production:

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

Une version JavaScript est ci-dessous:


Vous pouvez également simplement Google "nombre à hex" où "nombre" est une valeur comprise entre 0 et 255.

Jared Rummler
la source
36

Conception de matériaux Android

Ce sont les conversions pour définir les niveaux d'opacité des couleurs du texte.

  • 100%: FF
  • 87%: DE
  • 70%: B3
  • 54%: 8A
  • 50%: 80
  • 38%: 61
  • 12%: 1F

Texte sombre sur fond clair

entrez la description de l'image ici

  • Texte principal: DE000000
  • Texte secondaire: 8A000000
  • Texte désactivé, texte de conseil et icônes: 61000000
  • Séparateurs: 1F000000

Texte blanc sur fond sombre

entrez la description de l'image ici

  • Texte principal: FFFFFFFF
  • Texte secondaire: B3FFFFFF
  • Texte désactivé, texte de conseil et icônes: 80FFFFFF
  • Séparateurs: 1FFFFFFF

Voir également

  • Recherchez n'importe quel pourcentage ici .
Suragch
la source
Super travail, merci! Depuis le 7 janvier 2019, ces valeurs ne sont plus visibles sur la page Android Material Design que vous avez liée. S'agit-il toujours des valeurs officielles recommandées et existe-t-il une autre source officielle où elles sont indiquées? Merci!
TheUnwokenFool
@TheUnwokenFool, cette réponse est peut-être obsolète maintenant. Je ne vois rien non plus sur la définition des niveaux d'opacité du texte. S'il semble y avoir des contradictions, suivez les directives actuelles.
Suragch
17

Sur Android, les couleurs peuvent être spécifiées comme RVB ou ARGB.

http://en.wikipedia.org/wiki/ARGB

En RVB, vous avez deux caractères pour chaque couleur (rouge, vert, bleu) et en ARGB, vous avez deux caractères supplémentaires pour le canal alpha.

Donc, si vous avez 8 caractères, c'est ARGB, les deux premiers caractères spécifiant le canal alpha. Si vous supprimez les deux premiers caractères, c'est uniquement RVB (couleurs unies, pas d'alpha / transparence). Si vous souhaitez spécifier une couleur dans votre code source Java, vous devez utiliser:

int Color.argb (int alpha, int red, int green, int blue)

alpha  Alpha component [0..255] of the color
red    Red component [0..255] of the color
green  Green component [0..255] of the color
blue   Blue component [0..255] of the color

Référence: argb

alibi
la source
7

Une valeur de couleur hexadécimale à 8 chiffres est une représentation de l'ARGB (Alpha, Rouge, Vert, Bleu), tandis qu'une valeur à 6 chiffres suppose une opacité de 100% (entièrement opaque) et définit uniquement les valeurs RVB. Donc, pour que cela soit entièrement opaque, vous pouvez utiliser soit # FF555555, soit simplement # 555555. Chaque valeur hexadécimale à 2 chiffres est un octet, représentant des valeurs de 0 à 255.

Kevin Coppock
la source
-1

à la nouvelle version chromée (peut-être 67.0.3396.62), la couleur hexadécimale CSS peut utiliser cet affichage de modèle,

par exemple:

div{
  background-color:#FF00FFcc;
}

cc est l'opacité, mais l'ancien chrome ne prend pas en charge ce mod

Heicks
la source
Bienvenue sur StackOverflow, veuillez visiter la tournée . Votre réponse n'aide pas l'OP car il a posé des questions sur les couleurs dans Android, pas Chrome ou HTML.
PeS
@PeS hier, oui, mais ils ont la même représentation.
Heicks