Hex transparencia en colores

Estoy trabajando en la implementación de una opción de transparencia de widget para mi widget de aplicación, aunque estoy teniendo problemas para obtener los valores de color hexadecimal correctos. Siendo completamente nuevo en la transparencia de color hexadecimal, busqué un poco, aunque no pude encontrar una respuesta específica a mi pregunta.

Quiero establecer la transparencia por color hexadecimal así que digamos mi id. De color hexadecimal “# 33b5e5” y quiero que sea 50% transparente. Luego usaré “# 8033b5e5” porque 80 es 50%.

Encontré un gráfico útil aquí: http://www.dtp-aus.com/hexadeci.htm . Con esta información logré llegar a esto:

0% = #00 10% = #16 20% = #32 30% = #48 40% = #64 50% = #80 60% = #96 70% = #112 80% = #128 90% = #144 

Ahora los problemas comienzan a aparecer cuando tengo más de 100 en hex. Los códigos de color hexadecimales solo pueden tener 8 símbolos de largo ¿no? Por ejemplo, # 11233b5e5 (80%) lockings.

¿Qué puedo hacer para permitirme usar los números más altos también?

Aquí hay una tabla correcta de porcentajes para los valores hexadecimales. Por ejemplo, para el 50% de blanco, usaría # 80FFFFFF.

  • 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

( fuente )

Respuesta corta

Puede ver la tabla completa de porcentajes a valores hexadecimales y ejecutar el código en este patio de recreo en https://play.golang.org/p/l1JaPYFzDkI .

Breve explicación en pseudocódigo

Porcentaje de valores hexadecimales

  1. decimal = porcentaje * 255/100. ej .: decimal = 50 * 255/100 = 127.5
  2. convertir el valor decimal a hexadecimal ej .: 127.5 en decimal = 7 * 161 + 15 = 7F en hexadecimal

Hex valores a porcentaje

  1. convierte el valor hexadecimal a decimal. ex: D6 = 13 * 161 + 6 = 214
  2. porcentaje = (valor en decimal) * 100 / 255. ej .: 214 * 100/255 = 84%

Más información para la conversión decimal <=> hexadecimal

Respuesta larga: cómo calcular en tu cabeza

El problema se puede resolver genéricamente mediante una multiplicación cruzada .

Tenemos un porcentaje (que va de 0 a 100) y otro número (que va de 0 a 255) y luego se convierte a hexadecimal.

  • 100 <==> 255 (FF en hexadecimal)
  • 0 <==> 0 (00 en hexadecimal)

Para 1%

  • 1 * 255/100 = 2,5
  • 2,5 en hexa es 2 si lo redondeas.

Para 2%

  • 2 * 255/100 = 5
  • 5 en hexa es 5 .

La tabla en la mejor respuesta da el porcentaje por paso del 5%.

¿Cómo calcular los números en tu cabeza? Debido al incremento de 2.5 , agregue 2 a la primera y 3 a la siguiente

  • 95% – F2 // inicio
  • 96% – F4 // agrega 2 a F2
  • 97% – F7 // agregar 3. O F2 + 5 = F7
  • 98% – F9 // agregar 2
  • 99% – FC // agregar 3. 9 + 3 = 12 en hexa: C
  • 100% – FF // agregar 2

Prefiero enseñar cómo encontrar la solución en lugar de dar la mesa

Dale a un hombre un pescado y lo alimentas por un día; enseña a un hombre a pescar y lo alimentas para toda la vida

La notación hexadecimal en color es como la siguiente: #AARRGGBB

  • A: alfa
  • R: rojo
  • G: verde
  • B: azul

Primero deberías ver cómo funciona el hexadecimal . Puedes escribir como máximo FF.

Esa tabla no muestra porcentajes. “# 90” no es “90%”. Ese gráfico muestra la conversión hexadecimal a decimal. El número hexadecimal 90 (típicamente representado como 0x90) es equivalente al número decimal 144.

Los números hexadecimales son base-16, por lo que cada dígito es un valor entre 0 y F. El valor máximo para un valor hexadecimal de dos bytes (como la transparencia de un color) es 0xFF o 255 en decimal. Por lo tanto, el 100% es 0xFF.

Creé este pequeño método de ayuda para una aplicación de Android, puede ser de uso:

  /** * @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; } 

enter image description here

Esta podría ser una respuesta muy tarde … Pero esta tabla lo mata.

Todos los valores porcentuales se asignan a los valores hexadecimales.

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

intente esto en la búsqueda de google (o haga clic aquí )

255 * .2 to hex

generará 0x33 como resultado.

Sin embargo, google no redondea los valores por lo que solo puedes usar multiplicadores de 1 dígito. si quiere usar digamos .85, primero tiene que obtener el valor redondeado de 255 * .85, luego escriba (rounded-value here) to hex en la búsqueda de google.

Me doy cuenta de que esta es una vieja pregunta, pero me encontré al hacer algo similar.

Usando SASS, tienes una manera muy elegante de convertir RGBA a hex ARGB: ie-hex-str . Lo he usado aquí en 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); } 

productos:

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

Usando python para calcular esto, por ejemplo (escrito en python 3), 50% de transparencia:

 hex(round(256*0.50)) 

🙂

Siempre sigo viniendo aquí para verificar el valor de int / hex alfa. Entonces, termino creando un método simple en mi clase Java utils. Este método convertirá el porcentaje en valor hexadecimal y se agregará al valor de cadena de código de color.

  public static String setColorAlpha(int percentage, String colorCode){ double decValue = ((double)percentage / 100) * 255; String rawHexColor = colorCode.replace("#",""); StringBuilder str = new StringBuilder(rawHexColor); if(Integer.toHexString((int)decValue).length() == 1) str.insert(0, "#0" + Integer.toHexString((int)decValue)); else str.insert(0, "#" + Integer.toHexString((int)decValue)); return str.toString(); } 

Entonces, Utils.setColorAlpha(30, "#000000") le dará #4c000000