如何将颜色在RGB格式转换为十六进制格式,反之亦然?
例如,将'#0080C0'转换为(0,128,192)。
如何将颜色在RGB格式转换为十六进制格式,反之亦然?
例如,将'#0080C0'转换为(0,128,192)。
当前回答
我意识到这个问题有很多答案,但如果你像我一样,你知道你的HEX总是6个字符,带或不带#前缀,那么如果你想做一些快速内联的东西,这可能是最简单的方法。它不关心是否以散列开始。
var hex = "#ffffff";
var rgb = [
parseInt(hex.substr(-6,2),16),
parseInt(hex.substr(-4,2),16),
parseInt(hex.substr(-2),16)
];
其他回答
很惊讶这个答案没有出现。
不使用任何库#使用平台✔️ 3行,并处理任何颜色的浏览器支持。
const toRGB = (color) => {
const { style } = new Option();
style.color = color;
return style.color;
}
// handles any color the browser supports and converts it.
console.log(toRGB("#333")) // rgb(51, 51, 51);
console.log(toRGB("hsl(30, 30%, 30%)"))
rgb字符串到十六进制字符串的可读联机程序:
rgb = "rgb(0,128,255)"
hex = '#' + rgb.slice(4,-1).split(',').map(x => (+x).toString(16).padStart(2,0)).join('')
返回这里“#0080ff”。
我遇到了这个问题,因为我想要解析任何颜色字符串值,并能够指定不透明度,所以我写了这个使用canvas API的函数。
var toRGBA = function () {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = 1;
canvas.height = 1;
return function (color) {
context.fillStyle = color;
context.fillRect(0, 0, 1, 1);
var data = context.getImageData(0, 0, 1, 1).data;
return {
r: data[0],
g: data[1],
b: data[2],
a: data[3]
};
};
}();
关于context.fillStyle注意:
如果解析值导致失败,则必须忽略该值,属性必须保留其先前的值。
下面是一个你可以用来测试输入的Stack Snippet演示:
var toRGBA = function () { var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); canvas.width = 1; canvas.height = 1; return function (color) { context.fillStyle = color; context.fillRect(0, 0, 1, 1); var data = context.getImageData(0, 0, 1, 1).data; return { r: data[0], g: data[1], b: data[2], a: data[3] }; }; }(); var inputs = document.getElementsByTagName('input'); function setColor() { inputs[1].value = JSON.stringify(toRGBA(inputs[0].value)); document.body.style.backgroundColor = inputs[0].value; } inputs[0].addEventListener('input', setColor); setColor(); input { width: 200px; margin: 0.5rem; } <input value="cyan" /> <input readonly="readonly" />
相当简单的一行。用逗号分隔rgb,忽略非数字,转换为十六进制,填充0,并以hashbang结束。
Var yellow = 'rgb(255,255,0)'; Var rgb2hex = STR => "#"+ STR .split(',')。map(s => (s.replace(/\D/g, ")|0). tostring(16))。Map (s => s.length < 2 ?"0"+s: s).join("); console.log (rgb2hex(黄色));
结合使用匿名函数和数组。地图为清洁工;更流线型的外观。
var write=function(str){document.body.innerHTML=JSON.stringify(str,null,' ');}; function hexToRgb(hex, asObj) { return (function(res) { return res == null ? null : (function(parts) { return !asObj ? parts : { r : parts[0], g : parts[1], b : parts[2] } }(res.slice(1,4).map(function(val) { return parseInt(val, 16); }))); }(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex))); } function rgbToHex(r, g, b) { return (function(values) { return '#' + values.map(function(intVal) { return (function(hexVal) { return hexVal.length == 1 ? "0" + hexVal : hexVal; }(intVal.toString(16))); }).join(''); }(arguments.length === 1 ? Array.isArray(r) ? r : [r.r, r.g, r.b] : [r, g, b])) } // Prints: { r: 255, g: 127, b: 92 } write(hexToRgb(rgbToHex(hexToRgb(rgbToHex(255, 127, 92), true)), true)); body{font-family:monospace;white-space:pre}