Respostas:
Nota : tanto a versão de rgbToHex
esperar valores inteiros para r
, g
e b
, por isso, você vai precisar para fazer sua própria arredondamento se você tem valores não inteiros.
O que segue será a conversão de RGB para hexadecimal e adicionará qualquer preenchimento zero necessário:
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
Convertendo para o outro lado:
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";
Por fim, uma versão alternativa do rgbToHex()
, conforme discutido na resposta do @ casablanca e sugerido nos comentários do @cwolves:
function rgbToHex(r, g, b) {
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}
alert(rgbToHex(0, 51, 255)); // #0033ff
Aqui está uma versão hexToRgb()
que também analisa um trigêmeo hexadecimal como "# 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)
) produziria o mesmo resultado em computadores grandes e pequenos? Edit: Não. Aqui está o porquê: stackoverflow.com/questions/1041554/…
rgbToHex
função mais recente . Alguém quer tipificar seus valores rgb passados como números inteiros ou modificar levemente a função rgbToHex. Exemplo: jsfiddle.net/cydqo6wj Atual: return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
Modificado: return "#" + ((1 << 24) + ((+r) << 16) + ((+g) << 8) + (+b)).toString(16).slice(1);
Na versão modificada, simplesmente forço os valores de rgb a serem avaliados em números inteiros antes da alteração para 16 / hex.
Uma versão alternativa do 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: 28/03/2017 Aqui está outra abordagem isso parece ser ainda mais rápido
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: 11/08/2017 A nova abordagem acima, após mais testes, não é mais rápida :(. Embora seja uma maneira alternativa divertida.
return [r, g, b].join();
.
return [(bigint = parseInt(hex, 16)) >> 16 & 255, bigint >> 8 & 255, bigint & 255].join();
#
) antes 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'
Retorna uma matriz [r, g, b]
. Funciona também com trigêmeos hexadecimais de taquigrafia, como "#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()
métodoconst rgbToHex = (r, g, b) => '#' + [r, g, b]
.map(x => x.toString(16).padStart(2, '0')).join('')
console.log(rgbToHex(0, 51, 255)); // '#0033ff'
Observe que esta resposta usa os recursos mais recentes do ECMAScript, que não são suportados em navegadores mais antigos. Se você deseja que esse código funcione em todos os ambientes, use o Babel para compilar seu código.
.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(m, r, g, b) => '#' + r + r + g + g + b + b)
torna - se: .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)
Mas existe uma maneira de fazer o regexp funcionar com A de RGBA como um valor hexadecimal opcional? Isso completaria absolutamente a funcionalidade, fazendo um regexp funcionar com hexadecimal RGB e RGBA. Caso contrário, são dois regexps, um com 3 valores e o outro com 4. Você deve dividir o quarto valor por 255 para obter o quarto argumento para rgba ().
Aqui está a minha versão:
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
método. Por que adicionar 0x1000000
a rgb
, e por isso precisamos chamar .slice(1)
no último?
Estou assumindo que você quer dizer notação hexadecimal no estilo HTML, ou seja #rrggbb
. Seu código está quase correto, exceto pelo fato de a ordem ser revertida. Deveria ser:
var decColor = red * 65536 + green * 256 + blue;
Além disso, o uso de troca de bits pode facilitar a leitura:
var decColor = (red << 16) + (green << 8) + blue;
var decColor = (red < 16 ? '0' : '') + (red << 16) + (green << 8) + blue;
red < 16
você precisar prefixar 0
a ao resultado final.
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}}
Este código aceita #fff e #ffffff variantes e opacidade.
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 funcional para RGBA de uma linha
Suporta formulários curtos #fff
e longos #ffffff
.
Suporta canal alfa (opacidade).
Não se importa se o hash especificado ou não, funciona nos dois casos.
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(',') + ')';
}
exemplos:
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)
Isso pode ser usado para obter cores de propriedades de estilo computadas:
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 da mesma forma para verde e azul.
A solução bit a bit normalmente é estranha. Mas, neste caso, acho que é mais 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 a notação hsl, os valores de cores são geralmente expressos como nomes, rgb, rgba ou hex-
// Hex pode ter 3 valores ou 6.
// Rgb pode ser porcentagens e valores inteiros.
// Melhor explicar todos esses formatos, pelo menos.
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, para adicionar à sua resposta (é um pouco estranho encaixar isso em um comentário).
Como foi escrito, descobri que a função rgbToHex retorna uma string com elementos após o ponto e requer que os valores de r, g, b estejam dentro do intervalo de 0 a 255.
Tenho certeza de que isso pode parecer óbvio para a maioria, mas demorou duas horas para eu descobrir e, então, o método original havia aumentado para sete linhas antes que eu percebesse que meu problema estava em outro lugar. Portanto, no interesse de economizar tempo e aborrecimentos para os outros, aqui está o meu código ligeiramente alterado que verifica os pré-requisitos e apara os bits estranhos da 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);
}
(2017) Funções de seta composíveis SIMPLE ES6
Não consigo resistir a compartilhar isso para aqueles que podem estar escrevendo alguns js funcionais / composicionais modernos usando o ES6. Aqui estão algumas frases simples que estou usando em um módulo de cores que faz interpolação de cores para visualização de dados.
Observe que isso não lida com o canal 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));
Tentar
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 você precisar comparar dois valores de cores (fornecidos como RGB, nome da cor ou valor hexadecimal) ou converter para HEX, use o objeto de tela 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);
Para 3 dígitos, a função hexToRgb de Tim Down pode ser aprimorada como abaixo:
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;
};
Me deparei com esse problema, já que queria aceitar qualquer valor de cor e poder adicionar uma opacidade, então criei esse plugin jQuery rápido que usa a tela nativa em navegadores modernos. Parece funcionar muito bem.
Editar
Acontece que eu não consigo descobrir como torná-lo um plug-in jQuery adequado, por isso vou apresentá-lo como uma função regular.
//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;
};
eu precisava de uma função que aceite valores inválidos também,
rgb (-255, 255, 255) rgb (510, 255, 255)
este é um spin off da resposta @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}
Use estas funções para obter o resultado sem nenhum problema. :)
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"));
Embora seja improvável que essa resposta se encaixe perfeitamente na pergunta, ela pode ser muito útil.
var toRgb = document.createElement('div');
toRg.style.color = "hsl(120, 60%, 70%)";
> toRgb.style.color;
< "rgb(133, 225, 133)"
Sua cor foi convertida para Rgb
Trabalhos para: Hsl, Hex
Não funciona para: cores nomeadas
Minha versão do hex2rbg:
String.replace, String.split, String.match
etc.pode ser necessário remover o hex.trim () se você estiver usando o IE8.
por exemplo
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)
código:
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()+')';
}
}
Esse trecho converte hexadecimal para rgb e rgb para hexadecimal.
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
}
Estou trabalhando com dados XAML que possuem um formato hexadecimal de #AARRGGBB (alfa, vermelho, verde e azul). Usando as respostas acima, aqui está minha solução:
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)";
}
Para converter diretamente do jQuery, você pode tentar:
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 que muitas respostas respondem parcialmente à pergunta (de RGB para HEX ou o contrário), pensei em postar minha resposta parcial também.
Eu tive um problema semelhante e queria fazer algo assim: insira qualquer cor CSS válida (HSL (a), RGB (a), HEX ou nome da cor) e 1. seja capaz de adicionar ou remover um valor alfa, 2. retornar um objeto rgb (a). Eu escrevi um plugin exatamente para esse fim. Ele pode ser encontrado no GitHub (requer jQuery, mas se você quiser, pode bifurcá-lo e criar uma versão baunilha). Aqui está uma página de demonstração . Você pode tentar por si mesmo e ver a saída gerada em tempo real.
Vou copiar e colar as opções aqui:
O RGB Generator aceita um argumento, a cor, e fornece três opções: asObject, addAlpha e removeAlpha. Quando as três opções são omitidas, a cor RGB será retornada como uma sequência.
$.rgbGenerator("white")
// Will return rgb(255,255,255)
Observe que, por padrão, os componentes alfa estão incluídos. Se o valor de entrada contiver um valor alfa, a saída estará no formato RGBa.
$.rgbGenerator("hsla(0,100%,50%,0.8)")
// Will return rgba(255,0,0,0.8)
Você pode desativar esse comportamento definindo removeAlpha como true. Isso removerá qualquer valor alfa de uma cor HSLa ou RGBa inicial.
$.rgbGenerator("hsla(0,100%,50%,0.8)", {removeAlpha: true})
// Will return rgb(255,0,0)
Se, por outro lado, você deseja adicionar um canal alfa, pode fazê-lo definindo addAlpha como qualquer valor entre 0 e 1. Quando a entrada é uma cor não transparente, o valor alfa será adicionado. Se for transparente, o valor fornecido substituirá o componente alfa da entrada.
$.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)
Finalmente, também é possível imprimir a cor RGB (a) como um objeto. Ele consistirá em r, g, be opcionalmente 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
A resposta mais bem avaliada por Tim Down fornece a melhor solução que posso encontrar para conversão em RGB. Eu gosto mais desta solução para a conversão Hex, porque ela fornece a verificação de limites mais sucinta e o preenchimento zero para a conversão em 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);
};
O uso do deslocamento esquerdo '<<' e ou '|' Os operadores também fazem disso uma solução divertida.
Descobri isso e, porque acho que é bastante simples, possui testes de validação e suporta valores alfa (opcional), isso será adequado ao caso.
Apenas comente a linha regex se você souber o que está fazendo e é um pouco mais rápido.
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(",")+")";
}
<<
é o operador de mudança à esquerda bit a bit. Assumindo queg
é um número inteiro diferente de zero,g << 8
multiplica-se efetivamenteg
por 256, adicionando zeros ao final de sua representação hexadecimal. Da mesma formar << 16
adiciona 4 zeros. A adição1 << 24
(1000000 em hexadecimal) garante que a representação hexadecimal seja preenchida à esquerda com os zeros necessários assim que a guia principal1
for retiradaslice()
. Por exemplo, ser
eg
fossem zero eb
51,((r << 16) + (g << 8) + b).toString(16)
retornaria a string "33"; adicione1 << 24
e você obtém "1000033". Em seguida, retire o1
e você está lá.