Comprensión de los colores en Android (seis caracteres)


212

Estoy tratando de entender cómo funcionan los colores en Android. Tengo este color configurado como fondo de mi LinearLayout, y obtengo un fondo gris con algo de transparencia:

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

Si elimino los dos últimos caracteres (55) obtengo un color sólido, perdiendo la transparencia. Estaba tratando de encontrar una página donde pueda ver alguna explicación sobre esto, pero no pude encontrarla.

Respuestas:


170

Si proporciona 6 dígitos hexadecimales, eso significa RGB (2 dígitos hexadecimales para cada valor de rojo, verde y azul).

Si proporciona 8 dígitos hexadecimales, es un ARGB (2 dígitos hexadecimales para cada valor de alfa, rojo, verde y azul, respectivamente).

Entonces, al eliminar el 55 final, está cambiando de A = B4, R = 55, G = 55, B = 55 (un gris en su mayoría transparente), a R = B4, G = 55, B = 55 (un totalmente no -transparente rosado oscuro).

Consulte la documentación "Color" para ver los formatos compatibles.


¿Y cómo establecer la transparencia textView a través del código? Quiero convertir el valor ARGB a int, para poder usarlo luego en el método textView.setBackgroundColor (int color). ¿Es posible? ¿Alguna otra forma de lograrlo?
Marek

@Marek: Un valor ARGB es un int, efectivamente. Consulte los documentos en developer.android.com/reference/android/graphics/Color.html (busque <<en la página).
Jon Skeet

pero no está formateado como #AARRGGBB. Luego se formatea como 0xAARRGGBB. Es por eso que no pude usarlo en el método setBackgroundColor. Podría usar Color.parseColor ("# AARRGGBB)
Marek

@Marek: No está "formateado", es solo un número entero. Puede combinar los diversos bits que se enumeran en la documentación.
Jon Skeet

1
@ Tostadora: No, transparencia.
Jon Skeet

1184

Android usa valores ARGB hexadecimales, que están formateados como #AARRGGBB. Ese primer par de letras, el AA, representa el canal alfa. Debe convertir sus valores de opacidad decimal a un valor hexadecimal. Aquí están los pasos:

Proceso de valor Alpha Hex

  1. Tome su opacidad como un valor decimal y multiplíquelo por 255. Entonces, si tiene un bloque que es 50% opaco, el valor decimal sería .5. Por ejemplo: .5 x 255 = 127.5
  2. La fracción no se convertirá a hexadecimal, por lo que debe redondear su número hacia arriba o hacia abajo al número entero más cercano. Por ejemplo: 127.5 redondea hasta 128; 55.25 redondea a 55.
  3. Ingrese su valor decimal en un convertidor de decimal a hexadecimal, como http://www.binaryhexconverter.com/decimal-to-hex-converter , y convierta sus valores.
  4. Si solo obtiene un valor único, prefijelo con un cero. Por ejemplo, si está tratando de obtener una opacidad del 5% y está pasando por este proceso, terminará con el valor hexadecimal de D. Agregue un cero delante de él para que aparezca como 0D.

Así es como encuentras el valor del canal alfa. Me he tomado la libertad de armar una lista de valores para ti. ¡Disfrutar!

Valores de opacidad hexadecimal

  • 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

37
Base en la guía de diseño de color del material Android: google.com/design/spec/style/… Más valores clave de opacidad hexadecimal: 100%: FF 87%: DE 70%: B3 54%: 8A 30%: 4D 26%: 42 12 %: 1F
cn123h

aquí encontrará todos los valores: dtp-aus.com/hexadeci.htm y puede obtener alfa 0-100 dividiendo el número por 255 y
multiplíquelo

para 12% de alfa: echo "obase=16; ibase=10; (255*12+50)/100" | bc. (50 - para el redondeo al valor más cercano, que es en realidad 100/2)
vigilancer

195

Saliendo de la respuesta de @BlondeFurious , aquí hay un código Java para obtener 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));
}

Salida:

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

A continuación se muestra una versión de JavaScript:


También puede simplemente Google "número a hexadecimal" donde 'número' es cualquier valor entre 0 y 255.


36

Diseño de material de Android

Estas son las conversiones para establecer los niveles de opacidad del color del texto.

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

Texto oscuro sobre fondos claros.

ingrese la descripción de la imagen aquí

  • Texto primario: DE000000
  • Texto secundario: 8A000000
  • Texto deshabilitado, texto de sugerencia e íconos: 61000000
  • Divisores: 1F000000

Texto blanco sobre fondos oscuros

ingrese la descripción de la imagen aquí

  • Texto primario: FFFFFFFF
  • Texto secundario: B3FFFFFF
  • Texto deshabilitado, texto de sugerencia e íconos: 80FFFFFF
  • Divisores: 1FFFFFFF

Ver también

  • Busque cualquier porcentaje aquí .

Impresionante trabajo, gracias! A partir del 7 de enero de 2019, estos valores ya no son visibles en la página de Android Material Design que ha vinculado. ¿Siguen siendo los valores oficiales recomendados y hay otra fuente oficial donde se mencionan? ¡Gracias!
TheUnwokenFool

@TheUnwokenFool, esta respuesta puede estar desactualizada ahora. Tampoco veo nada sobre establecer niveles de opacidad para el texto. Si parece haber alguna contradicción, siga las pautas actuales.
Suragch

17

En Android, los colores se pueden especificar como RGB o ARGB.

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

En RGB tiene dos caracteres para cada color (rojo, verde, azul), y en ARGB tiene dos caracteres adicionales para el canal alfa.

Entonces, si tiene 8 caracteres, es ARGB, con los dos primeros caracteres que especifican el canal alfa. Si elimina los dos caracteres iniciales, solo es RGB (colores sólidos, sin alfa / transparencia). Si desea especificar un color en su código fuente de Java, debe 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


7

Un valor de color hexadecimal de 8 dígitos es una representación de ARGB (Alfa, Rojo, Verde, Azul), mientras que un valor de 6 dígitos solo asume un 100% de opacidad (totalmente opaco) y define solo los valores RGB. Entonces, para que esto sea completamente opaco, puede usar # FF555555 o simplemente # 555555. Cada valor hexadecimal de 2 dígitos es un byte, que representa valores de 0-255.


-1

en la nueva versión de Chrome (quizás 67.0.3396.62), el color hexadecimal CSS puede usar esta pantalla de modelo,

p.ej:

div{
  background-color:#FF00FFcc;
}

cc es opacidad, pero el viejo Chrome no admite ese mod


Bienvenido a StackOverflow, visite el recorrido . Su respuesta no ayuda al OP, ya que le preguntó sobre los colores en Android, no en Chrome o HTML.
PeS

@PeS ayer, sí, pero tienen la misma representación.
Heicks
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.