Javascript RGB到十六进制和十六进制到RGB

如何将RGB格式的颜色转换为十六进制格式，反之亦然

---

例如，将

'#0080C0'

转换为

（0，128，192）

我假设您指的是HTML样式的十六进制表示法，即

#rrggbb

。你的代码几乎是正确的，只是顺序颠倒了。应该是：

var decColor = red * 65536 + green * 256 + blue;

此外，使用位移位可能会使其更易于读取：

var decColor = (red << 16) + (green << 8) + blue;

---

var decColor=（red您可能想要这样的东西吗

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
的整数值，因此，如果有非整数值，则需要进行自己的四舍五入

下面将对RGB到十六进制的转换执行操作，并添加任何所需的零填充：


函数组件到十六进制（c）{
var hex=c.toString（16）；
返回十六进制长度==1？“0”+十六进制：十六进制；
}
函数rgbToHex（r、g、b）{
返回“#”+组件到十六进制（r）+组件到十六进制（g）+组件到十六进制（b）；
}
警报（rgbToHex（0，51，255））；//#0033ff
//忽略hsl符号，颜色值通常表示为名称、rgb、rgba或十六进制-

//十六进制可以是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));

String.prototype.padZero=函数（len，c）{
var s=this，c=c | | |“0”，len=len | | 2；
而（s.长度>16）&255，（c>>8）&255，c&255]；
返回'rgb（'+c.join（'，'）+'）；
},
toHex：函数（c）{
变量tem，i=0，c=c？c.toString（）.toLowerCase（）：“”；
if（/^#[a-f0-9]{3,6}$/.test（c））{
如果（c.长度<7）{
var A=c.分割（“”）；
c=A[0]+A[1]+A[1]+A[2]+A[2]+A[3]+A[3]；
}
返回c；
}
如果（/^[a-z]+$/.test（c））{
返回颜色。颜色名称[c]| |“”；
}
c=c.match（/\d+（\.\d+？%？/g）| |[]；
如果（c.length 255）c.length=0；
else c[i++]=tem.toString（16）.padZero（2）；
}
if（c.length==3）返回“#”+c.join（“”）.toLowerCase（）；
返回“”；
}
}
//变量c=#dc149c'；
//var c='rgb（100%，25%，0）'；
//
变量c=‘红色’；
警报（colors.toRgb（c）+'\n'+colors.toHex（c））；
对于3位hexToRgb，Tim Down功能可以改进如下：

var hex2Rgb = function(hex){
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})|([a-f\d]{1})([a-f\d]{1})([a-f\d]{1})$/i.exec(hex);
  return result ? {        
    r: parseInt(hex.length <= 4 ? result[4]+result[4] : result[1], 16),
    g: parseInt(hex.length <= 4 ? result[5]+result[5] : result[2], 16),
    b: parseInt(hex.length <= 4 ? result[6]+result[6] : result[3], 16),
    toString: function() {
      var arr = [];
      arr.push(this.r);
      arr.push(this.g);
      arr.push(this.b);
      return "rgb(" + arr.join(",") + ")";
    }
  } : null;
};

var hex2Rgb=函数（十六进制）{
var result=/^#？（[a-f\d]{2}）（[a-f\d]{2}）（[a-f\d]{2}）（[a-f\d]{1}）（[a-f\d]{1}）（[a-f\d]{1}）$/i.exec（十六进制）；
返回结果？{
r:parseInt（hex.lengthhexToRgb的替代版本：

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日
这是另一种似乎更快的方法

编辑：8/11/2017
经过更多测试后，上述新方法并没有更快：（。尽管这是一种有趣的替代方法。
此代码接受#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(',')+')';
}

函数hex2rgb（十六进制，不透明度）{
var h=十六进制替换（'#'，''）；
h=h.match（新的RegExp（'（.{'+h.length/3+'}'），'g'）；
对于（var i=0；i如果需要比较两个颜色值（以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);

@蒂姆，补充一下你的答案（在评论中加入这一点有点尴尬）

如前所述，我发现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);
}

函数rgbToHex（r，g，b）{
如果（r<0 | | r>255）警报（“r超出边界；”+r）；
如果（g<0 | | g>255）警报（“g超出边界；”+g）；
如果（b<0 | | b>255）警报（“b超出边界；”+b）；
返回“#”+（（1这可用于从计算的样式属性获取颜色：

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

功能rgbToHex（彩色）{
color=”“+颜色；
如果（！color | | color.indexOf（“rgb”）<0）{
返回；
}
if（color.charAt（0）=“#”）{
返回颜色；
}
var nums=/（.*）rgb\（\d+）\s*（\d+）\s*（\d+）/i.exec（颜色），
r=parseInt（nums[2]，10）.toString（16），
g=parseInt（nums[3]，10）.toString（16），
b=parseInt（nums[4]，10）.toString（16）；
返回“#”+(
（r.长度==1？“0”+r:r）+
（g.长度==1？“0”+g:g）+
（b.长度==1？“0”+b:b）
);
}
//未计算
... 
//计算
...
控制台日志（rgbToHex（颜色））/#4d93bc
console.log（rgbToHex（borderTopColor））/#ff0000

参考：
此代码段将十六进制转换为rgb，并将rgb转换为十六进制


函数hexToRgb（str）{
如果（/^#（[0-9a-f]{3}}[0-9a-f]{6}）$/ig.test（str））{
var hex=str.substr（1）；
十六进制=十六进制。长度==3？十六进制。替换（/（）/g，$1$1'）：十六进制；
var rgb=parseInt（十六进制，16）；
返回'rgb（'+[（rgb>>16）&255，（rgb>>8）&255，rgb&255]。join（'，'）+'）；
} 
返回false；
}
功能rgbToHex（红、绿、蓝）{
var out='#'；
对于（变量i=0；i<3；++i）{
变量n=参数类型[i]=“number”？参数[i]：parseInt（参数[i]）；
如果（isNaN（n）| n<0 | n>255）{
返回false；
}
out+=（n<16？'0'：''）+n.toString（16）；
}
返回
}
我从一开始就遇到了这个问题
function hex2rgb(hex) {
  return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}

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

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
}

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

function rgb_to_hex(red, green, blue) {
  const rgb = (red << 16) | (green << 8) | (blue << 0);
  return '#' + (0x1000000 + rgb).toString(16).slice(1);
}

function hex_to_rgb(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;
}

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}

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

  function rgbToHex(color) {
    var bg = color.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
      return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return     "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
  }

  rgbToHex($('.col-tab-bar .col-tab span').css('color'))

function getRGB(color){
  if(color.length == 7){
    var r = parseInt(color.substr(1,2),16);
    var g = parseInt(color.substr(3,2),16);
    var b = parseInt(color.substr(5,2),16);    
    return 'rgb('+r+','+g+','+b+')' ;
  }    
  else
    console.log('Enter correct value');
}
var a = getRGB('#f0f0f0');
if(!a){
 a = 'Enter correct value'; 
}

a;

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()+')';
    }
}

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)

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

let hex2rgb= c=> `rgb(${c.substr(1).match(/../g).map(x=>+`0x${x}`)})`;
let rgb2hex= c=>'#'+c.match(/\d+/g).map(x=>(+x).toString(16).padStart(2,0)).join``

    function rgbtohex(r,g,b){
        return "#" + (Math.round(r) * 65536 + Math.round(g) * 256 + Math.round(b)).toString(16));
    }

<!DOCTYPE html>
<html>
<body>

<p id="res"></p>

<script>
function hexToRgb(hex) {
  var res = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return "(" + parseInt(res[1], 16) + "," + parseInt(res[2], 16) + "," + parseInt(res[3], 16) + ")";
};

document.getElementById("res").innerHTML = hexToRgb('#0080C0');
</script>

</body>
</html>