透明 ARGB 十六进制值

Posted 2023-02-23

【中文标题】透明 ARGB 十六进制值

【英文标题】：Transparent ARGB hex value

【发布时间】：2014-06-05 17:43:11

【问题描述】：

this 表中的颜色都是不透明的。我猜A 的值设置为FF。

透明度的代码是什么？

比如这个颜色FFF0F8FF(AliceBlue)，转成??F0F8FF这样的透明码？

【问题讨论】：

终于有一种方法可以用十六进制代码为某些浏览器设置透明颜色（新功能）。请看***.com/a/60876347/2457251

【参考方案1】：

这里是 % 到十六进制值的表格：

示例：对于 85% 的白色，您可以使用 #D9FFFFFF。 这里 85% = "D9" & 白色 = "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

如何计算？

FF 是以十六进制模式写入的数字。该数字以十进制表示 255。例如，如果要计算 42%，则需要找到数字 255 的 42% 并将该数字转换为十六进制。 255 * 0.42 ~= 107 107 到十六进制是“6B – 马来人

【讨论】：

你如何计算这个？

@SaeedJassani FF 是以十六进制模式写入的数字。该数字以十进制表示 255。例如，如果要计算 42%，则需要找到数字 255 的 42% 并将该数字转换为十六进制。 255 * 0.42 ~= 107 107 到十六进制是“6B”

@Maleta 非常感谢

【参考方案2】：

透明度由 Alpha 通道控制（AA in #AARRGGBB）。最大值（255 dec，FF hex）表示完全不透明。最小值（0 dec，00 hex）表示完全透明。两者之间的值是半透明的，即颜色与背景颜色混合。

要获得完全透明的颜色，请将 alpha 设置为零。 RR、GG 和 BB 在这种情况下无关紧要，因为看不到颜色。这意味着#00FFFFFF（“透明白色”）与#00F0F8FF（“透明AliceBlue”）颜色相同。 为简单起见，如果颜色无关紧要，可以选择黑色 (#00000000) 或白色 (#00FFFFFF)。

在您链接到的表中，您会发现 Transparent 定义为 #00FFFFFF。

【讨论】：

假设我需要 50% 的不透明度。 50% 不透明度/透明的白色代码是什么？

@user3332579：50% 是7F。将您的计算器置于十六进制模式，它会为您解决问题。

@user3332579：所以 50% 的白人是#7FFFFFFF。

格式为#RRGGBBAA Hex8（或#RGBA in Hex4）和NOT #AARRGGBB（或#ARGB）我在Chrome中测试过62,63,64 参考@ 987654321@，https://css-tricks.com/8-digit-hex-codes/，Chrome Feature Status

@SGSSandhu 这个问题不是针对 CSS 的。再看问题，格式是ARGB。

【参考方案3】：

添加到其他答案，并没有做更多 @Maleta 在 https://***.com/a/28481374/1626594 的评论中解释的内容，先做 alpha*255 然后四舍五入到十六进制。这是一个快速转换器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>

【参考方案4】：

注意??

在 HTML/CSS（浏览器代码）中，格式为 #RRGGBBAA，alpha 通道作为最后两个十六进制数字。

【参考方案5】：

就用这个吧：

android:background="#00FFFFFF"

它会完成你的工作。

【参考方案6】：

如果您有十六进制值，并且只是想知道 alpha 的值是多少，这个 sn-p 可能会有所帮助：

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

【参考方案7】：

刚刚遇到这个，透明度的简短代码就是 #00000000。

【参考方案8】：

标准的十六进制颜色代码有六个字符，例如#000000 - 黑色，超过六个字符的十六进制颜色代码（可能是 8 个字符，例如 #82bc00 - 绿色）超过标准数量，使最后两个字符定义透明度等级。 因此，如果您需要获得绝对透明度，您可以将 00 添加到任何十六进制颜色，但为了统一，您可以使用 #00000000

.green
  background: #82bc00      /*actual green*/

.subgreen
  background: #82bc0070    /*green with little transparency*/

.greenparency
  background: #82bc0040    /*green with much transparency*/

.transparency
  background: #82bc0000    /*full transparency over green*/

<div class="green"> green background color </div>
<div class="subgreen"> green background color </div>
<div class="greenparency"> green background color </div>
<div class="transparency"> green background color </div>