Como se converte uma cor Hexadecimal (#FFFFFF
) para RGB (Red, Green, Blue)?
7 Respostas
É 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)
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
}
-
3Nota: 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
). Commented 13/11/2015 às 18: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");
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
-
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
-
-
@devgaspa eu usei substring (por falta de coisa melhor hehehe)– Largato ♦Commented 13/11/2015 às 19:33
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.
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;
}
-
2Outra 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
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
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);
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.