15

Como se converte uma cor Hexadecimal (#FFFFFF) para RGB (Red, Green, Blue)?

Exemplo

6
  • Eu não coloquei tag de linguagem, pois pela minha pesquisa no site, não se tem este conteúdo, a mais próxima que achei foi esta. Se mais alguém quiser responder com outra linguagem. Commented 13/11/2015 às 17:12
  • 5
    Se você não está interessado numa linguagem específica, que tal colocar independente-de-linguagem e aceitar uma resposta em pseudo-código ou que explique o algoritmo sem envolver código (tal como a resposta do Rcoster por exemplo)? Na minha opinião, da forma que está (cada um respondendo numa linguagem diferente) a pergunta está muito ampla, fica difícil escolher uma resposta pra aceitar. Fica meio que como uma mistura de lista com code-golf rsrs.
    – mgibsonbr
    Commented 13/11/2015 às 18:09
  • 1
    @mgibsonbr também fiquei com uma sensação estranha a respeito da pergunta (apesar de eu mesmo ter entrado na brincadeira). Você ter levantado o fato de se parecer com uma lista me faz pensar que realmente é caso para fechar.
    – Math
    Commented 13/11/2015 às 18:12
  • @mgibsonbr, meu intuito era mesmo criam um repositórios com funções ja pontas, ai cada um contribuía com sua linguagem. Mas sim a resposta eu adotaria por este critério. Commented 13/11/2015 às 18:28
  • 2
    @GuilhermeLautert Sugiro dar uma olhada no post do meta 'Como podemos lidar com as “listas”?' caso já não tenha feito. Isso que você quer fazer é algo bastante desejável no site, mas ninguém sabe ainda como fazer de modo bem feito, então virou uma espécie de "tabu" aqui... Vamos ver como a comunidade reage, a pergunta não é ruim, já houve outras no mesmo estilo que eu realmente queria que tivessem sido mantidas, mas acabaram fechadas e depois removidas. Se essa der certo, pode virar um precedente positivo... :)
    – mgibsonbr
    Commented 13/11/2015 às 18:36

7 Respostas 7

18

É uma dúvida mais de matemática/matemática computacional do que programação. Segue a minha contribuição:

O código RGB, como o nome diz, é composto por 3 elementos: Red, Green e Blue. No caso, o formato #ffffff é uma representação hexadecimal do código da cor, onde cada duas letras representam uma cor (na ordem). Para 'traduzir' esse número, devemos fazer uma mudança de base - de hexadecimal (16), para decimal (10).

Os 10 primeiros números da base hexadecimal são iguais à base decimal (0 a 9), os 6 restantes são (e sua representação em decimal): A (10); B (11); C (12); D (13); E (14) e F (15).

A conversão de base deve ser feita digito a digito de cada cor, da direita para esquerda. Por exemplo:

#ffffff:
ff = 15 * 16 ^ 0 + 15 * 16 ^ 1 = 15 * 1 + 15 * 16 = 255
Portanto, em decimal, é (255, 255, 255)

#f5ffff
f5 = 5 * 16 ^ 0 + 15 * 16 ^ 1 = 5 * 1 + 15 * 16 = 245
ff = 15 * 16 ^ 0 + 15 * 16 ^ 1 = 15 * 1 + 15 * 16 = 255
Portanto, em decimal é (245, 255, 255)
11

Em PHP

retirei a resposta daqui:

function hex2rgb($hex){
    $hex = str_replace("#", "", $hex);

    if(strlen($hex) == 3) {
        $r = hexdec(substr($hex,0,1).substr($hex,0,1));
        $g = hexdec(substr($hex,1,1).substr($hex,1,1));
        $b = hexdec(substr($hex,2,1).substr($hex,2,1));
    } else {
        $r = hexdec(substr($hex,0,2));
        $g = hexdec(substr($hex,2,2));
        $b = hexdec(substr($hex,4,2));
    }
    $rgb = array($r, $g, $b);
    //return implode(",", $rgb); // returns the rgb values separated by commas
    return $rgb; // returns an array with the rgb values
}
1
  • 3
    Nota: Esta resposta tem algo que as outras não têm, que é levar em consideração tanto 1 nibble por cor (ex.: #fff) quanto 1 byte por cor (#ffffff).
    – mgibsonbr
    Commented 13/11/2015 às 18:11
11

Em C#

var cor = System.Drawing.ColorTranslator.FromHtml("#FFFFFF");
var corEmRgb = System.Drawing.Color.FromArgb(cor.R, cor.G, cor.B);

E para fazer ao contrário

var cor = Color.FromArgb(255, 255, 255);
var hex = cor.R.ToString("X2") + cor.G.ToString("X2") + cor.B.ToString("X2");
10

Em JavaScript ♥

var rgb = ['001', '000', '255'];
var hex = '0100ff';

function converter(v) {
    if(typeof v === 'string') {
        var r = [];
    	v.match(/[0-9a-f]{2}/g).forEach(function(arr) {
        	r.push(('000' + parseInt(arr,16)).slice(-3));
        });
        return r;
    } else {
        var s;
    	v.forEach(function(arr) {
        	s = (s || '')  + ('00' + parseInt(arr,10).toString(16)).slice(-2);
        });
        return s;
    }
}

document.writeln('rgb: ' + converter(hex));
document.writeln('hex: ' + converter(rgb));

Referência daqui

4
  • 3
    @devgaspa na minha resposta para outro problema eu solucionei o problema do zero a esquerda de uma maneira até que simples, se tiver a curiosidade de ver. Somei 256, e peguei os 2 últimos dígitos do resultado.
    – Largato
    Commented 13/11/2015 às 19:17
  • @Bacco quando faço desta maneira que você fez não preciso usar slice certo ? Commented 13/11/2015 às 19:30
  • Legal, agora funciona.
    – bfavaretto
    Commented 13/11/2015 às 19:32
  • @devgaspa eu usei substring (por falta de coisa melhor hehehe)
    – Largato
    Commented 13/11/2015 às 19:33
8

Em Python

def hex_to_rgb(value):
    value = value.lstrip('#')
    lv = len(value)
    return tuple(int(value[i:i + lv // 3], 16) for i in range(0, lv, lv // 3))

def rgb_to_hex(rgb):
    return '#%02x%02x%02x' % rgb
                                            # Resultados
print hex_to_rgb("#123456")                 # (18, 52, 86)
print hex_to_rgb("#ffffff")                 # (255, 255, 255)
print hex_to_rgb("#ffffffffffff")           # (65535, 65535, 65535)
print rgb_to_hex((18, 52, 86))              # #123456
print rgb_to_hex((255, 255, 255))           # #ffffff
print rgb_to_hex((65535, 65535, 65535))     # #ffffffffffff

Veja funcionando no Ideone.

Fonte: Converting hex color to RGB and vice-versa

4

Em C++

// Este programa não converte entre as bases decimal e hexadecimal
// Apenas altera a representação dos inteiros

#include <iostream>
using namespace std;

int main(){
    unsigned int hexadecimal[3]={0xFF,0xFF,0xFF};
    unsigned int decimal[3]={255,255,255};

    for (auto i:hexadecimal)
        cout << i << " ";

    cout << endl;

    for (auto j:decimal)
        cout << hex << j << " ";
    return 0;

}
1
  • 2
    Outra forma é, está claro, usar uma qualquer calculadora científica para converter entre as diversas bases. A própria calculadora que vem com o Windows, por exemplo, permite fazer isso. Commented 10/12/2015 às 18:12
0

Em Java

Utilizando a classe Color de java.awt basta fazer:

Color color = Color.decode("#FFFFFF");

Que obtem a cor correspondente ao valor em hexadecimal. Depois é possível obter cada componente RGB da cor resultante através dos métodos:

  • getRed()
  • getGreen()
  • getBlue()

Exemplo:

System.out.println(color.getRed()+" "+color.getGreen()+" "+color.getBlue()); //255 255 255

Fonte


Fazendo manualmente fica mais parecido com as outras respostas:

String hex = "#FFFFFF";
int red =   Integer.parseInt(hex.substring(1 , 3), 16);
int green = Integer.parseInt(hex.substring(3 , 5), 16);
int blue =  Integer.parseInt(hex.substring(5 , 7), 16);

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .