Cara mengubah warna dalam RGB format ke format Hex dan sebaliknya?
Misalnya, mengkonversi '#0080C0'
untuk(0, 128, 192)
.
Berikut ini akan lakukan untuk RGB ke hex konversi dan menambahkan diperlukan zero padding:
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
Konversi 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 dari rgbToHex()
, seperti yang dibahas di @casablanca's jawaban dan saran di 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 ini's versi hexToRgb()
yang juga mem-parsing singkatan hex triplet 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";
Versi alternatif dari 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;
}
Edit: 3/28/2017
Berikut ini adalah pendekatan lain yang tampaknya bahkan 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];
}
Edit: 8/11/2017 Pendekatan baru atas setelah pengujian lebih lanjut tidak lebih cepat :(. Meskipun itu adalah menyenangkan cara alternatif.
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 singkatan hex triplet 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 terbaru ECMAScript fitur yang tidak didukung di browser lama. Jika anda ingin kode ini untuk bekerja di semua lingkungan, anda harus menggunakan Babel untuk mengkompilasi kode anda.
Berikut ini's 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;
}
I'm asumsi anda berarti HTML-gaya notasi heksadesimal, yaitu #rrggbb
. Kode anda hampir benar, kecuali anda've mendapat urutan terbalik. Itu harus:
var decColor = red * 65536 + green * 256 + blue;
Juga, menggunakan bit-pergeseran yang mungkin membuatnya sedikit lebih mudah untuk membaca:
var decColor = (red << 16) + (green << 8) + blue;
Kode ini menerima #fff dan #ffffff varian dan opacity.
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(',')+')';
}
Hal ini dapat digunakan untuk mendapatkan warna-warna dari computed gaya propeties:
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
One-line fungsional HEX untuk RGBA
Mendukung pendek #fff
dan lama #ffffff
bentuk.
Mendukung alpha channel (opacity).
Tidak peduli jika hash yang ditentukan atau tidak, karya-karya 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)
Bitwise solusi biasanya adalah aneh. Tapi dalam kasus ini saya kira yang lebih elegan 😄
js fungsi hexToRGB(hexColor){ kembali { merah: (hexColor >> 16) & 0xFF, hijau: (hexColor >> 8) & 0xFF, biru: hexColor & 0xFF, } }
Penggunaan:
``js const {merah, hijau, biru } = hexToRGB(0xFF00FF)
konsol.log(merah) // 255 konsol.log(hijau) // 0 konsol.log(biru) // 255 ``
// Mengabaikan hsl notasi, warna nilai-nilai yang secara umum dinyatakan sebagai nama-nama, rgb, rgba atau hex-
// Hex dapat 3 nilai-nilai atau 6.
// Rgb dapat persentase serta nilai-nilai integer.
// Terbaik untuk account untuk 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 menambah jawaban anda (yang sedikit canggung pas ini ke komentar).
Seperti yang tertulis, saya menemukan rgbToHex fungsi yang mengembalikan string dengan unsur-unsur setelah titik dan hal ini membutuhkan bahwa r, g, b nilai-nilai berada dalam range 0-255.
I'm yakin hal ini mungkin tampak jelas bagi sebagian besar, tapi butuh waktu dua jam bagi saya untuk mencari tahu dan kemudian metode asli telah menggelembung hingga 7 baris sebelum saya menyadari masalah saya adalah di tempat lain. Sehingga dalam kepentingan menyelamatkan orang lain waktu & apapun tujuan kunjungan anda, berikut ini's saya sedikit diubah kode yang memeriksa pra-syarat dan trims dari asing bit dari string.
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);
}
Jika anda perlu membandingkan dua nilai warna (diberikan sebagai RGB, warna nama atau nilai hex) atau mengkonversi ke HEX menggunakan HTML5 canvas objek.
`` var kanvas = dokumen.createElement("kanvas"); var ctx = ini.kanvas.getContext('2d');
ctx.fillStyle = "rgb(lulus,beberapa,nilai)"; var temp = ctx.fillStyle; ctx.fillStyle = "someColor";
alert(ctx.fillStyle == temp); ``
(2017) SEDERHANA ES6 composable panah fungsi
Saya dapat't menolak berbagi ini untuk orang-orang yang dapat menulis beberapa modern fungsional/komposisi js menggunakan ES6. Berikut ini adalah beberapa slick one-liners saya menggunakan warna modul yang warna interpolasi untuk visualisasi data.
Catatan bahwa ini tidak menangani alpha channel di semua.
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));
Untuk 3 digit hexToRgb fungsi dari Tim Turun 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 dan dapat menambahkan opacity, jadi saya membuat ini cepat jQuery plugin yang menggunakan kanvas asli di browser modern. Tampaknya bekerja cukup besar.
Edit
Ternyata saya dapat't tahu bagaimana untuk membuat hal yang tepat plugin jQuery, sehingga saya'll hanya hadir sebagai sebuah 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;
};
Ini cuplikan mengkonversi hex rgb dan rgb ke hex.
[Lihat demo](
)`` fungsi hexToRgb(str) { jika ( /^#([0-9a-f]{3}|[0-9a-f]{6})$/ig.tes(str) ) { var hex = str.substr(1); hex = hex.panjang == 3 ? hex.mengganti(/(.)/g, '$1$1') : hex; var rgb = parseInt(hex, 16); kembali 'rgb(' + [(rgb >> 16) & 255, (rgb >> 8) & 255, rgb & 255].bergabung(',') + ')'; }
return false; }
fungsi rgbToHex(merah, hijau, biru) { var keluar = '#';
for (var i = 0; i < 3; ++i) { var n = typeof argumen[i] == 'nomor' ? argumen[i] : parseInt(argumen[i]);
if (isNaN(n) || n < 0 || n > 255) { return false; }
keluar += (n < 16 ? '0' : '') + n.toString(16); } kembali keluar } ``
Versi saya hex2rbg:
String.mengganti String.split String.pertandingan
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()+')';
}
}
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. :)