Jawaban:
Catatan : kedua versi rgbToHex
nilai integer harapan untuk r
, g
dan 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
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";
(r << 16)
) memberikan hasil yang sama pada komputer endian besar dan kecil? Sunting: Tidak. Inilah alasannya: stackoverflow.com/questions/1041554/...
rgbToHex
fungsi 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.
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.
return [r, g, b].join();
.
return [(bigint = parseInt(hex, 16)) >> 16 & 255, bigint >> 8 & 255, bigint & 255].join();
#
) sebelum parseInt
:hex = hex.replace(/[^0-9A-F]/gi, '');
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'
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]
padStart()
metodeconst 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.
.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 ().
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;
}
rgb2hex
metode ini. Mengapa kita tambahkan 0x1000000
ke rgb
, dan mengapa kita perlu menelepon .slice(1)
pada akhirnya?
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;
var decColor = (red < 16 ? '0' : '') + (red << 16) + (green << 8) + blue;
red < 16
Anda perlu awalan a 0
ke hasil akhir.
var hexColor = ((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).substr(1);
function hex2rgb(hex) {
return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}
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}}
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(',')+')';
}
HEX fungsional satu garis ke RGBA
Mendukung bentuk pendek #fff
dan 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)
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
(r.length == 1 ? "0" + r : r)
dan juga untuk hijau dan biru.
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
// 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));
@ 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);
}
(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));
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``
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);
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
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;
};
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;
};
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();
}
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. :)
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"));
Meskipun jawaban ini tidak cocok dengan pertanyaan dengan sempurna, namun mungkin sangat bermanfaat.
var toRgb = document.createElement('div');
toRg.style.color = "hsl(120, 60%, 70%)";
> toRgb.style.color;
< "rgb(133, 225, 133)"
Warna Anda telah dikonversi ke Rgb
Bekerja untuk: Hsl, Hex
Tidak berfungsi untuk: Warna yang dinamai
Versi hex2rbg saya:
String.replace, String.split, String.match
dll.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()+')';
}
}
Cuplikan ini mengubah hex ke rgb dan rgb ke hex.
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
}
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)";
}
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'))
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;
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
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.
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(",")+")";
}
<<
adalah operator shift kiri bitwise. Dengan asumsig
adalah bilangan bulat bukan nol,g << 8
maka secara efektif dikalikang
dengan 256, menambah nol ke akhir representasi hex-nya. Demikian jugar << 16
menambahkan 4 nol. Menambahkan1 << 24
(1000000 dalam hex) memastikan bahwa representasi hex kiri-empuk dengan nol yang diperlukan sekali pemimpin1
dilucuti menggunakanslice()
. Misalnya, jikar
dang
keduanya nol danb
51,((r << 16) + (g << 8) + b).toString(16)
akan mengembalikan string "33"; tambahkan1 << 24
dan Anda mendapatkan "1000033". Kemudian cabut1
dan Anda di sana.