透明的ARGB十六进制值


160

在颜色这个表是所有不是透明的。我想将的值A设置为FF

透明的代码是什么?

例如,将此颜色FFF0F8FF(AliceBlue)更改为透明代码,例如??F0F8FF??


最后,有一种方法可以为某些浏览器使用十六进制代码设置透明颜色(新功能)。请看一下stackoverflow.com/a/60876347/2457251
Almir Campos

Answers:


199

透明度由Alpha通道(AAin #AARRGGBB)控制。最大值(255 dec,十六进制FF)表示完全不透明。最小值(0 dec,十六进制00)表示完全透明。两者之间的值是半透明的,即颜色与背景颜色混合在一起。

要获得完全透明的颜色,请将alpha设置为零。RRGG并且BB在这种情况下无关紧要,因为将看不到任何颜色。这意味着#00FFFFFF(“透明白色”)与#00F0F8FF(“透明AliceBlue”)具有相同的颜色。为了简单起见,如果颜色无关紧要,请选择黑色(#00000000)或白色(#00FFFFFF)。

在与您链接的表格中,Transparent定义为#00FFFFFF


2
假设我需要50%的不透明度。具有50%不透明/透明的白色的代码是什么?
user3332579 2014年

10
@ user3332579:50%是7F。将您的计算器设置为十六进制模式,它将为您解决问题。
theHacker 2014年

1
@ user3332579:所以50%白色是#7FFFFFFF
theHacker 2014年

6
格式为#RRGGBBAA Hex8(或Hex4中的#RGBA),而不是我在Chrome 62,63,64中测试过的#AARRGGBB(或#ARGB),请访问CanIUse.comhttps: //css-tricks.com/8- 数字-己码/铬功能状态
SGS桑德

3
@SGSSandhu该问题并非针对CSS。再次看到问题,格式为ARGB。
theHacker

506

这是%到十六进制值的表:

示例:对于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%,则需要找到numbeer 255的42%并将该数字转换为十六进制。255 * 0.42〜= 107107,十六进制为“ 6B – maleta


3
您如何计算?
赛义德(Saeed Jassani)

35
@SaeedJassani FF是以十六进制模式写入的数字。该数字代表十进制255。例如,如果要计算42%,则需要找到numbeer 255的42%并将该数字转换为十六进制。255 *
0.42〜

1
@Maleta非常感谢
Saeed Jassani

10

除了其他答案外,@ Maleta在https://stackoverflow.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>



1

如果您有自己的十六进制值,并且只是想知道alpha值是多少,此代码段可能会有所帮助:

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.