Valor hexadecimal transparente de ARGB


160

Los colores en esta tabla no son todos transparentes. Supongo que el valor para el Ase establece en FF.

¿Cuál es el código para la transparencia?

Por ejemplo, este color FFF0F8FF (AliceBlue), a un código transparente como ??F0F8FF?


Finalmente, hay una manera de establecer un color transparente con código hexadecimal para ciertos navegadores (nueva función). Por favor, eche un vistazo a stackoverflow.com/a/60876347/2457251
Almir Campos

Respuestas:


199

La transparencia está controlada por el canal alfa ( AAin #AARRGGBB). El valor máximo (255 dec, FF hex) significa completamente opaco. Valor mínimo (0 dec, 00 hex) significa totalmente transparente. Los valores intermedios son semitransparentes, es decir, el color se mezcla con el color de fondo.

Para obtener un color totalmente transparente, establezca el alfa en cero. RR, GGy BBson irrelevantes en este caso porque no se verá ningún color. Esto significa que #00FFFFFF("Blanco transparente") es del mismo color que #00F0F8FF("AliceBlue transparente"). Para mantenerlo simple, uno elige negro ( #00000000) o blanco ( #00FFFFFF) si el color no importa.

En la tabla a la que se vinculó, encontrará Transparentdefinido como #00FFFFFF.


2
Digamos que necesito un 50% de opacidad. ¿Cuál es el código para el color blanco con 50% de opacidad / transparente?
user3332579

10
@ user3332579: 50% es 7F. Pon tu calculadora en modo hexadecimal, hará el truco por ti.
theHacker

1
@ user3332579: 50% de blanco es #7FFFFFFF.
theHacker

66
El formato es #RRGGBBAA Hex8 (o #RGBA en Hex4) y NO #AARRGGBB (o #ARGB) que he probado en Chrome 62,63,64 Consulte CanIUse.com , https://css-tricks.com/8- digit-hex-codes / , Estado de la función de Chrome
SGS Sandhu

3
@SGSSandhu La pregunta no está dirigida a CSS. Vea la pregunta nuevamente, el formato es ARGB.
theHacker

506

Aquí está la tabla de% a valores hexadecimales:

Ejemplo : para 85% de blanco, usarías #D9FFFFFF. Aquí 85% = "D9" y Blanco = "FFFFFF"


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

¿Cómo se calcula?

FF es un número escrito en modo hexadecimal. Ese número representa 255 en decimal. Por ejemplo, si desea calcular el 42%, necesita encontrar el 42% del número 255 y convertir ese número en hexadecimal. 255 * 0.42 ~ = 107 107 a hexadecimal es "6B - maleta


3
como calculas esto
Saeed Jassani

35
@SaeedJassani FF es un número escrito en modo hexadecimal. Ese número representa 255 en decimal. Por ejemplo, si desea calcular el 42%, necesita encontrar el 42% del número 255 y convertir ese número en hexadecimal. 255 * 0.42 ~ = 107 107 a hexadecimal es "6B"
maleta

1
@Maleta Muchas gracias
Saeed Jassani

10

Agregando a las otras respuestas y sin hacer nada más de lo que @Maleta explicó en un comentario en https://stackoverflow.com/a/28481374/1626594 , haciendo alpha * 255 y luego redondeando luego a hexadecimal . Aquí hay un convertidor rápido http://jsfiddle.net/8ajxdLap/4/

function rgb2hex(rgb) {
  var rgbm = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?((?:[0-9]*[.])?[0-9]+)[\s+]?\)/i);
  if (rgbm && rgbm.length === 5) {
    return "#" +
      ('0' + Math.round(parseFloat(rgbm[4], 10) * 255).toString(16).toUpperCase()).slice(-2) +
      ("0" + parseInt(rgbm[1], 10).toString(16).toUpperCase()).slice(-2) +
      ("0" + parseInt(rgbm[2], 10).toString(16).toUpperCase()).slice(-2) +
      ("0" + parseInt(rgbm[3], 10).toString(16).toUpperCase()).slice(-2);
  } else {
    var rgbm = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
    if (rgbm && rgbm.length === 4) {
      return "#" +
        ("0" + parseInt(rgbm[1], 10).toString(16).toUpperCase()).slice(-2) +
        ("0" + parseInt(rgbm[2], 10).toString(16).toUpperCase()).slice(-2) +
        ("0" + parseInt(rgbm[3], 10).toString(16).toUpperCase()).slice(-2);
    } else {
      return "cant parse that";
    }
  }
}

$('button').click(function() {
  var hex = rgb2hex($('#in_tb').val());
  $('#in_tb_result').html(hex);
});
body {
  padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Convert RGB/RGBA to hex #RRGGBB/#AARRGGBB:<br>
<br>
<input id="in_tb" type="text" value="rgba(200, 90, 34, 0.75)"> <button>Convert</button><br>
<br> Result: <span id="in_tb_result"></span>



1

Si tiene su valor hexadecimal y se pregunta cuál sería el valor para el alfa, este fragmento puede ayudarlo:

const alphaToHex = (alpha => {
  if (alpha > 1 || alpha < 0 || isNaN(alpha)) {
    throw new Error('The argument must be a number between 0 and 1');
  }
  return Math.ceil(255 * alpha).toString(16).toUpperCase();
})

console.log(alphaToHex(0.45));

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.