RGB ke Hex dan Hex ke RGB

555

Bagaimana cara mengubah warna dalam format RGB ke format Hex dan sebaliknya?

Misalnya, konversikan '#0080C0'ke (0, 128, 192).

Sindar
sumber

Jawaban:

1236

Catatan : kedua versi rgbToHexnilai integer harapan untuk r, gdan b, jadi Anda harus melakukan pembulatan Anda sendiri jika Anda memiliki nilai non-integer.

Hal berikut akan dilakukan untuk konversi RGB ke hex dan menambahkan padding nol yang diperlukan:

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

Mengubah dengan cara lain:

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

Akhirnya, versi alternatif rgbToHex(), seperti yang dibahas dalam jawaban @ casablanca dan disarankan dalam komentar oleh @cwolves:

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

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

Pembaruan 3 Desember 2012

Berikut adalah versi hexToRgb()yang juga mem-parsing hex triplet steno seperti "# 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";

Tim Down
sumber
10
@ Vitim.us: <<adalah operator shift kiri bitwise. Dengan asumsi gadalah bilangan bulat bukan nol, g << 8maka secara efektif dikalikan gdengan 256, menambah nol ke akhir representasi hex-nya. Demikian juga r << 16menambahkan 4 nol. Menambahkan 1 << 24(1000000 dalam hex) memastikan bahwa representasi hex kiri-empuk dengan nol yang diperlukan sekali pemimpin 1dilucuti menggunakan slice(). Misalnya, jika rdan gkeduanya nol dan b51, ((r << 16) + (g << 8) + b).toString(16)akan mengembalikan string "33"; tambahkan 1 << 24dan Anda mendapatkan "1000033". Kemudian cabut 1dan Anda di sana.
Tim Down
Apakah perubahan bit (misalnya (r << 16)) memberikan hasil yang sama pada komputer endian besar dan kecil? Sunting: Tidak. Inilah alasannya: stackoverflow.com/questions/1041554/...
WoodenKitty
@ Gotdo: Maaf untuk memutar kembali hasil edit Anda, tetapi seringkali tidak mungkin atau praktis untuk menggunakan ES6. Versi sebelumnya akan berfungsi di mana saja.
Tim Down
3
rgbToHex Anda tidak berfungsi. mendapatkan hasil yang lucu: # f55b2f00
TheCrazyProfessor
1
Mengenai rgbToHexfungsi terbaru . Seseorang akan ingin salah mengetik nilai rgb yang Anda lewati sebagai integer, atau sedikit memodifikasi fungsi rgbToHex. Contoh: jsfiddle.net/cydqo6wj Sekarang: return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); Dimodifikasi: return "#" + ((1 << 24) + ((+r) << 16) + ((+g) << 8) + (+b)).toString(16).slice(1); Dalam versi modifikasi, saya cukup memaksakan nilai rgb untuk dievaluasi pada bilangan bulat sebelum perubahan ke 16 / hex.
user2977468
148

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

Sunting: 3/28/2017 Berikut adalah pendekatan lain yang tampaknya lebih cepat

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

Sunting: 8/11/2017 Pendekatan baru di atas setelah pengujian lebih lanjut tidak lebih cepat :(. Meskipun itu cara alternatif yang menyenangkan.

David
sumber
57
Sebuah garis kesempurnaan: return [r, g, b].join();.
Pavlo
5
Atau untuk solusi one-liner semua-enkapsulasi:return [(bigint = parseInt(hex, 16)) >> 16 & 255, bigint >> 8 & 255, bigint & 255].join();
Pluto
12
Saya menggunakan ini dengan satu tweak - menghapus karakter non-hex (seperti yang terkemuka #) sebelum parseInt:hex = hex.replace(/[^0-9A-F]/gi, '');
joews
5
Jangan terlalu cepat menggunakan versi steno. JSPerf menunjukkan bahwa yang ada dalam jawaban ini tercepat: jsperf.com/2014-09-16-hex-to-rgb
Olav Kokovkin
1
Hati-hati dengan ini, hasilnya tidak dapat diandalkan. Itu membuat warna yang dekat dengan hitam tampak merah muda gelap. Lebih baik menggunakan fungsi dari jawaban atas.
Maciej Krawczyk
64

Versi ECMAScript 6 dari jawaban Tim Down

Mengubah RGB menjadi 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'

Mengubah hex ke RGB

Mengembalikan array [r, g, b]. Bekerja juga dengan kembar tiga hex steno seperti "#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: RGB to hex menggunakan padStart()metode

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

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

Perhatikan bahwa jawaban ini menggunakan fitur ECMAScript terbaru, yang tidak didukung di browser lama. Jika Anda ingin kode ini bekerja di semua lingkungan, Anda harus menggunakan Babel untuk mengkompilasi kode Anda.

Michał Perłakowski
sumber
hexToRgb () mudah diadaptasi untuk menangani notasi RGBA hex 4 dan 8 digit: .replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(m, r, g, b) => '#' + r + r + g + g + b + b)menjadi: .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)Tetapi apakah ada cara untuk membuat regexp bekerja dengan A of RGBA sebagai nilai hex 4 opsional? Itu benar-benar akan melengkapi fungsionalitas, membuat satu regexp bekerja dengan hex RGB dan RGBA. Kalau tidak, itu dua regexps, satu dengan 3 nilai, yang lain dengan 4. Anda harus membagi nilai ke-4 dengan 255 untuk mendapatkan arg ke-4 untuk rgba ().
jamess
44

Ini versi saya:

  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;
  }
FelipeC
sumber
keren, tapi pertanyaannya adalah hex2rgb. Bisakah Anda melakukannya sesingkat ini yang akan menyenangkan :)
K. Kilian Lindberg
4
Walaupun itu tidak berjalan dua arah, saya harus memperbaiki ini karena untuk beberapa alasan solusi rgb ke hex lainnya dalam pertanyaan ini tidak bekerja untuk saya.
Angsa
Pertanyaannya adalah dari rgb2hex dulu. Pokoknya saya menambahkan hex2rgb saya sendiri.
FelipeC
Sedikit bingung tentang rgb2hexmetode ini. Mengapa kita tambahkan 0x1000000ke rgb, dan mengapa kita perlu menelepon .slice(1)pada akhirnya?
hackjutsu
Karena biru akan menjadi # FFF, kami menambahkan 0x1000000, jadi ini adalah # 10000FF, dan kemudian kami menghapus yang pertama "1".
FelipeC
26

Saya berasumsi maksud Anda notasi heksadesimal gaya-HTML, yaitu #rrggbb. Kode Anda hampir benar, kecuali pesanan Anda terbalik. Harus:

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

Juga, menggunakan bit-shift mungkin membuatnya sedikit lebih mudah dibaca:

var decColor = (red << 16) + (green << 8) + blue;
casablanca
sumber
Hebat, kecuali Anda harus menyisakan nol pada 6 karakter jika merah <16:var decColor = (red < 16 ? '0' : '') + (red << 16) + (green << 8) + blue;
Mark Kahn
Tampaknya berfungsi kecuali untuk ini: (0,128.192) mungkin karena 0?
Sindar
@cwolves: Anda benar, saya melewatkannya. Tetapi harus ditambahkan ke string terakhir, bukan bilangan bulat.
casablanca
@Sindar: Lihat komentar @cwolves, jika red < 16Anda perlu awalan a 0ke hasil akhir.
casablanca
20
oke, DI SINI:var hexColor = ((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).substr(1);
Mark Kahn
22
function hex2rgb(hex) {
  return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}
rezoner
sumber
2
Saya suka jawaban sederhana
Bjorn Behrendt
Sihir! Anda harus menambahkan penjelasan pada one-liner yang sangat keren ini.
James Harrington
Bagus! Berikut hal yang sama, kecuali minified dan kembali objek dengan sifat 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}}
ashleedawg
21

Kode ini menerima varian dan opacity #fff dan #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(',')+')';
}
falko
sumber
11

HEX fungsional satu garis ke RGBA

Mendukung bentuk pendek #fffdan panjang #ffffff.
Mendukung saluran alpha (opacity).
Tidak peduli apakah hash yang ditentukan atau tidak, berfungsi dalam kedua kasus.

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

contoh:

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)  
Denis
sumber
9
Cobalah untuk menulis kode yang bisa dibaca manusia, bukan satu kalimat. Tidak ada keuntungan jika Anda memperkecil kode Anda sebelum produksi.
Roko C. Buljan
11

Ini dapat digunakan untuk mendapatkan warna dari properti gaya yang dihitung:

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

Ref: https://github.com/k-gun/so/blob/master/so_util.js

K-Gun
sumber
Terima kasih untuk ini. Tetapi ada kesalahan kecil: harus kembali (r.length == 1 ? "0" + r : r)dan juga untuk hijau dan biru.
typhon
7

Solusi bitwise biasanya aneh. Tetapi dalam hal ini saya rasa itu lebih elegan 😄

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

Pemakaian:

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

console.log(red) // 255
console.log(green) // 0
console.log(blue) // 255
Aral Roca
sumber
6

// Mengabaikan notasi hsl, nilai warna biasanya dinyatakan sebagai nama, rgb, rgba atau hex-

// Hex dapat berupa 3 nilai atau 6.

// Rgb bisa berupa persentase dan juga nilai integer.

// Paling baik memperhitungkan semua format ini, setidaknya.

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));
kennebec
sumber
Terpilih karena ini adalah versi paling komprehensif yang pernah saya lihat. Akan lebih bagus jika bisa mengekstrak warna dari rgba juga.
Michael Scheper
6

@ Tim, untuk menambahkan jawaban Anda (agak canggung pas ini menjadi komentar).

Seperti yang ditulis, saya menemukan fungsi rgbToHex mengembalikan sebuah string dengan elemen setelah titik dan itu mengharuskan nilai r, g, b jatuh dalam kisaran 0-255.

Saya yakin ini mungkin tampak jelas bagi kebanyakan orang, tetapi butuh dua jam bagi saya untuk mencari tahu dan pada saat itu metode asli telah menggelembung menjadi 7 baris sebelum saya menyadari masalah saya ada di tempat lain. Jadi, demi menghemat waktu & kerumitan orang lain, inilah kode saya yang sedikit diubah yang memeriksa prasyarat dan memotong bit-bit string yang asing.

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);
}
Matt Stevens
sumber
5

(2017) fungsi panah SIMPLE ES6 SIMPLE

Saya tidak bisa menolak berbagi ini untuk mereka yang mungkin menulis beberapa fungsional / komposisi modern menggunakan ES6. Berikut adalah beberapa liner apik yang saya gunakan dalam modul warna yang melakukan interpolasi warna untuk visualisasi data.

Perhatikan bahwa ini sama sekali tidak menangani saluran 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));
Ron Gilchrist
sumber
5

Mencoba

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

Kamil Kiełczewski
sumber
4

Jika Anda perlu membandingkan dua nilai warna (diberikan sebagai RGB, warna nama atau nilai hex) atau mengonversi ke HEX menggunakan objek kanvas 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);
Anton Putov
sumber
3

Mungkinkah Anda mengejar sesuatu seperti ini?

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

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

menampilkan # 9687c8

Miquel
sumber
1
> RGB2HTML> 2HTML> TO HTML (ಠ ʖ̯ ಠ) HEX tidak terkait dengan HTML
Даниил Пронин
3

Untuk fungsi hexToRgb 3 digit Tim Down dapat ditingkatkan seperti di bawah ini:

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;
};
Erhan
sumber
2

Saya menemukan masalah ini karena saya ingin menerima nilai warna apa pun dan dapat menambahkan opacity, jadi saya membuat plugin jQuery cepat ini yang menggunakan kanvas asli pada browser modern. Tampaknya bekerja dengan baik.

Edit

Ternyata saya tidak tahu cara menjadikannya plugin jQuery yang tepat, jadi saya hanya akan menampilkannya sebagai fungsi biasa.

//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;
};
Patrick Roberts
sumber
2

saya membutuhkan fungsi yang menerima nilai yang tidak valid juga

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

ini adalah spin-off dari jawaban @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();
}
Chad Scira
sumber
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}

Gunakan Fungsi ini untuk mencapai hasil tanpa masalah. :)

pengguna3767878
sumber
2

Versi singkat yang menerima string:

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

Untuk memeriksa apakah itu belum heksadesimal

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

Aart den Braber
sumber
2

Meskipun jawaban ini tidak cocok dengan pertanyaan dengan sempurna, namun mungkin sangat bermanfaat.

  1. Buat elemen acak apa saja

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

  1. Setel gaya yang valid ke warna yang ingin Anda konversi

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

  1. Panggil properti gaya lagi

> toRgb.style.color;

< "rgb(133, 225, 133)" Warna Anda telah dikonversi ke Rgb

Bekerja untuk: Hsl, Hex

Tidak berfungsi untuk: Warna yang dinamai

Entarra De'Lacord
sumber
Ini mungkin jawaban paling praktis saat bekerja dengan browser. Anda seringkali hanya ingin membandingkan warna dari beberapa elemen yang ada dengan beberapa warna yang dikenal yang dinyatakan dalam # -notation.
Panu Logic
2

Versi hex2rbg saya:

  1. Terima hex pendek seperti #fff
  2. Kemampuan algoritma adalah o (n), harus lebih cepat daripada menggunakan regex. misalnya String.replace, String.split, String.matchdll.
  3. Gunakan ruang konstan.
  4. Mendukung rgb dan rgba.

Anda mungkin perlu menghapus hex.trim () jika Anda menggunakan IE8.

misalnya

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)

kode:

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()+')';
    }
}
Eric Chen
sumber
Perhatikan itu h.join(',')adalah hal yang sama dengan h.join().
2

Cuplikan ini mengubah hex ke rgb dan rgb ke hex.

Lihat 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
}
pengguna2240578
sumber
Bagus karena menangani steno, tetapi bisakah ia mengembalikan struktur daripada string?
Dunc
1

Saya sedang bekerja dengan data XAML yang memiliki format hex #AARRGGBB (Alpha, Red, Green, Blue). Menggunakan jawaban di atas, inilah solusi saya:

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/

Benson
sumber
1

Untuk mengkonversi langsung dari jQuery Anda dapat mencoba:

  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'))
Luis Amor
sumber
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;
pengguna3237573
sumber
1

Mempertimbangkan banyak jawaban hanya sebagian menjawab pertanyaan (baik dari RGB ke HEX atau sebaliknya) saya pikir saya akan memposting jawaban parsial saya juga.

Saya memiliki masalah serupa dan saya ingin melakukan sesuatu seperti ini: masukan warna CSS yang valid (HSL (a), RGB (a), HEX atau nama warna) dan 1. dapat menambah atau menghapus nilai alfa, 2. mengembalikan objek rgb (a). Saya menulis sebuah plugin persis untuk tujuan ini. Ini dapat ditemukan di GitHub (membutuhkan jQuery, tetapi jika mau, Anda dapat menggunakan garpu dan membuat versi vanilla). Ini halaman demo . Anda bisa mencoba sendiri dan melihat output yang dihasilkan dengan cepat.

Saya akan salin-tempel opsi di sini:

RGB Generator menerima satu argumen, warnanya, dan menyediakan tiga opsi: asObject, addAlpha, dan removeAlpha. Ketika tiga opsi dihilangkan, warna RGB akan dikembalikan sebagai string.

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

Perhatikan bahwa secara default komponen alpha disertakan. Jika nilai input berisi nilai alpha, output akan dalam format RGBa.

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

Anda dapat menonaktifkan perilaku ini dengan mengatur hapusAlpha menjadi true. Ini akan menghapus nilai alfa apa pun dari warna HSLa atau RGBa awal.

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

Di lain pihak, jika Anda ingin menambahkan saluran alpha, Anda dapat melakukannya dengan mengatur addAlpha ke nilai antara 0 dan 1. Ketika input adalah warna yang tidak transparan, nilai alpha akan ditambahkan. Jika itu transparan, nilai yang diberikan akan menimpa komponen alfa input.

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

Akhirnya, dimungkinkan juga untuk menampilkan warna RGB (a) sebagai objek. Ini akan terdiri dari r, g, b dan opsional 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
Bram Vanroy
sumber
1

Jawaban berperingkat teratas oleh Tim Down memberikan solusi terbaik yang dapat saya lihat untuk konversi ke RGB. Saya suka solusi ini untuk konversi Hex lebih baik karena ia memberikan batas memeriksa paling singkat dan nol padding untuk konversi ke 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);
};

Penggunaan shift kiri '<<' dan atau '|' operator membuat ini solusi yang menyenangkan juga.

srolfe26
sumber
1

Saya menemukan ini dan karena saya pikir itu cukup lurus ke depan dan memiliki tes validasi dan mendukung nilai alpha (opsional), ini akan sesuai dengan kasusnya.

Komentari saja garis regex jika Anda tahu apa yang Anda lakukan dan ini sedikit lebih cepat.

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