Risposte:
Nota : sia la versione di rgbToHex
si aspettano da valori interi per r
, g
e b
, quindi avrai bisogno di fare la propria arrotondamento se si dispone di valori non interi.
Quanto segue farà alla conversione da RGB a esadecimale e aggiungerà l'eventuale riempimento 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
Convertire in altro modo:
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";
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);
}
alert(rgbToHex(0, 51, 255)); // #0033ff
Ecco una versione hexToRgb()
che analizza anche una tripletta esadecimale come "# 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)
) Darebbe lo stesso risultato su computer sia big che little endian? Modifica: non lo fa. Ecco perché: stackoverflow.com/questions/1041554/...
rgbToHex
funzione. Uno vorrà o tipizzare i valori rgb passati come numeri interi o modificare leggermente la funzione rgbToHex. Esempio: jsfiddle.net/cydqo6wj Current: return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
Modified: return "#" + ((1 << 24) + ((+r) << 16) + ((+g) << 8) + (+b)).toString(16).slice(1);
Nella versione modificata, forzo semplicemente i valori rgb per essere valutati a numeri interi prima della modifica in 16 / hex.
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/03/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];
}
Modifica: 8/11/2017 Il nuovo approccio sopra dopo ulteriori test non è più veloce :(. Sebbene sia un modo alternativo divertente.
return [r, g, b].join();
.
return [(bigint = parseInt(hex, 16)) >> 16 & 255, bigint >> 8 & 255, bigint & 255].join();
#
) prima di 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'
Restituisce un array [r, g, b]
. Funziona anche con terzine esagonali stenografiche come "#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()
metodoconst rgbToHex = (r, g, b) => '#' + [r, g, b]
.map(x => x.toString(16).padStart(2, '0')).join('')
console.log(rgbToHex(0, 51, 255)); // '#0033ff'
Si noti che questa risposta utilizza le funzionalità ECMAScript più recenti, che non sono supportate nei browser meno recenti. Se vuoi che questo codice funzioni in tutti gli ambienti, dovresti usare Babel per compilare il tuo codice.
.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(m, r, g, b) => '#' + r + r + g + g + b + b)
diventa: .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)
Ma c'è un modo per far funzionare il regexp con A di RGBA come quarto valore esadecimale opzionale? Ciò completerebbe assolutamente la funzionalità, facendo funzionare una regexp con RGB esadecimale e RGBA. Altrimenti sono due regexps, uno con 3 valori, l'altro con 4. Devi dividere il 4o valore per 255 per ottenere il 4o arg per rgba ().
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;
}
rgb2hex
metodo. Perché aggiungiamo 0x1000000
a rgb
, e perché abbiamo bisogno di chiamare .slice(1)
finalmente?
Suppongo che intendi la notazione esadecimale in stile HTML, vale a dire #rrggbb
. Il tuo codice è quasi corretto, tranne per il fatto che l'ordine è stato invertito. Dovrebbe essere:
var decColor = red * 65536 + green * 256 + blue;
Inoltre, l'uso dei bit-shift potrebbe rendere un po 'più semplice la lettura:
var decColor = (red << 16) + (green << 8) + blue;
var decColor = (red < 16 ? '0' : '') + (red << 16) + (green << 8) + blue;
red < 16
devi aggiungere un prefisso 0
al risultato finale.
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}}
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<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 a RGBA funzionale a una riga
Supporta entrambe #fff
le #ffffff
forme corte e lunghe .
Supporta il canale alfa (opacità).
Non importa se l'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 i colori dalle proprietà di stile calcolate:
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)
e allo stesso modo per verde e blu.
La soluzione bit a bit normalmente è strana. Ma in questo caso immagino sia più elegante 😄
function hexToRGB(hexColor){
return {
red: (hexColor >> 16) & 0xFF,
green: (hexColor >> 8) & 0xFF,
blue: hexColor & 0xFF,
}
}
Uso:
const {red, green, blue } = hexToRGB(0xFF00FF)
console.log(red) // 255
console.log(green) // 0
console.log(blue) // 255
// Ignorando la notazione hsl, i valori di colore sono comunemente espressi come nomi, rgb, rgba o hex-
// Hex può essere 3 valori o 6.
// Rgb può essere percentuali e 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(/^[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, da aggiungere alla tua risposta (è un po 'imbarazzante inserirla in un commento).
Come scritto, ho scoperto 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 può sembrare ovvio per la maggior parte, ma ci sono volute due ore per capire e da allora il metodo originale era arrivato a 7 righe prima di rendermi conto che il mio problema era altrove. Quindi, nell'interesse di risparmiare tempo e fatica agli altri, ecco il mio codice leggermente modificato che controlla i pre-requisiti e taglia 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);
}
(2017) SIMPLE ES6 funzioni freccia componibili
Non posso resistere alla condivisione di questo per coloro che potrebbero scrivere dei moderni js funzionali / compositivi usando ES6. Ecco alcune semplici righe che sto usando in un modulo colore che esegue l'interpolazione del colore per la visualizzazione dei dati.
Si noti 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));
Provare
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``
Se è necessario confrontare due valori di colore (dati come RGB, nome colore o valore esadecimale) o convertire in esadecimale, utilizzare l'oggetto 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);
Potresti cercare qualcosa del genere?
function RGB2HTML(red, green, blue)
{
return '#' + red.toString(16) +
green.toString(16) +
blue.toString(16);
}
alert(RGB2HTML(150, 135, 200));
visualizza # 9687c8
Per 3 cifre la funzione hexToRgb di Tim Down può essere migliorata come di seguito:
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;
};
Mi sono imbattuto in questo problema poiché volevo accettare qualsiasi valore di colore ed essere in grado di aggiungere un'opacità, quindi ho realizzato questo rapido plug-in jQuery che utilizza la tela nativa sui browser moderni. Sembra funzionare alla grande.
modificare
Risulta che non riesco a capire come renderlo un plugin jQuery corretto, quindi lo presenterò come una normale funzione.
//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;
};
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 di @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}
Utilizzare queste funzioni per ottenere il risultato senza problemi. :)
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"));
È improbabile che questa risposta si adatti perfettamente alla domanda, ma può essere molto utile.
var toRgb = document.createElement('div');
toRg.style.color = "hsl(120, 60%, 70%)";
> toRgb.style.color;
< "rgb(133, 225, 133)"
Il tuo colore è stato convertito in Rgb
Funziona per: Hsl, Hex
Non funziona per: colori con nome
La mia versione di hex2rbg:
String.replace, String.split, String.match
. ecc.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()+')';
}
}
Questo frammento converte hex in rgb e rgb in 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
}
Sto lavorando con i dati XAML che hanno un formato esadecimale di #AARRGGBB (Alpha, Red, Green, Blue). Utilizzando 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)";
}
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;
Considerando che molte risposte rispondono solo parzialmente alla domanda (da RGB a HEX o viceversa), ho pensato di pubblicare anche la mia risposta parziale.
Ho avuto un problema simile e volevo fare qualcosa del genere: inserire qualsiasi colore CSS valido (HSL (a), RGB (a), HEX o nome del colore) e 1. essere in grado di aggiungere o rimuovere un valore alfa, 2. restituisce un oggetto rgb (a). Ho scritto un plugin esattamente per questo scopo. Può essere trovato su GitHub (richiede jQuery, ma se vuoi puoi forkarlo e creare una versione vaniglia). Ecco una pagina dimostrativa . 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 offre tre opzioni: asObject, addAlpha e removeAlpha. Quando le tre opzioni vengono 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)
È possibile disabilitare questo comportamento impostando removeAlpha su true. Ciò 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, d'altra parte, si desidera aggiungere un canale alfa, è possibile 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 possibile produrre il colore RGB (a) come oggetto. Consisterà in r, g, be 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 da Tim Down offre la migliore soluzione che posso vedere per la conversione in RGB. Mi piace questa soluzione per la conversione esadecimale meglio perché fornisce il controllo dei limiti più conciso e lo zero padding per la conversione in esadecimale.
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 poiché penso che sia piuttosto semplice e che abbia test di validazione e supporti valori alfa (opzionale), questo si adatterà al caso.
Commenta la riga 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(",")+")";
}
<<
è l'operatore di spostamento a sinistra bit a bit. Supponendo cheg
sia un numero intero diverso da zero,g << 8
quindi si moltiplica efficacementeg
per 256, aggiungendo a zero alla fine della sua rappresentazione esadecimale. Allo stesso modor << 16
aggiunge 4 zeri. L'aggiunta1 << 24
(1000000 in esadecimale) garantisce che la rappresentazione esadecimale sia riempita a sinistra con tutti gli zeri richiesti una volta1
rimosso il comando utilizzandoslice()
. Ad esempio, ser
eg
fossero entrambi zero eb
fosse 51,((r << 16) + (g << 8) + b).toString(16)
restituirebbe la stringa "33"; aggiungi1 << 24
e otterrai "1000033". Quindi spoglia il1
e sei lì.