Comprender los colores en Android (seis caracteres)

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

  

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.

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).

Por lo tanto, al eliminar los 55 finales, se cambia de A = B4, R = 55, G = 55, B = 55 (un gris casi transparente), a R = B4, G = 55, B = 55 (un valor completamente no -transparente rosa oscuro).

Consulte la documentación de “Color” para los formatos admitidos.

Android usa valores ARGB hexadecimales, que tienen el formato #AARRGGBB. Ese primer par de letras, el AA, representa el canal alfa. Debe convertir sus valores de opacidad decimal en un valor hexadecimal. Estos son los pasos:

Proceso de valor Alpha Hex

  1. Tome su opacidad como un valor decimal y multiplíquelo por 255. Por lo tanto, 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 rondas hasta 128; 55.25 vueltas hasta 55.
  3. Ingrese su valor decimal en un convertidor decimal a hexadecimal, como http://www.binaryhexconverter.com/decimal-to-hex-converter , y convierta sus valores.
  4. Si solo obtiene un valor único, póngalo con un cero. Por ejemplo, si está tratando de obtener un 5% de opacidad 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 se encuentra 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

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 

Una versión de JavaScript está a continuación:

 var text = document.getElementById('text'); for (var i = 1; i >= 0; i -= 0.01) { i = Math.round(i * 100) / 100; var alpha = Math.round(i * 255); var hex = (alpha + 0x10000).toString(16).substr(-2).toUpperCase(); var perc = Math.round(i * 100); text.innerHTML += perc + "% — " + hex + " (" + alpha + ")"; } 
 

Diseño de material 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

enter image description here

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

Texto blanco sobre fondos oscuros

enter image description here

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

Ver también

  • Busque cualquier porcentaje aquí .

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 primeros dos caracteres que especifican el canal alfa. Si elimina los dos caracteres principales, 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

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 el 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.

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

p.ej:

 div{ background-color:#FF00FFcc; } 

cc es opacidad, pero el cromo antiguo no es compatible con esa modificación