RGB转十六进制和十六进制转RGB
如何将 RGB 格式的颜色转换为十六进制格式，反之亦然？
例如，将 '#0080C0' 转换为 (0, 128, 192)。
注意：两个版本的 rgbToHex 都需要 r、g 和 b 的整数值，因此如果您有非整数值，您需要自己进行舍入。
以下将对 RGB 到十六进制的转换执行并添加任何所需的零填充：
函数 componentToHex(c) { var hex = c.toString(16);返回 hex.length == 1 ？ “0”+十六进制：十六进制； } function rgbToHex(r, g, b) { return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); } alert(rgbToHex(0, 51, 255)); // #0033ff
换一种方式：
函数 hexToRgb(hex) { var 结果 = /^#?([af\d]{2})([af\d]{2})([af\d]{2})$/i.exec(hex );返回结果？ { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null; } alert(hexToRgb("#0033ff").g); // "51";
最后，@casablanca's answer 中讨论并在@cwolves 的评论中建议的 rgbToHex() 的替代版本：
function rgbToHex(r, g, b) { return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); } alert(rgbToHex(0, 51, 255)); // #0033ff
2012 年 12 月 3 日更新
这是 hexToRgb() 的一个版本，它也解析一个速记十六进制三元组，例如“#03F”：
function hexToRgb(hex) { // 将速记形式（例如“03F”）扩展为完整形式（例如“0033FF”） var shorthandRegex = /^#?([af\d])([af\d])([af \d])$/i; hex = hex.replace(shorthandRegex, function(m, r, g, b) { return r + r + g + g + b + b; }); var 结果 = /^#?([af\d]{2})([af\d]{2})([af\d]{2})$/i.exec(hex);返回结果？ { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null; } alert(hexToRgb("#0033ff").g); // "51";警报（hexToRgb（“#03f”）.g）； // "51";
hexToRgb 的替代版本：
function hexToRgb(hex) {
var bigint = parseInt(hex, 16);
var r = (bigint >> 16) & 255;
var g = (bigint >> 8) & 255;
var b = bigint & 255;
return r + "," + g + "," + b;
}
编辑：2017 年 3 月 28 日这是另一种似乎更快的方法
function hexToRgbNew(hex) {
var arrBuff = new ArrayBuffer(4);
var vw = new DataView(arrBuff);
vw.setUint32(0,parseInt(hex, 16),false);
var arrByte = new Uint8Array(arrBuff);
return arrByte[1] + "," + arrByte[2] + "," + arrByte[3];
}
编辑：2017 年 8 月 11 日以上经过更多测试后的新方法并不快 :(。虽然它是一种有趣的替代方法。
return [r, g, b].join();。
return [(bigint = parseInt(hex, 16)) >> 16 & 255, bigint >> 8 & 255, bigint & 255].join();
parseInt 之前删除非十六进制字符（如前导 #）：hex = hex.replace(/[^0-9A-F]/gi, '');
Tim Down 答案的 ECMAScript 6 版本
将RGB转换为十六进制
const rgbToHex = (r, g, b) => '#' + [r, g, b].map(x => { const hex = x.toString(16) return hex.length === 1 ? '0 ' + hex : hex }).join('') console.log(rgbToHex(0, 51, 255)); // '#0033ff'
将十六进制转换为 RGB
返回一个数组 [r, g, b]。也适用于速记十六进制三元组，例如 "#03F"。
const hexToRgb = hex => hex.replace(/^#?([af\d])([af\d])([af\d])$/i ,(m, r, g, b) => '#' + r + r + g + g + b + b) .substring(1).match(/.{2}/g) .map(x => parseInt(x, 16)) console.log(hexToRgb ("#0033ff")) // [0, 51, 255] console.log(hexToRgb("#03f")) // [0, 51, 255]
奖励：使用 padStart() 方法将 RGB 转换为十六进制
const rgbToHex = (r, g, b) => '#' + [r, g, b] .map(x => x.toString(16).padStart(2, '0')).join('' ) console.log(rgbToHex(0, 51, 255)); // '#0033ff'
请注意，此答案使用最新的 ECMAScript 功能，旧版浏览器不支持这些功能。如果您希望此代码在所有环境中工作，您应该使用 Babel 来编译您的代码。
.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(m, r, g, b) => '#' + r + r + g + g + b + b) 变为：.replace(/^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])$/i,(m, r, g, b, a) => '#' + r + r + g + g + b + b + a + a) 但是有没有办法使正则表达式与 RGBA 的 A 作为可选的第 4 个十六进制值一起工作？这绝对会完成功能，使一个正则表达式与十六进制 RGB 和 RGBA 一起工作。否则它是两个正则表达式，一个有 3 个值，另一个有 4 个。您必须将第 4 个值除以 255 才能获得 rgba() 的第 4 个参数。
const rgbToHex = (rgb) => { const rgbExcludeFirst = rgb.split('rgb(')[1]; const rgbExcludeLast = rgbExcludeFirst.split(')')[0]; const rgbValueArray = rgbExcludeLast.split(','); return `#${rgbValueArray.map((x) => { const valAsInt = parseInt(x, 10); const hex = valAsInt.toString(16); return hex.length === 1 ? `0${hex}` : hex; }).join('')}`; }; 如果你想传入一个 RGB 字符串
这是我的版本：
function rgbToHex(red, green, blue) {
const rgb = (red << 16) | (green << 8) | (blue << 0);
return '#' + (0x1000000 + rgb).toString(16).slice(1);
}
function hexToRgb(hex) {
const normal = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
if (normal) return normal.slice(1).map(e => parseInt(e, 16));
const shorthand = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i);
if (shorthand) return shorthand.slice(1).map(e => 0x11 * parseInt(e, 16));
return null;
}
rgb2hex 方法有点困惑。为什么要在 rgb 中添加 0x1000000，为什么最后需要调用 .slice(1)？
function hex2rgb(hex) {
return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}
r、g、b 的对象之外，这也是一样的：function hex2rgb(hex){return{r:'0x'+hex[1]+hex[2]|0,g:'0x'+hex[3]+hex[4]|0,b:'0x'+hex[5]+hex[6]|0}}
我假设您的意思是 HTML 样式的十六进制表示法，即 #rrggbb。您的代码几乎是正确的，只是您的顺序颠倒了。它应该是：
var decColor = red * 65536 + green * 256 + blue;
此外，使用位移可能会使它更容易阅读：
var decColor = (red << 16) + (green << 8) + blue;
var decColor = (red < 16 ? '0' : '') + (red << 16) + (green << 8) + blue;
red < 16 您需要在最终结果前加上 0 前缀。
var hexColor = ((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).substr(1);
单行功能 HEX 转 RGBA
支持短 #fff 和长 #ffffff 形式。
支持 alpha 通道（不透明度）。
不关心是否指定了散列，在这两种情况下都有效。
function hexToRGBA(hex, opacity) {
return 'rgba(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16) }).concat(isFinite(opacity) ? opacity : 1).join(',') + ')';
}
例子：
hexToRGBA('#fff') -> rgba(255,255,255,1)
hexToRGBA('#ffffff') -> rgba(255,255,255,1)
hexToRGBA('#fff', .2) -> rgba(255,255,255,0.2)
hexToRGBA('#ffffff', .2) -> rgba(255,255,255,0.2)
hexToRGBA('fff', .2) -> rgba(255,255,255,0.2)
hexToRGBA('ffffff', .2) -> rgba(255,255,255,0.2)
hexToRGBA('#ffffff', 0) -> rgba(255,255,255,0)
hexToRGBA('#ffffff', .5) -> rgba(255,255,255,0.5)
hexToRGBA('#ffffff', 1) -> rgba(255,255,255,1)
尝试 (bonus)
let hex2rgb= c=> `rgb(${c.match(/\w\w/g).map(x=>+`0x${x}`)})`
let rgb2hex=c=>'#'+c.match(/\d+/g).map(x=>(+x).toString(16).padStart(2,0)).join``
让 hex2rgb= c=> `rgb(${c.match(/\w\w/g).map(x=>+`0x${x}`)})`; let rgb2hex= c=> '#'+c.match(/\d+/g).map(x=>(+x).toString(16).padStart(2,0)).join``; // 测试 console.log('#0080C0 -->', hex2rgb('#0080C0')); console.log('rgb(0, 128, 192) -->', rgb2hex('rgb(0, 128, 192)'));
let rgb = color.match(/\w\w/g).map(x=>+`0x${x}`); let lum = (rgb[0]*0.299 + rgb[1]*0.587 + rgb[2]*0.114) / 256; lum > 0.5 是浅色/亮色
此代码接受 #fff 和 #ffffff 变体和不透明度。
function hex2rgb(hex, opacity) {
var h=hex.replace('#', '');
h = h.match(new RegExp('(.{'+h.length/3+'})', 'g'));
for(var i=0; i<h.length; i++)
h[i] = parseInt(h[i].length==1? h[i]+h[i]:h[i], 16);
if (typeof opacity != 'undefined') h.push(opacity);
return 'rgba('+h.join(',')+')';
}
按位解决方案通常很奇怪。但在这种情况下，我想这更优雅😄
function hexToRGB(hexColor){
return {
red: (hexColor >> 16) & 0xFF,
green: (hexColor >> 8) & 0xFF,
blue: hexColor & 0xFF,
}
}
用法：
const {red, green, blue } = hexToRGB(0xFF00FF)
console.log(red) // 255
console.log(green) // 0
console.log(blue) // 255
（2017）简单的 ES6 可组合箭头函数
我忍不住分享给那些可能正在使用 ES6 编写一些现代函数式/组合式 js 的人。这是我在颜色模块中使用的一些光滑的单线，它为数据可视化进行颜色插值。
请注意，这根本不处理 Alpha 通道。
const arrayToRGBString = rgb => `rgb(${rgb.join(',')})`;
const hexToRGBArray = hex => hex.match(/[A-Za-z0-9]{2}/g).map(v => parseInt(v, 16));
const rgbArrayToHex = rgb => `#${rgb.map(v => v.toString(16).padStart(2, '0')).join('')}`;
const rgbStringToArray = rgb => rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).splice(1, 3)
.map(v => Number(v));
const rgbStringToHex = rgb => rgbArrayToHex(rgbStringToArray(rgb));
顺便说一句，如果你喜欢这种风格/语法，我写了一个全彩色模块（现代颜色），你可以从 npm 获取。我做到了，所以我可以使用 prop getter 进行转换并解析几乎任何东西（Color.parse（anything））。如果您像我一样处理颜色，那么值得一看。
这可用于从计算的样式属性中获取颜色：
function rgbToHex(color) {
color = ""+ color;
if (!color || color.indexOf("rgb") < 0) {
return;
}
if (color.charAt(0) == "#") {
return color;
}
var nums = /(.*?)rgb\((\d+),\s*(\d+),\s*(\d+)\)/i.exec(color),
r = parseInt(nums[2], 10).toString(16),
g = parseInt(nums[3], 10).toString(16),
b = parseInt(nums[4], 10).toString(16);
return "#"+ (
(r.length == 1 ? "0"+ r : r) +
(g.length == 1 ? "0"+ g : g) +
(b.length == 1 ? "0"+ b : b)
);
}
// not computed
<div style="color: #4d93bc; border: 1px solid red;">...</div>
// computed
<div style="color: rgb(77, 147, 188); border: 1px solid rgb(255, 0, 0);">...</div>
console.log( rgbToHex(color) ) // #4d93bc
console.log( rgbToHex(borderTopColor) ) // #ff0000
参考：https://github.com/k-gun/so/blob/master/so_util.js
(r.length == 1 ? "0" + r : r) 并且对于绿色和蓝色类似。
十六进制转 RGB
const hex2rgb = (hex) => { const r = parseInt(hex.slice(1, 3), 16) const g = parseInt(hex.slice(3, 5), 16) const b = parseInt(hex.slice( 5, 7), 16) // return {r, g, b} // 返回一个对象 return [ r, g, b ] } console.log(hex2rgb("#0080C0"))
RGB 转十六进制
const rgb2hex = (r, g, b) => { var rgb = (r << 16) | (g << 8) | b // return '#' + rgb.toString(16) // #80c0 // return '#' + (0x1000000 + rgb).toString(16).slice(1) // #0080c0 // 或者使用 [padStart ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart) return '#' + rgb.toString(16).padStart(6, 0) } 控制台.log(rgb2hex(0, 128, 192))
此外，如果有人需要在线工具，我已经构建了 Hex to RGB，反之亦然。
// 忽略 hsl 表示法，颜色值通常表示为名称、rgb、rgba 或 hex-
// 十六进制可以是 3 个值或 6 个。
// Rgb 可以是百分比，也可以是整数值。
// 最好至少考虑所有这些格式。
String.prototype.padZero= function(len, c){
var s= this, c= c || "0", len= len || 2;
while(s.length < len) s= c + s;
return s;
}
var colors={
colornames:{
aqua: '#00ffff', black: '#000000', blue: '#0000ff', fuchsia: '#ff00ff',
gray: '#808080', green: '#008000', lime: '#00ff00', maroon: '#800000',
navy: '#000080', olive: '#808000', purple: '#800080', red: '#ff0000',
silver: '#c0c0c0', teal: '#008080', white: '#ffffff', yellow: '#ffff00'
},
toRgb: function(c){
c= '0x'+colors.toHex(c).substring(1);
c= [(c>> 16)&255, (c>> 8)&255, c&255];
return 'rgb('+c.join(',')+')';
},
toHex: function(c){
var tem, i= 0, c= c? c.toString().toLowerCase(): '';
if(/^#[a-f0-9]{3,6}$/.test(c)){
if(c.length< 7){
var A= c.split('');
c= A[0]+A[1]+A[1]+A[2]+A[2]+A[3]+A[3];
}
return c;
}
if(/^[a-z]+$/.test(c)){
return colors.colornames[c] || '';
}
c= c.match(/\d+(\.\d+)?%?/g) || [];
if(c.length<3) return '';
c= c.slice(0, 3);
while(i< 3){
tem= c[i];
if(tem.indexOf('%')!= -1){
tem= Math.round(parseFloat(tem)*2.55);
}
else tem= parseInt(tem);
if(tem< 0 || tem> 255) c.length= 0;
else c[i++]= tem.toString(16).padZero(2);
}
if(c.length== 3) return '#'+c.join('').toLowerCase();
return '';
}
}
//var c='#dc149c';
//var c='rgb(100%,25%,0)';
//
var c= 'red';
alert(colors.toRgb(c)+'\n'+colors.toHex(c));
你可能会追求这样的事情吗？
function RGB2HTML(red, green, blue)
{
return '#' + red.toString(16) +
green.toString(16) +
blue.toString(16);
}
alert(RGB2HTML(150, 135, 200));
显示 #9687c8
@蒂姆，添加到您的答案中（将其放入评论中有点尴尬）。
如所写，我发现 rgbToHex 函数返回一个字符串，该字符串包含点后的元素，它要求 r、g、b 值在 0-255 范围内。
我敢肯定这对大多数人来说似乎很明显，但我花了两个小时才弄清楚，到那时，在我意识到我的问题出在其他地方之前，原始方法已经膨胀到 7 行。因此，为了节省其他人的时间和麻烦，这是我稍作修改的代码，它检查先决条件并修剪掉字符串的无关位。
function rgbToHex(r, g, b) {
if(r < 0 || r > 255) alert("r is out of bounds; "+r);
if(g < 0 || g > 255) alert("g is out of bounds; "+g);
if(b < 0 || b > 255) alert("b is out of bounds; "+b);
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1,7);
}
如果您需要比较两个颜色值（以 RGB、名称颜色或十六进制值给出）或转换为十六进制，请使用 HTML5 画布对象。
var canvas = document.createElement("canvas");
var ctx = this.canvas.getContext('2d');
ctx.fillStyle = "rgb(pass,some,value)";
var temp = ctx.fillStyle;
ctx.fillStyle = "someColor";
alert(ctx.fillStyle == temp);
2021版
您可以简单地使用 rgb-hex & hex-rgb 因为它是经过实战考验的 &具有其他解决方案中没有的多个选项。
我最近正在构建一个颜色选择器，这两个包派上了用场。
用法
RGB-十六进制
import rgbHex from 'rgb-hex';
rgbHex(65, 131, 196);
//=> '4183c4'
rgbHex('rgb(40, 42, 54)');
//=> '282a36'
rgbHex(65, 131, 196, 0.2);
//=> '4183c433'
rgbHex(40, 42, 54, '75%');
//=> '282a36bf'
rgbHex('rgba(40, 42, 54, 75%)');
//=> '282a36bf'
十六进制-RGB
import hexRgb from 'hex-rgb';
hexRgb('4183c4');
//=> {red: 65, green: 131, blue: 196, alpha: 1}
hexRgb('#4183c4');
//=> {red: 65, green: 131, blue: 196, alpha: 1}
hexRgb('#fff');
//=> {red: 255, green: 255, blue: 255, alpha: 1}
hexRgb('#22222299');
//=> {red: 34, green: 34, blue: 34, alpha: 0.6}
hexRgb('#0006');
//=> {red: 0, green: 0, blue: 0, alpha: 0.4}
hexRgb('#cd2222cc');
//=> {red: 205, green: 34, blue: 34, alpha: 0.8}
hexRgb('#cd2222cc', {format: 'array'});
//=> [205, 34, 34, 0.8]
hexRgb('#cd2222cc', {format: 'css'});
//=> 'rgb(205 34 34 / 80%)'
hexRgb('#000', {format: 'css'});
//=> 'rgb(0 0 0)'
hexRgb('#22222299', {alpha: 1});
//=> {red: 34, green: 34, blue: 34, alpha: 1}
hexRgb('#fff', {alpha: 0.5});
//=> {red: 255, green: 255, blue: 255, alpha: 0.5}
接受字符串的速记版本：
函数 rgbToHex(a){ a=a.replace(/[^\d,]/g,"").split(",");返回"#"+((1<<24)+(+a[0]<<16)+(+a[1]<<8)+ +a[2]).toString(16).slice(1 ) } document.write(rgbToHex("rgb(255,255,255)"));
检查它是否还不是十六进制
函数 rgbToHex(a){ if(~a.indexOf("#"))return a; a=a.replace(/[^\d,]/g,"").split(",");返回"#"+((1<<24)+(+a[0]<<16)+(+a[1]<<8)+ +a[2]).toString(16).slice(1 ) } document.write("rgb: "+rgbToHex("rgb(255,255,255)")+ " -- 十六进制: "+rgbToHex("#e2e2e2"));
我需要一个接受无效值的函数，比如
RGB(-255, 255, 255) RGB(510, 255, 255)
这是@cwolves 答案的衍生
function rgb(r, g, b) {
this.c = this.c || function (n) {
return Math.max(Math.min(n, 255), 0)
};
return ((1 << 24) + (this.c(r) << 16) + (this.c(g) << 8) + this.c(b)).toString(16).slice(1).toUpperCase();
}
R = HexToR("#FFFFFF");
G = HexToG("#FFFFFF");
B = HexToB("#FFFFFF");
function HexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
function HexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
function HexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}
使用这些功能可以毫无问题地获得结果。 :)
我建议使用经过良好测试和维护的库：Colors.js（适用于 node.js 和浏览器），而不是到处复制粘贴片段。它只有 7 KB（缩小，压缩甚至更少）。
我遇到了这个问题，因为我想解析任何颜色字符串值并能够指定不透明度，所以我编写了这个使用 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');画布.宽度 = 1;画布.高度 = 1;返回函数（颜色）{ context.fillStyle = 颜色； context.fillRect(0, 0, 1, 1); var data = context.getImageData(0, 0, 1, 1).data;返回{ r：数据[0]，g：数据[1]，b：数据[2]，a：数据[3]}； }; }(); var 输入 = document.getElementsByTagName('input');函数 setColor() { 输入[1].value = JSON.stringify(toRGBA(inputs[0].value)); document.body.style.backgroundColor = 输入[0].value; } 输入[0].addEventListener('input', setColor);设置颜色（）；输入{宽度：200px；保证金：0.5rem； }
将RGB转换为十六进制的简单答案。这里颜色通道的值被限制在 0 到 255 之间。
function RGBToHex(r = 0, g = 0, b = 0) {
// clamp and convert to hex
let hr = Math.max(0, Math.min(255, Math.round(r))).toString(16);
let hg = Math.max(0, Math.min(255, Math.round(g))).toString(16);
let hb = Math.max(0, Math.min(255, Math.round(b))).toString(16);
return "#" +
(hr.length<2?"0":"") + hr +
(hg.length<2?"0":"") + hg +
(hb.length<2?"0":"") + hb;
}
虽然这个答案不太可能完全适合这个问题，但它可能仍然非常有用。
创建任意随机元素
var toRgb = document.createElement('div');
将任何有效样式设置为要转换的颜色
toRg.style.color = "hsl(120, 60%, 70%)";
再次调用样式属性
> toRgb.style.color;
< "rgb(133, 225, 133)" 您的颜色已转换为 Rgb
适用于：Hsl，十六进制
不适用于：命名颜色
我的 hex2rbg 版本：
接受像 #fff 算法紧凑度为 o(n) 这样的短十六进制，应该比使用正则表达式更快。例如 String.replace、String.split、String.match 等。使用常量空间。支持rgb和rgba。
如果您使用的是 IE8，您可能需要删除 hex.trim()。
例如
hex2rgb('#fff') //rgb(255,255,255)
hex2rgb('#fff', 1) //rgba(255,255,255,1)
hex2rgb('#ffffff') //rgb(255,255,255)
hex2rgb('#ffffff', 1) //rgba(255,255,255,1)
代码：
function hex2rgb (hex, opacity) {
hex = hex.trim();
hex = hex[0] === '#' ? hex.substr(1) : hex;
var bigint = parseInt(hex, 16), h = [];
if (hex.length === 3) {
h.push((bigint >> 4) & 255);
h.push((bigint >> 2) & 255);
} else {
h.push((bigint >> 16) & 255);
h.push((bigint >> 8) & 255);
}
h.push(bigint & 255);
if (arguments.length === 2) {
h.push(opacity);
return 'rgba('+h.join()+')';
} else {
return 'rgb('+h.join()+')';
}
}
h.join(',') 与 h.join() 相同。
此代码段将 hex 转换为 rgb 并将 rgb 转换为 hex。
function hexToRgb(str) {
if ( /^#([0-9a-f]{3}|[0-9a-f]{6})$/ig.test(str) ) {
var hex = str.substr(1);
hex = hex.length == 3 ? hex.replace(/(.)/g, '$1$1') : hex;
var rgb = parseInt(hex, 16);
return 'rgb(' + [(rgb >> 16) & 255, (rgb >> 8) & 255, rgb & 255].join(',') + ')';
}
return false;
}
function rgbToHex(red, green, blue) {
var out = '#';
for (var i = 0; i < 3; ++i) {
var n = typeof arguments[i] == 'number' ? arguments[i] : parseInt(arguments[i]);
if (isNaN(n) || n < 0 || n > 255) {
return false;
}
out += (n < 16 ? '0' : '') + n.toString(16);
}
return out
}
2022：如果你经常操纵颜色并且不介意使用包装，
使用 tinycolor2。这是一个用于 JavaScript 中颜色操作和转换的快速库（大约 400kb）。
它接受各种颜色字符串格式。喜欢：
tinycolor("#000"); // Hex3
tinycolor("#f0f0f6"); // Hex6
tinycolor("#f0f0f688"); // Hex8
tinycolor("f0f0f6"); // Hex withouth the number sign '#'
tinycolor("rgb (255, 0, 0)"); // RGB
tinycolor("rgba (255, 0, 0, .5)"); // RGBA
tinycolor({ r: 255, g: 0, b: 0 }); // RGB object
tinycolor("hsl(0, 100%, 50%)"); // HSL
tinycolor("hsla(0, 100%, 50%, .5)"); // HSLA
tinycolor("red"); // Named
RGB 转十六进制
var color = tinycolor('rgb(0, 128, 192)');
color.toHexString(); //#0080C0
十六进制转 RGB
var color = tinycolor('#0080C0');
color.toRgbString(); // rgb(0, 128, 192)
访问 documentation 以获取更多演示。
看起来你正在寻找这样的东西：
function hexstr(number) {
var chars = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f");
var low = number & 0xf;
var high = (number >> 4) & 0xf;
return "" + chars[high] + chars[low];
}
function rgb2hex(r, g, b) {
return "#" + hexstr(r) + hexstr(g) + hexstr(b);
}
我正在使用十六进制格式为#AARRGGBB（Alpha、Red、Green、Blue）的 XAML 数据。使用上面的答案，这是我的解决方案：
function hexToRgba(hex) {
var bigint, r, g, b, a;
//Remove # character
var re = /^#?/;
var aRgb = hex.replace(re, '');
bigint = parseInt(aRgb, 16);
//If in #FFF format
if (aRgb.length == 3) {
r = (bigint >> 4) & 255;
g = (bigint >> 2) & 255;
b = bigint & 255;
return "rgba(" + r + "," + g + "," + b + ",1)";
}
//If in #RRGGBB format
if (aRgb.length >= 6) {
r = (bigint >> 16) & 255;
g = (bigint >> 8) & 255;
b = bigint & 255;
var rgb = r + "," + g + "," + b;
//If in #AARRBBGG format
if (aRgb.length == 8) {
a = ((bigint >> 24) & 255) / 255;
return "rgba(" + rgb + "," + a.toFixed(1) + ")";
}
}
return "rgba(" + rgb + ",1)";
}
关注公众号
不定期副业成功案例分享
<<是按位左移运算符。假设g是一个非零整数，g << 8因此有效地将g乘以 256，在其十六进制表示的末尾添加零。同样，r << 16添加 4 个零。添加1 << 24（十六进制中的 1000000）可确保在使用slice()去除前导1后，用任何必需的零填充十六进制表示。例如，如果r和g均为零且b为 51，则((r << 16) + (g << 8) + b).toString(16)将返回字符串“33”；添加1 << 24并得到“1000033”。然后去掉1，你就在那里。(r << 16)）会在大端和小端计算机上给出相同的结果吗？编辑：它没有。原因如下：stackoverflow.com/questions/1041554/…rgbToHex函数。有人会想要将传递的 rgb 值类型转换为整数，或者稍微修改 rgbToHex 函数。示例：jsfiddle.net/cydqo6wj 当前：return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);已修改：return "#" + ((1 << 24) + ((+r) << 16) + ((+g) << 8) + (+b)).toString(16).slice(1);在修改后的版本中，我只是强制 rgb 值在转换为 16/hex 之前以整数计算。r、g和b对应于捕获组，这是我们真正想要的东西。