Valor hexadecimal transparente de ARGB


160

As cores nesta tabela não são transparentes. Eu acho que o valor para o Aestá definido como FF.

Qual é o código para transparência?

Por exemplo, essa cor FFF0F8FF (AliceBlue), para um código transparente como ??F0F8FF?


Finalmente, existe uma maneira de definir cores transparentes com código hexadecimal para determinados navegadores (novo recurso). Por favor, dê uma olhada no stackoverflow.com/a/60876347/2457251
Almir Campos

Respostas:


199

A transparência é controlada pelo canal alfa ( AApol #AARRGGBB). O valor máximo (255 dec, FF hex) significa totalmente opaco. Valor mínimo (0 dez, 00 hex) significa totalmente transparente. Os valores intermediários são semitransparentes, ou seja, a cor é misturada à cor de fundo.

Para obter uma cor totalmente transparente, defina o alfa como zero. RR, GGe BBsão irrelevantes nesse caso, porque nenhuma cor será visível. Isso significa #00FFFFFF("branco transparente") é da mesma cor que #00F0F8FF("AliceBlue transparente"). Para simplificar, escolhe-se preto ( #00000000) ou branco ( #00FFFFFF) se a cor não importa.

Na tabela que você vinculou, você encontrará Transparentdefinido como #00FFFFFF.


2
digamos que preciso de 50% de opacidade. Qual é o código da cor branca com 50% de opacidade / transparente?
user3332579

10
@ user3332579: 50% é 7F. Coloque sua calculadora no modo hexadecimal, ele fará o truque para você.
theHacker

1
@ user3332579: Então, 50% é branco #7FFFFFFF.
theHacker

6
O formato é #RRGGBBAA Hex8 (ou #RGBA em Hex4) e NÃO #AARRGGBB (ou #ARGB) que testei no Chrome 62,63,64 Consulte CanIUse.com , https://css-tricks.com/8- dígitos-códigos-hexadecimais / , Status do recurso do Chrome
SGS Sandhu

3
@SGSSandhu A questão não é direcionada ao CSS. Veja a pergunta novamente, o formato é ARGB.
precisa saber é o seguinte

506

Aqui está a tabela de% para valores hexadecimais:

Exemplo : para 85% de branco, você usaria #D9FFFFFF. Aqui 85% = "D9" e branco = "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

Como é calculado?

FF é o número escrito no modo hexadecimal. Esse número representa 255 em decimal. Por exemplo, se você deseja calcular 42%, precisa encontrar 42% do número 255 e converter esse número em hexadecimal. 255 * 0,42 ~ = 107 107 para hexadecimal é "6B - maleta


3
como você calcula isso?
Saeed Jassani

35
@SaeedJassani FF é o número escrito no modo hexadecimal. Esse número representa 255 em decimal. Por exemplo, se você deseja calcular 42%, precisa encontrar 42% do número 255 e converter esse número em hexadecimal. 255 * 0,42 ~ = 107 107 para hex é "6B"
maleta

1
@Maleta Muito obrigado
Saeed Jassani

10

Adicionando às outras respostas e fazendo nada mais do que o @Maleta explicou em um comentário em https://stackoverflow.com/a/28481374/1626594 , executando alpha * 255 e depois arredondando para hex . Aqui está um conversor 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

Se você tem o seu valor hexadecimal e está se perguntando qual seria o valor do alfa, esse snippet pode ajudar:

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.