这里是%到16进制值的表格。
举例说明。对于85%的白色,你可以使用#D9FFFFFF.。
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
透明度由阿尔法通道("#AARRGGBB "中的 "AA")控制。最大值(255 dec, FF hex)意味着完全不透明。最小值(0 dec, 00 hex)意味着完全透明。介于两者之间的值是半透明的,即颜色与背景色混合。
为了得到完全透明的颜色,将alpha设置为零。RR
、GG
和BB
在这种情况下是不相关的,因为没有颜色是可见的。这意味着#00FFFFFF
("透明的白色")与#00F0F8FF
("透明的AliceBlue")是相同颜色。
为了简单起见,如果颜色不重要,可以选择黑色(#00000000
)或白色(#00FFFFFF
)。
在你链接的表格中,你会发现Transparent
被定义为#00FFFFFF
。
在其他答案的基础上,没有再做@Maleta在https://stackoverflow.com/a/28481374/1626594 的评论中所解释的,做*alpha255,然后四舍五入到十六进制**。这里有一个快速转换器
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>
<!--结束片段-->。