Làm cách nào để chuyển đổi màu sắc ở định dạng RGB sang định dạng Hex và ngược lại?

Ví dụ: chuyển đổi '#0080C0'sang (0, 128, 192).

Lưu ý : cả hai phiên bản của rgbToHexmong đợi giá trị số nguyên cho r, gvà b, vì vậy bạn sẽ cần phải làm tròn của riêng bạn nếu bạn có giá trị không nguyên.

Sau đây sẽ thực hiện chuyển đổi RGB sang hex và thêm bất kỳ phần đệm nào được yêu cầu:

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

Chuyển đổi theo cách khác:

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

Cuối cùng, một phiên bản thay thế của rgbToHex(), như được thảo luận trong câu trả lời của @ caskish và được đề xuất trong các nhận xét của @cwolves:

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

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

Cập nhật ngày 3 tháng 12 năm 2012

Đây là một phiên bản hexToRgb()cũng phân tích một bộ ba tốc ký, chẳng hạn như "# 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";

Một phiên bản thay thế của 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;
}

Chỉnh sửa: 28/03/2017 Đây là một cách tiếp cận khác điều đó dường như còn nhanh hơn

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

Chỉnh sửa: 8/11/2017 Cách tiếp cận mới ở trên sau khi thử nghiệm nhiều hơn không nhanh hơn :(. Mặc dù đó là một cách thay thế thú vị.

Phiên bản ECMAScript 6 của câu trả lời của Tim Down

Chuyển đổi RGB sang hex

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'

Chuyển đổi hex sang RGB

Trả về một mảng [r, g, b]. Hoạt động cũng với các bộ ba tốc ký như "#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]

Phần thưởng: padStart()Phương thức RGB sang hex bằng cách sử dụng

const rgbToHex = (r, g, b) => '#' + [r, g, b]
  .map(x => x.toString(16).padStart(2, '0')).join('')

console.log(rgbToHex(0, 51, 255)); // '#0033ff'

Lưu ý rằng câu trả lời này sử dụng các tính năng ECMAScript mới nhất, không được hỗ trợ trong các trình duyệt cũ hơn. Nếu bạn muốn mã này hoạt động trong tất cả các môi trường, bạn nên sử dụng Babel để biên dịch mã của mình.

Đây là phiên bản của tôi:

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

Tôi giả sử bạn có nghĩa là ký hiệu thập lục phân kiểu HTML, nghĩa là #rrggbb. Mã của bạn gần như chính xác, ngoại trừ bạn đã đảo ngược thứ tự. Nó nên là:

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

Ngoài ra, sử dụng dịch chuyển bit có thể giúp đọc dễ dàng hơn một chút:

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

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

Mã này chấp nhận các biến thể và độ mờ của #fff và #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(',')+')';
}

Chức năng một dòng HEX đến RGBA

Hỗ trợ cả hình thức ngắn #fffvà dài #ffffff.
Hỗ trợ kênh alpha (độ mờ).
Không quan tâm nếu băm chỉ định hay không, hoạt động trong cả hai trường hợp.

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

ví dụ:

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)  

Điều này có thể được sử dụng để có được màu sắc từ các propeties phong cách tính toán:

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

Tham chiếu: https://github.com/k-gun/so/blob/master/so_util.js

Giải pháp bitwise thường là lạ. Nhưng trong trường hợp này tôi đoán là thanh lịch hơn

function hexToRGB(hexColor){
  return {
    red: (hexColor >> 16) & 0xFF,
    green: (hexColor >> 8) & 0xFF,  
    blue: hexColor & 0xFF,
  }
}

Sử dụng:

const {red, green, blue } = hexToRGB(0xFF00FF)

console.log(red) // 255
console.log(green) // 0
console.log(blue) // 255

// Bỏ qua ký hiệu hsl, các giá trị màu thường được biểu thị dưới dạng tên, rgb, rgba hoặc hex-

// Hex có thể là 3 giá trị hoặc 6.

// Rgb có thể là tỷ lệ phần trăm cũng như các giá trị nguyên.

// Tốt nhất để chiếm tất cả các định dạng này, ít nhất.

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

@ Tim, để thêm vào câu trả lời của bạn (hơi khó xử khi đưa nó vào một bình luận).

Như đã viết, tôi thấy hàm rgbToHex trả về một chuỗi có các phần tử sau điểm và nó yêu cầu các giá trị r, g, b nằm trong phạm vi 0-255.

Tôi chắc chắn rằng điều này có vẻ rõ ràng đối với hầu hết, nhưng phải mất hai giờ để tôi tìm ra và sau đó phương pháp ban đầu đã phình to thành 7 dòng trước khi tôi nhận ra vấn đề của mình là ở nơi khác. Vì vậy, vì lợi ích của việc tiết kiệm thời gian và rắc rối của người khác, đây là mã được sửa đổi một chút của tôi để kiểm tra các điều kiện tiên quyết và cắt bỏ các bit không liên quan của chuỗi.

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

(2017) Các chức năng mũi tên có thể ghép SIMPLE ES6

Tôi không thể cưỡng lại việc chia sẻ điều này cho những người có thể đang viết một số js chức năng / sáng tác hiện đại bằng ES6. Dưới đây là một số lớp lót trơn mà tôi đang sử dụng trong một mô-đun màu thực hiện phép nội suy màu để hiển thị dữ liệu.

Lưu ý rằng điều này hoàn toàn không xử lý kênh 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));

Thử

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

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

// TEST
console.log('#0080C0          -->', hex2rgb('#0080C0'));
console.log('rgb(0, 128, 192) -->', rgb2hex('rgb(0, 128, 192)'));

Nếu bạn cần so sánh hai giá trị màu (được đưa ra là RGB, tên màu hoặc giá trị hex) hoặc chuyển đổi sang HEX, hãy sử dụng đối tượng canvas 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);

Bạn có thể sau một cái gì đó như thế này?

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

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

hiển thị # 9687c8

Đối với 3 chữ số, chức năng hexToRgb của Tim Down có thể được cải thiện như sau:

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

Tôi đã gặp phải vấn đề này vì tôi muốn chấp nhận bất kỳ giá trị màu nào và có thể thêm độ mờ, vì vậy tôi đã tạo plugin jQuery nhanh này sử dụng canvas gốc trên các trình duyệt hiện đại. Có vẻ để làm việc chỉ là tuyệt vời.

Biên tập

Hóa ra tôi không thể tìm ra cách biến nó thành một plugin jQuery thích hợp, vì vậy tôi sẽ chỉ trình bày nó như một chức năng thông thường.

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

tôi cần một hàm chấp nhận các giá trị không hợp lệ giống như

rgb (-255, 255, 255) rgb (510, 255, 255)

đây là một câu trả lời của @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}

Sử dụng các chức năng này để đạt được kết quả mà không có bất kỳ vấn đề. :)

Phiên bản tốc ký chấp nhận một chuỗi:

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

Để kiểm tra xem nó chưa phải là thập lục phân

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

Mặc dù câu trả lời này không phù hợp với câu hỏi một cách hoàn hảo, nhưng nó có thể rất hữu ích.

1. Tạo bất kỳ yếu tố ngẫu nhiên

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

2. Đặt bất kỳ kiểu hợp lệ nào thành màu bạn muốn chuyển đổi

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

3. Gọi lại tài sản phong cách

> toRgb.style.color;

< "rgb(133, 225, 133)" Màu của bạn đã được chuyển đổi thành Rgb

Hoạt động cho: Hsl, Hex

Không hoạt động cho: Màu sắc được đặt tên

Phiên bản hex2rbg của tôi:

1. Chấp nhận hex ngắn như #fff
2. Độ tin cậy của thuật toán là o (n), nên nhanh hơn sử dụng regex. ví dụ String.replace, String.split, String.matchvv ..
3. Sử dụng không gian không đổi.
4. Hỗ trợ rgb và rgba.

bạn có thể cần xóa hex.trim () nếu bạn đang sử dụng IE8.

ví dụ

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)

mã:

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

Đoạn mã này chuyển đổi hex thành rgb và rgb thành hex.

Xem bản demo

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
}

Tôi đang làm việc với dữ liệu XAML có định dạng hex là #AARRGGBB (Alpha, Red, Green, Blue). Sử dụng các câu trả lời ở trên, đây là giải pháp của tôi:

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/

Để chuyển đổi trực tiếp từ jQuery, bạn có thể thử:

  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;

Xem xét rất nhiều câu trả lời chỉ trả lời một phần câu hỏi (từ RGB đến HEX hoặc ngược lại) tôi nghĩ tôi cũng sẽ đăng câu trả lời một phần của mình.

Tôi gặp vấn đề tương tự và tôi muốn làm một cái gì đó như thế này: nhập bất kỳ màu CSS hợp lệ nào (HSL (a), RGB (a), HEX hoặc tên màu) và 1. có thể thêm hoặc xóa giá trị alpha, 2. trả về một đối tượng rgb (a). Tôi đã viết một plugin chính xác cho mục đích này. Nó có thể được tìm thấy trên GitHub (nó yêu cầu jQuery, nhưng nếu bạn muốn, bạn có thể rẽ nhánh nó và tạo một phiên bản vanilla). Đây là một trang demo . Bạn có thể cố gắng cho chính mình và xem đầu ra được tạo ra khi đang bay.

Tôi sẽ sao chép-dán các tùy chọn ở đây:

Trình tạo RGB chấp nhận một đối số, màu sắc và cung cấp ba tùy chọn: asObject, addAlpha và removeAlpha. Khi ba tùy chọn bị bỏ qua, màu RGB sẽ được trả về dưới dạng chuỗi.

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

Lưu ý rằng theo mặc định các thành phần alpha được bao gồm. Nếu giá trị đầu vào chứa giá trị alpha, đầu ra sẽ ở định dạng RGBa.

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

Bạn có thể vô hiệu hóa hành vi này bằng cách đặt removeAlpha thành true. Điều này sẽ loại bỏ bất kỳ giá trị alpha khỏi màu HSLa hoặc RGBa ban đầu.

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

Mặt khác, nếu bạn muốn thêm kênh alpha, bạn có thể làm như vậy bằng cách đặt addAlpha thành bất kỳ giá trị nào trong khoảng từ 0 đến 1. Khi đầu vào có màu không trong suốt, giá trị alpha sẽ được thêm vào. Nếu nó là một trong suốt, giá trị được cung cấp sẽ ghi đè lên thành phần alpha của đầu vào.

$.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)

Cuối cùng, cũng có thể xuất màu RGB (a) dưới dạng đối tượng. Nó sẽ bao gồm r, g, b và tùy chọn 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

Câu trả lời được xếp hạng hàng đầu của Tim Down cung cấp giải pháp tốt nhất tôi có thể thấy để chuyển đổi sang RGB. Tôi thích giải pháp này để chuyển đổi Hex tốt hơn bởi vì nó cung cấp kiểm tra giới hạn ngắn gọn nhất và không đệm để chuyển đổi sang 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);
};

Việc sử dụng dịch chuyển trái '<<' và hoặc '|' Các nhà khai thác làm cho điều này một giải pháp thú vị quá.

Tôi đã tìm thấy điều này và bởi vì tôi nghĩ rằng nó khá đơn giản và có các kiểm tra xác nhận và hỗ trợ các giá trị alpha (tùy chọn), điều này sẽ phù hợp với trường hợp.

Chỉ cần nhận xét dòng regex nếu bạn biết bạn đang làm gì và nó nhanh hơn một chút.

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