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


555

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

例如,转换'#0080C0'(0, 128, 192)

Answers:


1234

:这两个版本的rgbToHex期待整数值rg并且b,所以你需要,如果你有非整数值做自己的舍入。

以下将执行RGB到十六进制的转换,并添加任何所需的零填充:

function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

alert(rgbToHex(0, 51, 255)); // #0033ff

转换另一种方式:

function hexToRgb(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

alert(hexToRgb("#0033ff").g); // "51";

最后,在@casablanca 的答案中rgbToHex()讨论并在@cwolves的评论中建议使用的替代版本:

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) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

alert(hexToRgb("#0033ff").g); // "51";
alert(hexToRgb("#03f").g); // "51";


10
@ Vitim.us:<<是按位左移运算符。假定g是一个非零整数,g << 8因此有效乘以g256,并在其十六进制表示的末尾加零。同样r << 16添加4个零。加法1 << 24(十六进制为1000000)可确保一旦1使用剥离了前导,则十六进制表示将被填充任何所需的零slice()。例如,如果rg都为零且b为51,((r << 16) + (g << 8) + b).toString(16)则将返回字符串“ 33”;添加1 << 24,您将获得“ 1000033”。然后剥离1,您就在那里。
Tim Down'7

(r << 16)大端字节计算机和小端字节计算机上,移位(例如)都会得到相同的结果吗?编辑:没有。原因如下:stackoverflow.com/questions/1041554/…–
WoodenKitty

@Gothdo:抱歉,回滚您的编辑,但是使用ES6通常是不可能或不实际的。以前的版本可以在任何地方使用。
Tim Down

3
您的rgbToHex不起作用。得到有趣的结果:#f55b2f00
TheCrazyProfessor

1
关于最新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。
user2977468

147

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];
}

编辑:8/11/2017经过更多测试后,上述新方法并不快:(。虽然这是一种有趣的替代方法。


57
一条完美的线:return [r, g, b].join();
Pavlo

5
或采用全密封单缸解决方案:return [(bigint = parseInt(hex, 16)) >> 16 & 255, bigint >> 8 & 255, bigint & 255].join();
冥王星

12
#parseInthex = hex.replace(/[^0-9A-F]/gi, '');
正在进行

5
不要那么快地使用速记版本。JSPerf显示此答案中的那个最快:jsperf.com/2014-09-16-hex-to-rgb
Olav Kokovkin 2015年

1
请注意,它的输出不可靠。它使接近黑色的颜色显示为深粉红色。最好从头开始使用该功能。
Maciej Krawczyk

64

ECMAScript 6版本 Tim Down的答案

将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(/^#?([a-f\d])([a-f\d])([a-f\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编译代码。


hexToRgb()易于调整以处理4位和8位十六进制RGBA表示法:.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)但是,有没有办法使regexp与RGBA的A作为可选的第4个十六进制值一起使用?这样就完全可以完成功能了,使十六进制RGB和RGBA可以使用一个正则表达式。否则,它是两个正则表达式,一个具有3个值,另一个具有4个值。必须将第4个值除以255,以获得rgba()的第4个arg。
jamess

44

这是我的版本:

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

  function hex2rgb(hex) {
        // long version
        r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
        if (r) {
                return r.slice(1,4).map(function(x) { return parseInt(x, 16); });
        }
        // short version
        r = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i);
        if (r) {
                return r.slice(1,4).map(function(x) { return 0x11 * parseInt(x, 16); });
        }
        return null;
  }

很酷,但问题是hex2rgb。您能做到这么短就可以了吗:)
K. Kilian Lindberg 2014年

4
尽管这不是双向的,但我必须对此表示反对,因为出于某种原因,这个问题中的其他rgb到hex解决方案对我来说不起作用。

问题首先来自rgb2hex。无论如何,我添加了自己的hex2rgb。
FelipeC

对该rgb2hex方法有些困惑。为什么要添加0x1000000rgb,以及为什么.slice(1)最后需要致电?
hackjutsu

因为蓝色将是#FF,所以我们添加0x1000000,所以它是#10000FF,然后删除第一个“ 1”。
FelipeC

26

我假设您的意思是HTML样式的十六进制表示法,即#rrggbb。您的代码几乎是正确的,除了顺序相反。它应该是:

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

另外,使用移位可以使其更容易阅读:

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

很好,但是如果red <16,您需要将其零填充到6个字符:var decColor = (red < 16 ? '0' : '') + (red << 16) + (green << 8) + blue;
Mark Kahn

似乎可行,除了:(0,128,192)可能是因为0?
Sindar

@cwolves:你是对的,我想念那件事。但应将其附加到最终字符串,而不是整数。
casablanca

@Sindar:如果red < 16需要0在最终结果前加上a ,请参见@cwolves的评论。
casablanca

19
好的,这里:var hexColor = ((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).substr(1);
马克·卡恩

22
function hex2rgb(hex) {
  return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}

2
我喜欢简单的答案
Bjorn Behrendt

巫术!您应该为这个非常酷的单缸飞机添加解释。
James Harrington

真好!下面是同样的事情,除了微细化以及返回与属性的对象rgbfunction hex2rgb(hex){return{r:'0x'+hex[1]+hex[2]|0,g:'0x'+hex[3]+hex[4]|0,b:'0x'+hex[5]+hex[6]|0}}
ashleedawg

21

此代码接受#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(',')+')';
}

11

一线功能十六进制到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(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)  

8
尝试编写易于阅读的代码,而不是单行代码。无论如何,如果您在生产前缩小代码,就没有任何好处。
Roko C. Buljan

11

这可用于从计算的样式属性获取颜色:

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)并且对于绿色和蓝色同样如此。
typhon

7

按位解决方案通常很奇怪。但是在这种情况下,我想那会更优雅

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

6

//忽略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));

为此,我推荐了最全面的版本。如果它也可以从rgba中提取颜色,那将是很棒的。
Michael Scheper,2015年

6

@ Tim,添加到您的答案中(将其添加为注释有点尴尬)。

如所写,我发现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);
}

5

(2017)SIMPLE 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));

5

尝试

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``


4

如果需要比较两个颜色值(指定为RGB,名称颜色或十六进制值)或转换为十六进制,请使用HTML5 canvas对象。

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

3

你可以追随这样的事情吗?

function RGB2HTML(red, green, blue)
{
    return '#' + red.toString(16) +
           green.toString(16) +
           blue.toString(16);
}

alert(RGB2HTML(150, 135, 200));

显示#9687c8


1
> RGB2HTML> 2HTML> TO HTML(ಠʖ̯ಠ)HEX是不相关的HTML
ДаниилПронин

3

对于三位数的Tim Down的hexToRgb功能可以改进如下:

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

2

我遇到了这个问题,因为我想接受任何颜色值并能够添加不透明度,因此我制作了这个快速的jQuery插件,该插件在现代浏览器上使用了本机画布。看起来工作很好。

编辑

事实证明,我不知道如何使它成为一个合适的jQuery插件,因此我将其作为常规函数呈现。

//accepts any value like '#ffffff', 'rgba(255,255,255,1)', 'hsl(0,100%,100%)', or 'white'
function toRGBA( c ) {
    var
        can  = document.createElement( 'canvas' ),
        ctx  = can.getContext( '2d' );
    can.width = can.height = 1;
    ctx.fillStyle = c;
    console.log( ctx.fillStyle ); //always css 6 digit hex color string, e.g. '#ffffff'
    ctx.fillRect( 0, 0, 1, 1 ); //paint the canvas
    var
        img  = ctx.getImageData( 0, 0, 1, 1 ),
        data = img.data,
        rgba = {
            r: data[ 0 ], //0-255 red
            g: data[ 1 ], //0-255 green
            b: data[ 2 ], //0-255 blue
            a: data[ 3 ]  //0-255 opacity (0 being transparent, 255 being opaque)
        };
    return rgba;
};

2

我需要一个也接受无效值的函数

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

2
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}

使用这些功能可以毫无问题地获得结果。:)


2

接受字符串的速记版本:

function rgbToHex(a){
  a=a.replace(/[^\d,]/g,"").split(","); 
  return"#"+((1<<24)+(+a[0]<<16)+(+a[1]<<8)+ +a[2]).toString(16).slice(1)
}

document.write(rgbToHex("rgb(255,255,255)"));

检查它是否还不是十六进制

function rgbToHex(a){
  if(~a.indexOf("#"))return a;
  a=a.replace(/[^\d,]/g,"").split(","); 
  return"#"+((1<<24)+(+a[0]<<16)+(+a[1]<<8)+ +a[2]).toString(16).slice(1)
}

document.write("rgb: "+rgbToHex("rgb(255,255,255)")+ " -- hex: "+rgbToHex("#e2e2e2"));


2

尽管此答案不太可能完全适合该问题,但它可能仍然非常有用。

  1. 创建任何随机元素

var toRgb = document.createElement('div');

  1. 将任何有效样式设置为要转换的颜色

toRg.style.color = "hsl(120, 60%, 70%)";

  1. 再次调用样式属性

> toRgb.style.color;

< "rgb(133, 225, 133)" 您的颜色已转换为Rgb

适用于:Hsl,Hex

不适用于:命名颜色


使用浏览器时,这可能是最实用的答案。您通常只想将某些现有元素的颜色与以#表示法表示的某些已知颜色进行比较。
Panu Logic

2

我的hex2rbg版本:

  1. 接受#fff之类的短十六进制
  2. 算法兼容性为o(n),应该比使用正则表达式更快。例如String.replace, String.split, String.match等等。
  3. 使用恒定的空间。
  4. 支持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()

2

此代码段将十六进制转换为rgb,并将rgb转换为十六进制。

观看演示

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
}

它可以处理速记,但可以返回结构而不是字符串吗?
邓克

1

我正在使用具有#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)";
}

http://jsfiddle.net/kvLyscs3/


1

要直接从jQuery进行转换,您可以尝试:

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

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

1

考虑到很多答案只能部分回答问题(从RGB到HEX 反之亦然),我想我也应该发布部分答案。

我有一个类似的问题,我想做这样的事情:输入任何有效的CSS颜色(HSL(a),RGB(a),HEX或颜色名称)和1.可以添加或删除alpha值2。返回一个rgb(a)对象。我为此目的专门编写了一个插件。可以在GitHub找到它(它需要jQuery,但如果需要,可以将其派生并制作一个原始版本)。这是一个演示页面。您可以自己尝试一下,看看动态生成的输出。

我将在此处复制粘贴选项:

RGB生成器接受一个参数,即颜色,并提供三个选项:asObject,addAlpha和removeAlpha。当省略三个选项时,RGB颜色将作为字符串返回。

$.rgbGenerator("white")
// Will return rgb(255,255,255)

请注意,默认情况下包含alpha组件。如果输入值包含alpha值,则输出将为RGBa格式。

$.rgbGenerator("hsla(0,100%,50%,0.8)")
// Will return rgba(255,0,0,0.8)

您可以通过将removeAlpha设置为true来禁用此行为。这将从初始HSLa或RGBa颜色中删除所有alpha值。

$.rgbGenerator("hsla(0,100%,50%,0.8)", {removeAlpha: true})
// Will return rgb(255,0,0)

另一方面,如果要添加Alpha通道,则可以通过将addAlpha设置为0到1之间的任何值来进行。当输入是非透明颜色时,将添加Alpha值。如果它是透明的,则提供的值将覆盖输入的alpha分量。

$.rgbGenerator("hsl(0,100%,50%)", {addAlpha: 0.4})
// Will return rgba(255,0,0,0.4)
$.rgbGenerator("hsla(0,100%,50%,0.8)", {addAlpha: 0.4})
// Will return rgba(255,0,0,0.4)

最后,还可以将RGB(a)颜色作为对象输出。它由r,g,b和可选的a组成。

$.rgbGenerator("hsla(0,100%,50%,0.8)", {asObject: true})
/* Will return
{
  "r": 255,
  "g": 0,
  "b": 0,
  "a": 0.8
}
*/
$.rgbGenerator("hsla(0,100%,50%,0.8)", {asObject: true}).r
// Will return 255

1

Tim Down评分最高的答案提供了我所见的最佳转换为RGB的最佳解决方案。我更喜欢十六进制转换的此解决方案,因为它提供了最简洁的边界检查和零填充,可转换为十六进制。

function RGBtoHex (red, green, blue) {
  red = Math.max(0, Math.min(~~this.red, 255));
  green = Math.max(0, Math.min(~~this.green, 255));
  blue = Math.max(0, Math.min(~~this.blue, 255));

  return '#' + ('00000' + (red << 16 | green << 8 | blue).toString(16)).slice(-6);
};

使用左移“ <<”或“ |” 运营商也使之成为一个有趣的解决方案。


1

我发现了这一点,是因为我认为这非常简单,并且具有验证测试并支持alpha值(可选),因此适合这种情况。

如果您知道自己在做什么,则只需注释掉正则表达式行即可,并且速度稍快一些。

function hexToRGBA(hex, alpha){
    hex = (""+hex).trim().replace(/#/g,""); //trim and remove any leading # if there (supports number values as well)
    if (!/^(?:[0-9a-fA-F]{3}){1,2}$/.test(hex)) throw ("not a valid hex string"); //Regex Validator
    if (hex.length==3){hex=hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2]} //support short form
    var b_int = parseInt(hex, 16);
    return "rgba("+[
        (b_int >> 16) & 255, //R
        (b_int >> 8) & 255, //G
        b_int & 255, //B
        alpha || 1  //add alpha if is set
    ].join(",")+")";
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.