首页 文章

RGB到十六进制,十六进制到RGB

提问于
浏览
408

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

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

30 回答

  • 4

    虽然这个答案不太可能完全符合这个问题,但它可能会非常有用 .

    • 创建任何随机元素

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

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

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

    • 再次调用style属性

    > toRgb.style.color;

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

    适用于:Hsl,Hex

    不适用于:命名颜色

  • 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"));
    
  • 40

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

    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#L10
    https://github.com/k-gun/so/blob/master/so_util.js#L62
    https://github.com/k-gun/so/blob/master/so_util.js#L81

  • 1

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

    Edit

    结果我无法弄清楚如何使它成为一个合适的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;
    };
    
  • 1
    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
    
  • 8

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

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

    (2017) SIMPLE ES6 composable arrow functions

    对于那些可能正在使用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));
    
  • 1

    HTML使用十六进制系统,rgb使用十进制系统 . 所以你必须将数字从十六进制转换为十进制,反之亦然 .

  • 6

    以下将对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";
    

    最后, rgbToHex() 的另一个版本,正如@ casablanca的回答中所讨论的那样,并在@cwolves的评论中提出:

    function rgbToHex(r, g, b) {
        return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    }
    

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

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

    编辑:3/28/2017这是另一种似乎更快的方法

    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经过更多测试后,上面的新方法并不快:( . 虽然这是一种有趣的替代方式 .

  • 1

    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]
    

    Bonus:使用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编译代码 .

  • 1

    A total different approach to convert hex color code to RGB without regex

    它根据字符串的长度处理 #FFF#FFFFFF 格式 . 它从字符串的开头删除 # 并将字符串的每个字符分开并将其转换为base10并将其添加到其位置基础上的相应索引中 .

    //Algorithm of hex to rgb conversion in ES5
    function hex2rgbSimple(str){
      str = str.replace('#', '');
      return str.split('').reduce(function(result, char, index, array){
        var j = parseInt(index * 3/array.length);
        var number = parseInt(char, 16);
        result[j] = (array.length == 3? number :  result[j]) * 16 + number;
        return result;
      },[0,0,0]);
    }
    
    //Same code in ES6
    hex2rgb = str => str.replace('#','').split('').reduce((r,c,i,{length: l},j,n)=>(j=parseInt(i*3/l),n=parseInt(c,16),r[j]=(l==3?n:r[j])*16+n,r),[0,0,0]);
    
    //hex to RGBA conversion
    hex2rgba = (str, a) => str.replace('#','').split('').reduce((r,c,i,{length: l},j,n)=>(j=parseInt(i*3/l),n=parseInt(c,16),r[j]=(l==3?n:r[j])*16+n,r),[0,0,0,a||1]);
    
    //hex to standard RGB conversion
    hex2rgbStandard = str => `RGB(${str.replace('#','').split('').reduce((r,c,i,{length: l},j,n)=>(j=parseInt(i*3/l),n=parseInt(c,16),r[j]=(l==3?n:r[j])*16+n,r),[0,0,0]).join(',')})`;
    
    
    console.log(hex2rgb('#aebece'));
    console.log(hex2rgbSimple('#aebece'));
    
    console.log(hex2rgb('#aabbcc'));
    
    console.log(hex2rgb('#abc'));
    
    console.log(hex2rgba('#abc', 0.7));
    
    console.log(hex2rgbStandard('#abc'));
    
  • 1

    考虑到很多答案只能部分回答问题(从RGB到HEX或其他方式)我想我也会发布我的部分答案 .

    我有一个类似的问题,我想做这样的事情:输入任何有效的CSS颜色(HSL(a),RGB(a),HEX或颜色名称)和1.能够添加或删除alpha值,2 . 返回一个rgb(a)对象 . 我为此准备了一个插件 . 它可以在GitHub上找到(它需要jQuery,但如果你想要你可以分叉并制作一个vanilla版本) . 这是a demo page . 您可以try for yourself并查看动态生成的输出 .

    我将复制粘贴选项:

    RGB Generator接受一个参数,即颜色,并提供三个选项: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

    要直接从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'))
    
  • 120

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

    我的hex2rbg版本:

    • 接受像#fff这样的短十六进制

    • 算法兼容性为o(n),应该比使用正则表达式更快 . 例如 String.replace, String.split, String.match 等..

    • 使用恒定空间 .

    • 支持rgb和rgba .

    如果您正在使用,可能需要删除hex.trim()IE8 .

    例如

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

    如果需要比较两个颜色值(以rgb,名称颜色或十六进制值给出)或转换为HEX,请使用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);
    
  • 3

    我发现了这一点,因为我认为这是非常简单的并且有验证测试并且支持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(",")+")";
    }
    
  • 8

    这是我的版本:

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

    对于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;
    };
    
  • 25

    我假设你的意思是HTML风格的十六进制表示法,即 #rrggbb . 您的代码几乎是正确的,除非您已将订单撤消 . 它应该是:

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

    此外,使用位移可能会使它更容易阅读:

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

    One-line functional HEX to 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)
    
  • 21

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

    愿你这样的事吗?

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

    显示#9687c8

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

    使用这些函数可以毫无问题地获得结果 . :)

  • 1

    我正在使用XAML数据,其格式为#AARRGGBB(Alpha,Red,Green,Blue) . 使用上面的答案,这是我的解决方案:

    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/

  • 3
    function hex2rgb(hex) {
      return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
    }
    
  • 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);
    }
    
  • 985

    Tim Down的最高评价答案提供了我可以看到的转换为RGB的最佳解决方案 . 我更喜欢这种Hex转换的解决方案,因为它提供了最简洁的边界检查和零填充以转换为Hex .

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

    使用左移'<<'和或'|'运营商也是一个有趣的解决方案 .

相关问题