RGB para Hex e Hex para RGB


555

Como converter cores no formato RGB para o formato Hex e vice-versa?

Por exemplo, converta '#0080C0'para (0, 128, 192).

Respostas:


1236

Nota : tanto a versão de rgbToHexesperar valores inteiros para r, ge 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

Atualização 3 de dezembro de 2012

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


10
@ Vitim.us: <<é o operador de mudança à esquerda bit a bit. Assumindo que gé um número inteiro diferente de zero, g << 8multiplica-se efetivamente gpor 256, adicionando zeros ao final de sua representação hexadecimal. Da mesma forma r << 16adiciona 4 zeros. A adição 1 << 24(1000000 em hexadecimal) garante que a representação hexadecimal seja preenchida à esquerda com os zeros necessários assim que a guia principal 1for retirada slice(). Por exemplo, se re gfossem zero e b51, ((r << 16) + (g << 8) + b).toString(16)retornaria a string "33"; adicione 1 << 24e você obtém "1000033". Em seguida, retire o 1e você está lá.
Tim Baixo

A mudança de bits (por exemplo (r << 16)) produziria o mesmo resultado em computadores grandes e pequenos? Edit: Não. Aqui está o porquê: stackoverflow.com/questions/1041554/…
WoodenKitty

@ Gotico: Desculpe reverter sua edição, mas muitas vezes não é possível ou prático usar o ES6. A versão anterior funcionará em qualquer lugar.
Tim Baixo

3
seu rgbToHex não funciona. obter o resultado engraçado: # f55b2f00
TheCrazyProfessor

1
Em relação à rgbToHexfunçã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.
user2977468

148

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.


57
Uma linha de perfeição: return [r, g, b].join();.
Pavlo

5
Ou para a solução de uma linha totalmente encapsuladora:return [(bigint = parseInt(hex, 16)) >> 16 & 255, bigint >> 8 & 255, bigint & 255].join();
Plutão

12
Eu estou usando isso com um ajuste - remova caracteres não hexadecimais (como um líder #) antes parseInt:hex = hex.replace(/[^0-9A-F]/gi, '');
joews

5
Não seja tão rápido ao usar a versão abreviada. JSPerf mostra que o de esta resposta é mais rápida: jsperf.com/2014-09-16-hex-to-rgb
Olav Kokovkin

1
Tenha cuidado com isso, sua saída não é confiável. Ele fez uma cor próxima ao preto parecer rosa escuro. Melhor usar a função da resposta superior.
Maciej Krawczyk

64

Versão ECMAScript 6 de da resposta Tim Down

Convertendo RGB em hexadecimal

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'

Convertendo hex para RGB

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]

Bônus: RGB para hexadecimal usando o padStart()método

const 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.


hexToRgb () é facilmente adaptado para lidar com a notação RGBA hexa de 4 e 8 dígitos: .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 ().
jamess

44

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

legal, mas a pergunta era hex2rgb. Você pode fazê-lo tão curto como este que seria bom :)
K. Kilian Lindberg

4
Embora isso não ocorra nos dois sentidos, eu tenho que fazer um voto positivo porque, por algum motivo, as outras soluções rgb para hexadecimais nesta pergunta não estavam funcionando para mim.
Goose

A pergunta era do rgb2hex primeiro. Enfim, eu adicionei meu próprio hex2rgb.
FelipeC

Um pouco confuso sobre o rgb2hexmétodo. Por que adicionar 0x1000000a rgb, e por isso precisamos chamar .slice(1)no último?
precisa saber é o seguinte

Como o azul seria #FF, adicionamos 0x1000000, então é # 10000FF e removemos o primeiro "1".
FelipeC

26

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;

Ótimo, exceto que você precisa deixar o zero-pad para 6 caracteres se vermelho <16: #var decColor = (red < 16 ? '0' : '') + (red << 16) + (green << 8) + blue;
Mark Kahn

Parece funcionar, exceto por isso: (0,128,192) provavelmente por causa do 0?
Sindar

@ lobos: Você está certo, eu senti falta disso. Mas deve ser anexado à sequência final, não ao número inteiro.
Casablanca

@Sindar: Veja o comentário de @cwolves, se red < 16você precisar prefixar 0a ao resultado final.
Casablanca

20
ok, AQUI:var hexColor = ((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).substr(1);
Mark Kahn

22
function hex2rgb(hex) {
  return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}

2
Eu amo respostas simples
Bjorn Behrendt

Feitiçaria! você deve adicionar uma explicação a essa frase muito legal.
James Harrington

Agradável! Aqui é a mesma coisa, exceto minified e retornando um objeto com propriedades 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}}
ashleedawg

21

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

11

HEX funcional para RGBA de uma linha

Suporta formulários curtos #fffe 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)  

8
Tente escrever código legível por humanos, não apenas uma linha. Não há ganho se você minificar seu código antes da produção.
Roko C. Buljan

11

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

Ref: https://github.com/k-gun/so/blob/master/so_util.js


Obrigado por isso. Mas há um pequeno erro: deve retornar (r.length == 1 ? "0" + r : r)e da mesma forma para verde e azul.
typhon

7

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

6

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

Promovido por esta ser a versão mais abrangente que eu já vi. Seria ótimo se também pudesse extrair as cores do rgba.
Michael Scheper

6

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

5

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

5

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``


4

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

3

Você pode estar atrás de algo assim?

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

alert(RGB2HTML(150, 135, 200));

exibe # 9687c8


1
> RGB2HTML> 2HTML> TO HTML (ಠ ʖ̯ ಠ) O HEX não está relacionado ao HTML
22419

3

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

2

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

2

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

2
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. :)


2

Versão abreviada que aceita uma string:

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

Para verificar se ainda não é hexadecimal

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


2

Embora seja improvável que essa resposta se encaixe perfeitamente na pergunta, ela pode ser muito útil.

  1. Crie qualquer elemento aleatório

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

  1. Defina qualquer estilo válido para a cor que você deseja converter

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

  1. Chame a propriedade style novamente

> toRgb.style.color;

< "rgb(133, 225, 133)" Sua cor foi convertida para Rgb

Trabalhos para: Hsl, Hex

Não funciona para: cores nomeadas


Essa pode ser a resposta mais prática ao trabalhar com o navegador. Geralmente, você deseja simplesmente comparar a cor de um elemento existente a uma cor conhecida, expressa na anotação #.
Panu Logic

2

Minha versão do hex2rbg:

  1. Aceitar hexadecimal curto como #fff
  2. A compactação do algoritmo é o (n), deve ser mais rápida do que usar regex. por exemploString.replace, String.split, String.match etc.
  3. Use espaço constante.
  4. Suporte rgb e rgba.

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

Note que h.join(',')é a mesma coisa que h.join().

2

Esse trecho converte hexadecimal para rgb e rgb para hexadecimal.

Ver demonstração

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
}

Bom por lidar com taquigrafia, mas poderia retornar uma estrutura em vez de uma string?
Dunc

1

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

http://jsfiddle.net/kvLyscs3/


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

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

1

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

1

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.


1

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(",")+")";
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.