Compreendendo as cores no Android (seis caracteres)

212

Estou tentando entender como as cores funcionam no Android. Eu tenho essa cor definida como plano de fundo LinearLayoute recebo um plano de fundo cinza com alguma transparência:

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

Se eu remover os dois últimos caracteres (55), fico com uma cor sólida, perdendo a transparência. Eu estava tentando encontrar uma página onde eu pudesse ver alguma explicação sobre isso, mas não consegui encontrá-la.

Thiago
fonte

Respostas:

170

Se você fornecer 6 dígitos hexadecimais, isso significa RGB (2 dígitos hexadecimais para cada valor em vermelho, verde e azul).

Se você fornecer 8 dígitos hexadecimais, é um ARGB (2 dígitos hexadecimais para cada valor de alfa, vermelho, verde e azul, respectivamente).

Portanto, removendo os 55 finais, você está mudando de A = B4, R = 55, G = 55, B = 55 (um cinza quase transparente), para R = B4, G = 55, B = 55 (um valor totalmente não -transparente sombrio mindinho).

Consulte a documentação "Cor" para obter os formatos suportados.

Jon Skeet
fonte
E como definir a transparência do textView através do código? Quero converter o valor do ARGB em int, para poder usá-lo posteriormente no método textView.setBackgroundColor (int color). É possível? Alguma outra maneira de conseguir isso?
Marek13
@Marek: um valor ARGB é um int, efetivamente. Consulte os documentos em developer.android.com/reference/android/graphics/Color.html (encontrado <<na página).
22813 Jon Skeet
mas não está formatado como #AARRGGBB. Em seguida, é formatado como 0xAARRGGBB. É por isso que eu não poderia usá-lo no método setBackgroundColor. Eu poderia usar Color.parseColor ("# AARRGGBB)
Marek
@Marek: Não é "formatado" - é apenas um número inteiro. Você pode combinar os vários bits, conforme listado na documentação.
Jon Skeet
1
@ Toaster: Não, transparência.
Jon Skeet
1184

O Android usa valores ARGB hexadecimais, formatados como #AARRGGBB. Esse primeiro par de letras, o AA, representa o canal alfa. Você deve converter seus valores decimais de opacidade em um valor hexadecimal. Aqui estão os passos:

Processo de valor alfa hex

  1. Tome sua opacidade como um valor decimal e multiplique por 255. Portanto, se você tiver um bloco que é 50% opaco, o valor decimal seria 0,5. Por exemplo: 0,5 x 255 = 127,5
  2. A fração não será convertida em hexadecimal, portanto, você deve arredondar o número para cima ou para baixo até o número inteiro mais próximo. Por exemplo: 127,5 arredonda para 128; 55,25 arredonda para 55.
  3. Digite seu valor decimal em um conversor de decimal em hexadecimal, como http://www.binaryhexconverter.com/decimal-to-hex-converter , e converta seus valores.
  4. Se você recuperar apenas um único valor, prefixe-o com zero. Por exemplo, se você está tentando obter 5% de opacidade e está passando por esse processo, terá o valor hexadecimal de D. Adicione um zero na frente para que apareça como 0D.

É assim que você encontra o valor do canal alfa. Tomei a liberdade de elaborar uma lista de valores para você. Aproveitar!

Valores de opacidade hexadecimal

  • 100% - FF
  • 95% - F2
  • 90% - E6
  • 85% - D9
  • 80% - CC
  • 75% - AM
  • 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
LoiraFurious
fonte
37
Base no Android Guia de design de cores dos materiais: google.com/design/spec/style/… Mais valores-chave de opacidade hexadecimal: 100%: FF 87%: DE 70%: B3 54%: 8A 30%: 4D 26%: 42 12 %: 1F
cn123h
aqui você encontra todos os valores: dtp-aus.com/hexadeci.htm e você pode obter alfa 0-100 por dividir o número por 255 e múltipla que por 100. espero que o ajude
Niib Fouda
para 12% de alfa: echo "obase=16; ibase=10; (255*12+50)/100" | bc. (+50 - para arredondar para o valor mais próximo, é 100/2 realmente)
vigilancer
195

Saindo da resposta de @BlondeFurious , aqui está um código Java para obter cada valor hexadecimal de 100% a 0% alfa:

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));
}

Resultado:

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

Uma versão JavaScript está abaixo:


Você também pode usar o Google "number to hex" onde 'number' é qualquer valor entre 0 e 255.

Jared Rummler
fonte
36

Android Material Design

Estas são as conversões para definir os níveis de opacidade da cor do texto.

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

Texto escuro em fundos claros

insira a descrição da imagem aqui

  • Texto principal: DE000000
  • Texto secundário: 8A000000
  • Texto desativado, texto de dica e ícones: 61000000
  • Divisores: 1F000000

Texto em branco sobre fundo escuro

insira a descrição da imagem aqui

  • Texto principal: FFFFFFFF
  • Texto secundário: B3FFFFFF
  • Texto desativado, texto de dica e ícones: 80FFFFFF
  • Divisores: 1FFFFFFF

Veja também

  • Procure qualquer porcentagem aqui .
Suragch
fonte
Trabalho incrível, obrigado! A partir de 7 de janeiro de 2019, esses valores não serão mais visíveis na página Design de material do Android que você vinculou. Esses ainda são os valores oficiais recomendados e há outra fonte oficial onde eles são declarados? Obrigado!
TheUnwokenFool 7/01/19
@TheUnwokenFool, esta resposta pode estar desatualizada agora. Também não vejo nada sobre como definir níveis de opacidade para o texto. Se houver alguma contradição, siga as diretrizes atuais.
Suragch 7/01/19
17

No Android, as cores podem ser especificadas como RGB ou ARGB.

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

No RGB, você tem dois caracteres para cada cor (vermelho, verde, azul) e no ARGB, você tem dois caracteres adicionais para o canal alfa.

Portanto, se você tiver 8 caracteres, é ARGB, com os dois primeiros caracteres especificando o canal alfa. Se você remover os dois caracteres iniciais, será apenas RGB (cores sólidas, sem alfa / transparência). Se você deseja especificar uma cor no seu código-fonte Java, é necessário usar:

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

Referencia: argb

álibi
fonte
7

Um valor de cor hexadecimal de 8 dígitos é uma representação de ARGB (Alfa, Vermelho, Verde, Azul), enquanto um valor de 6 dígitos assume apenas 100% de opacidade (totalmente opaco) e define apenas os valores RGB. Portanto, para tornar isso totalmente opaco, você pode usar # FF555555 ou apenas # 555555. Cada valor hexadecimal de 2 dígitos é um byte, representando valores de 0 a 255.

Kevin Coppock
fonte
-1

na nova versão do Chrome (talvez 67.0.3396.62), a cor hexadecimal CSS pode usar a exibição deste modelo,

por exemplo:

div{
  background-color:#FF00FFcc;
}

cc é opacidade, mas o chrome antigo não suporta esse mod

Heicks
fonte
Bem-vindo ao StackOverflow, visite o tour . Sua resposta não ajuda o OP, pois ele perguntou sobre cores no Android, não no Chrome ou HTML.
PES
@ PeS ontem, sim, mas Eles têm a mesma representação.
Heicks 03/08/19