Da RGB a esadecimale e da esadecimale a RGB

Come convertire i colors in formato RGB in formato Hex e viceversa?

Ad esempio, converti '#0080C0' in (0, 128, 192) .

Quanto segue farà alla conversione da RGB a esadecimale e aggiungerà il padding zero richiesto:

 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 

Conversione in altro modo:

 function hexToRgb(hex) { var result = /^#?([af\d]{2})([af\d]{2})([af\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"; 

Infine, una versione alternativa di rgbToHex() , come discusso nella risposta di @ casablanca e suggerita nei commenti di @cwolves:

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

Aggiornamento 3 dicembre 2012

Ecco una versione di hexToRgb() che analizza anche una tripletta esadecimale come "# 03F":

 function hexToRgb(hex) { // Expand shorthand form (eg "03F") to full form (eg "0033FF") var shorthandRegex = /^#?([af\d])([af\d])([af\d])$/i; hex = hex.replace(shorthandRegex, function(m, r, g, b) { return r + r + g + g + b + b; }); var result = /^#?([af\d]{2})([af\d]{2})([af\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"; 

Una versione alternativa di 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; } 

Modifica: 28/04/2017 Ecco un altro approccio sembra essere ancora più veloce

 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 Il nuovo approccio sopra dopo ulteriori test non è più veloce :(. Anche se è un modo alternativo divertente.

Ecco la mia versione:

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

#rrggbb tu intenda la notazione esadecimale in stile HTML, ovvero #rrggbb . Il tuo codice è quasi corretto, tranne che hai invertito l’ordine. Dovrebbe essere:

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

Inoltre, l’uso dei cambi di bit potrebbe renderlo un po ‘più facile da leggere:

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

Questo codice accetta le varianti e l’opacità di #fff e #ffffff.

 function hex2rgb(hex, opacity) { var h=hex.replace('#', ''); h = h.match(new RegExp('(.{'+h.length/3+'})', 'g')); for(var i=0; i 

Versione di ECMAScript 6 della risposta di Tim Down

Conversione da RGB a esadecimale

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

HEX funzionale su una riga RGBA

Supporta sia #fff brevi che lunghi moduli #ffffff .
Supporta canale alfa (opacità).
Non importa se hash specificato o meno, funziona in entrambi i casi.

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

esempi:

 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) 

Questo potrebbe essere usato per ottenere colors dalle proprietà di stile calcolato:

 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 
... // computed
...
console.log( rgbToHex(color) ) // #4d93bc console.log( rgbToHex(borderTopColor) ) // #ff0000

refs:
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

// Ignora la notazione hsl, i valori dei colors sono comunemente espressi come nomi, rgb, rgba o hex-

// Hex può essere 3 valori o 6.

// Rgb può essere una percentuale oltre ai valori interi.

// È meglio tenere conto di tutti questi formati, almeno.

 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(/^[az]+$/.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, da aggiungere alla tua risposta (è un po ‘imbarazzante inserirla in un commento).

Come scritto, ho trovato che la funzione rgbToHex restituisce una stringa con elementi dopo il punto e richiede che i valori r, g, b rientrino nell’intervallo 0-255.

Sono sicuro che questo potrebbe sembrare ovvio per la maggior parte, ma ci sono volute due ore per me per capire e per allora il metodo originale era arrivato a 7 righe prima che mi rendessi conto che il mio problema era altrove. Quindi, nell’interesse di risparmiare tempo e problemi, ecco il mio codice leggermente modificato che controlla i prerequisiti e ritaglia i bit estranei della stringa.

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

Se è necessario confrontare due valori di colore (dati come rgb, nome colore o valore hex) o convertire in HEX, utilizzare l’object 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); 

Possa tu essere dopo una cosa come questa?

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

mostra # 9687c8

Per 3 cifre, la funzione hexToRgb di Tim Down può essere migliorata come di seguito:

 var hex2Rgb = function(hex){ var result = /^#?([af\d]{2})([af\d]{2})([af\d]{2})|([af\d]{1})([af\d]{1})([af\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; }; 

(2017) SEMPLICI funzioni di freccia componibile ES6

Non posso resistere alla condivisione di questo per coloro che potrebbero scrivere js funzionali / compositivi moderni usando ES6. Ecco alcuni one-liner chiari che sto usando in un modulo colore che interpola i colors per la visualizzazione dei dati.

Nota che questo non gestisce affatto il canale alfa.

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

La mia versione di hex2rbg:

  1. Accetta esagoni corti come #fff
  2. Algorithm compacity è o (n), dovrebbe essere più veloce dell’uso di regex. ad es. String.replace, String.split, String.match ecc.
  3. Usa lo spazio costante.
  4. Supporta rgb e rgba.

potrebbe essere necessario rimuovere hex.trim () se si utilizza IE8.

per esempio

 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) 

codice:

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

avevo bisogno di una funzione che accetta anche valori non validi

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

questo è uno spin off della risposta @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(); } 

Sebbene questa risposta non sia adatta a rispondere perfettamente alla domanda, può essere comunque molto utile.

  1. Crea qualsiasi elemento casuale

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

  1. Imposta uno stile valido sul colore che vuoi convertire

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

  1. Chiama di nuovo la proprietà dello stile

> toRgb.style.color;

< "rgb(133, 225, 133)" Il colore è stato convertito in Rgb

Funziona per: Hsl, Hex

Non funziona per: colors con nome

Ho trovato questo problema poiché volevo accettare qualsiasi valore di colore ed essere in grado di aggiungere un’opacità, così ho creato questo rapido plugin jQuery che utilizza la canvas nativa sui browser moderni. Sembra funzionare alla grande.

modificare

Si scopre che non riesco a capire come renderlo un vero e proprio plugin jQuery, quindi lo presenterò come una funzione normale.

 //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, eg '#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; }; 
 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} 

Utilizzare queste funzioni per ottenere il risultato senza alcun problema. 🙂

Sto lavorando con dati XAML con formato esadecimale di #AARRGGBB (Alfa, Rosso, Verde, Blu). Usando le risposte sopra, ecco la mia soluzione:

 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/

Per convertire direttamente da jQuery puoi provare:

  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; 

Versione abbreviata che accetta una stringa:

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

Considerando che molte risposte rispondono solo parzialmente alla domanda (sia da RGB a HEX o viceversa) ho pensato di pubblicare anche la mia risposta parziale.

Ho avuto un problema simile e volevo fare qualcosa di simile: inserire qualsiasi colore CSS valido (HSL (a), RGB (a), HEX o nome colore) e 1. essere in grado di aggiungere o rimuovere un valore alfa, 2. restituisce un object rgb (a). Ho scritto un plugin esattamente per questo scopo. Può essere trovato su GitHub (richiede jQuery, ma se vuoi puoi biforcare e fare una versione vanilla). Ecco una pagina demo . Puoi provare tu stesso e vedere l’output generato al volo.

Copia e incolla le opzioni qui:

RGB Generator accetta un argomento, il colore, e fornisce tre opzioni: asObject, addAlpha e removeAlpha. Quando le tre opzioni sono omesse, il colore RGB verrà restituito come una stringa.

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

Si noti che per impostazione predefinita sono inclusi i componenti alfa. Se il valore di input contiene un valore alfa, l’output sarà in formato RGBa.

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

È ansible disabilitare questo comportamento impostando removeAlpha su true. Questo rimuoverà qualsiasi valore alfa da un colore HSLa o RGBa iniziale.

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

Se, al contrario, si desidera aggiungere un canale alfa, è ansible farlo impostando addAlpha su qualsiasi valore compreso tra 0 e 1. Quando l’input è un colore non trasparente, verrà aggiunto il valore alfa. Se è trasparente, il valore fornito sovrascriverà il componente alfa dell’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) 

Infine è anche ansible emettere il colore RGB (a) come object. Consisterà di r, g, b e facoltativamente 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 

La risposta più votata di Tim Down fornisce la soluzione migliore che posso vedere per la conversione in RGB. Mi piace questa soluzione per la conversione Hex meglio perché fornisce i controlli dei limiti più succinti e lo zero padding per la conversione in 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); }; 

L'uso dello spostamento a sinistra '< <' e o '|' gli operatori rendono anche questa una soluzione divertente.

Ho trovato questo e perché penso che sia abbastanza semplice e ha test di convalida e supporta i valori alfa (opzionale), questo si adatta al caso.

Basta commentare la linea regex se sai cosa stai facendo ed è un po ‘più veloce.

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

Un approccio totalmente diverso per convertire codice colore esadecimale in RGB senza regex

Gestisce entrambi i #FFF e #FFFFFF sulla base della lunghezza della stringa. Rimuove # dall’inizio della stringa e divide ciascun carattere di stringa e lo converte in base10 e lo aggiunge all’indice corrispondente sulla base della sua posizione.

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

L’HTML usa il sistema esadecimale e l’rgb usa il sistema decimale. quindi devi convertire il numero da esadecimale a decimale e viceversa.

Sembra che tu stia cercando qualcosa del genere:

 function hexstr(number) { var chars = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"); var low = number & 0xf; var high = (number >> 4) & 0xf; return "" + chars[high] + chars[low]; } function rgb2hex(r, g, b) { return "#" + hexstr(r) + hexstr(g) + hexstr(b); }