我想知道如何将rgba
转换为hex
,将可见的rgba颜色(包括透明度)转换为十六进制值。
假设我有这个:
rgba(0,129,255,.4)
它是一种“浅蓝色”...
我想知道有没有办法获得相同的十六进制浅蓝色“可见”的颜色,所以我不想转换的#0081ff
,而是一些接近屏幕上可见的颜色。
问题:
如何将rgba转换为透明度调整的十六进制?
发布于 2013-04-09 17:57:54
这取决于将应用透明颜色的背景。但如果您知道背景的颜色(例如白色),则可以计算应用于特定背景的RGBA颜色所产生的RGB颜色。
它只是颜色和背景之间的加权平均值,权重是alpha通道(从0到1):
Color = Color * alpha + Background * (1 - alpha);
对于白色rgb(255,255,255)
背景下的透明浅蓝色rgba(0,129,255,.4)
:
Red = 0 * 0.4 + 255 * 0.6 = 153
Green = 129 * 0.4 + 255 * 0.6 = 204.6
Blue = 255 * 0.4 + 255 * 0.6 = 255
这给了rgb(153,205,255)
或#99CDFF
发布于 2016-02-27 07:35:53
function hexify(color) {
var values = color
.replace(/rgba?\(/, '')
.replace(/\)/, '')
.replace(/[\s+]/g, '')
.split(',');
var a = parseFloat(values[3] || 1),
r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);
return "#" +
("0" + r.toString(16)).slice(-2) +
("0" + g.toString(16)).slice(-2) +
("0" + b.toString(16)).slice(-2);
}
var myHex = hexify('rgba(57,156,29,0.05)'); // "#f5faf3"
console.log(myHex);
发布于 2019-12-19 04:27:04
通过使用chrome的吸管工具,你可以节省一些时间和计算。我通常做的是将一个大div的背景颜色设置为rgba,然后在CSS中添加一个颜色属性到某个随机的十六进制值。然后,您只需单击该随机十六进制值旁边的彩色方块,将鼠标悬停在页面上具有背景色的div上,并使用滴管选择背景色。如果它返回为rgba,您可以通过再次单击该彩色方块并单击右侧的向上和向下箭头在hsla、rgba和十六进制之间循环。
https://stackoverflow.com/questions/15898740
复制相似问题