Converter HEX em RGB Hexadecimal ↔ Red Green Blue Grátis Online Seguro
Escreva um valor em HEX e leia-o de imediato em RGB. A conta faz-se no seu navegador, nada é enviado para lugar nenhum, e aquilo de que o resultado depende está escrito mais abaixo em vez de ser presumido.
Nada é enviado
De onde vêm estas notações
O hexadecimal e o RGB são a mesma coisa escrita duas vezes. Uma cor de tela são três números — quanta luz vermelha, verde e azul emitir — cada um de 0 a 255, ou seja um byte; o hexadecimal escreve simplesmente esses bytes na base dezesseis, de modo que #FF8800 e rgb(255, 136, 0) são a mesma ordem ao mesmo pixel. O HSL foi inventado porque nenhum dos dois é legível por um humano: dá o matiz como um ângulo numa roda de cores, com saturação e luminosidade em percentagem, de modo que um designer pode clarear algo sem recalcular três números. O CMYK pertence a um mundo totalmente diferente — ao da tinta, não ao da luz. É subtrativo, construído com quatro chapas de impressão, e não alcança todas as cores de um tela, porque o tela emite luz enquanto o papel apenas a reflete.
Onde as encontra
O hexadecimal é o que se escreve numa planilha de estilo e o que uma ferramenta de desenho lhe entrega. O RGB aparece onde quer que uma cor precise de aritmética: gradientes, transparência, código que calcula um tom. Ao HSL recorre-se ao afinar uma paleta à mão, porque as alterações pretendidas são em geral alterações de um dos seus três números. O CMYK é o que a gráfica pede, e converter para ele é o instante em que um desenho deixa de ser luz e passa a ser tinta.
Perguntas frequentes
Por que o meu resultado CMYK difere do que a gráfica me dá?
Porque não existe uma única conversão correta. A aritmética desta página é a simples, independente do dispositivo, e é a resposta certa quando se precisa de um ponto de partida ou de um equivalente aproximado. Uma gráfica converte através de um perfil de cor que tem em conta a tinta, o papel e a máquina concretos, e a mesma cor RGB dará valores CMYK diferentes em papel couché brilhante e em papel não revestido. Para o que tenha de coincidir, peça à gráfica o perfil dela em vez de confiar numa fórmula.
Por que algumas cores de tela não se podem imprimir?
Porque os dois não alcançam as mesmas cores. Um tela faz cor somando luz e consegue um ciano ou um verde vivo e saturado que a tinta simplesmente não iguala; o papel faz cor absorvendo luz, e o mais claro que pode ser é o branco da página. O conjunto de cores que cada um alcança chama-se gamute, e onde não se sobrepõem, uma conversão tem de escolher a cor disponível mais próxima. É por isso que uma cor viva na tela parece muitas vezes um pouco apagada no papel.
O resultado é exato?
Onde as duas unidades se definem uma pela outra com números inteiros, sim — a página informa isso acima do número, e o único arredondamento está em quantos dígitos se mostram. Onde a razão não tem decimal finita, a página mostra doze algarismos significativos e diz que a relação é aproximada, em vez de fingir o contrário.
Alguma coisa que escrevo sai do meu aparelho?
Não. A aritmética roda no seu navegador; nada é enviado, e nem sequer há servidor para o receber. Carregada uma vez, a página continua funcionando com a rede desligada.
Por que converter HEX em RGB
Uma ferramenta de design lhe entrega uma cor como #5A4632. Uma folha de estilos, um script de canvas, uma biblioteca de gráficos ou um programa gráfico a pede como rgb(90, 70, 50). São a mesma cor, e o trabalho de passar de uma grafia para a outra aparece o tempo todo: um guia de marca lista códigos hex e o seu código precisa de números para calcular um tom mais claro, um cliente manda uma cor de um logotipo e você precisa preencher um rgba() com transparência, uma biblioteca aceita apenas três valores separados. Converter HEX em RGB é uma tarefa pequena, e um conversor confiável poupa você de fazer aritmética na base dezesseis de cabeça e errar.
A conversão é exata, o que não vale para toda conversão de cores. O hex e o rgb() são duas grafias dos mesmos três números, as quantidades de luz vermelha, verde e azul que uma tela deve emitir, cada uma de 0 a 255. Nada é aproximado, e uma ida e volta devolve o que partiu. Esta página faz isso no seu navegador, e nada é enviado. Abaixo você encontra como os dígitos hex se associam aos três números, como a transparência é transportada, o que faz a forma abreviada, os limites do sRGB e as situações em que desenvolvedores e designers precisam converter HEX em RGB.
Como a conversão funciona
Três pares de dígitos viram três números
Uma cor hex é um sinal de jogo da velha seguido de seis dígitos hexadecimais, que são lidos em pares: o primeiro par é o vermelho, o segundo o verde, o terceiro o azul. Cada par é um número na base dezesseis entre 00 e FF, que é de 0 a 255 no sistema decimal que você usa todo dia. Assim #5A4632 se divide em 5A, 46 e 32. 5A é 5 × 16 + 10 = 90, 46 é 4 × 16 + 6 = 70, e 32 é 3 × 16 + 2 = 50. A cor é rgb(90, 70, 50), que é o exemplo com que a página começa.
Por que os dígitos vão de 0 a F
A base dezesseis precisa de dezesseis símbolos, então depois do 9 vêm as letras de A a F, que representam de 10 a 15. Um par desses dígitos dá 16 × 16 = 256 valores, exatamente o que um byte comporta. Uma cor de tela são três bytes, e o hex é simplesmente um jeito compacto de escrevê-los: seis caracteres em vez de três números com vírgulas e parênteses.
Maiúsculas e minúsculas
#5a4632 e #5A4632 são a mesma cor. O CSS aceita qualquer uma, e este conversor também. Escolha uma convenção para um projeto e mantenha-a, já que misturar maiúsculas e minúsculas dificulta a busca numa folha de estilos.
O que a conversão mantém e o que não consegue
Mantém a cor, exatamente
O hex e o rgb() são duas grafias dos mesmos três números, de 0 a 255 para vermelho, verde e azul, então nada é aproximado e uma ida e volta devolve o que partiu. Converta HEX em RGB e de volta, e você tem o mesmo código com que começou, com a possível exceção das letras maiúsculas.
Transporta a transparência
Um quarto valor para a transparência também é transportado: #RRGGBBAA vira rgba() e vice-versa. O último par é o canal alfa, de 00, totalmente transparente, a FF, totalmente opaco. Assim #5A463280 é rgba(90, 70, 50, 0.5), já que 80 em hex é 128, e 128 de 255 é cerca de metade. Os oito dígitos são aceitos por todos os navegadores atuais.
Não consegue descrever cores fora do sRGB
As duas grafias descrevem o sRGB, o espaço de cor que as telas usam há trinta anos. Elas não conseguem descrever uma cor fora dele, que é para o que existem as notações novas do CSS, lab(), oklch() e color(). Os monitores modernos podem mostrar cores mais saturadas do que o sRGB comporta, e um designer que escolheu uma cor assim numa ferramenta de gama ampla a verá cortada para o sRGB quando escrita como hex.
A forma abreviada é expandida, não preservada
A forma abreviada é expandida em vez de preservada: #abc volta como #AABBCC, que é a mesma cor escrita do modo longo. Cada dígito é dobrado. Isso significa que você pode colar um código de três dígitos e obter os números certos, mas não consegue recuperar a grafia curta a partir da longa só olhando, apenas conferindo se cada par se repete.
Cores comuns e seus números
Algumas para lembrar
O branco é #FFFFFF, que é rgb(255, 255, 255): as três luzes à potência máxima. O preto é #000000, rgb(0, 0, 0): nenhuma luz. O vermelho puro é #FF0000, o verde #00FF00 e o azul #0000FF. Um cinza médio é qualquer código com três pares iguais, como #808080, que é rgb(128, 128, 128). Pares iguais sempre significam cinza, porque quantidades iguais das três luzes não dão matiz.
Lendo um código de relance
Quando você conhece o padrão, pode estimar uma cor pelos dígitos hex. Um código que começa com um primeiro par alto é avermelhado, um par do meio alto é esverdeado, um último par alto é azulado. #FF8800 é muito vermelho, um pouco de verde e nenhum azul, o que é laranja. Você não precisa de uma ferramenta para isso, mas precisa de uma para os números exatos.
Como converter HEX em RGB aqui
Digite ou cole o código hex
Digite a cor no primeiro campo, com ou sem o sinal de jogo da velha. As formas de três, seis e oito dígitos são aceitas.
Leia o valor rgb
A resposta aparece na hora no outro campo, na forma rgb(90, 70, 50), ou rgba() se o código trazia transparência. A página mostra a frase #5A4632 = rgb(90, 70, 50) para que você confira de relance.
Copie para o seu código
Cole o resultado na folha de estilos, no script ou na ferramenta que o pediu. Se você precisa dos três números separados, são os que estão entre parênteses.
De onde vêm essas notações
Hex e RGB são a mesma coisa escrita duas vezes
Uma cor de tela são três números, quanta luz vermelha, verde e azul emitir, cada um de 0 a 255, o que é um byte. O hex simplesmente escreve esses bytes na base dezesseis, então #FF8800 e rgb(255, 136, 0) são a mesma instrução para o mesmo pixel.
HSL e CMYK
O HSL foi inventado porque nenhum dos dois é legível para um humano: ele dá o matiz como um ângulo em torno de uma roda de cores, com saturação e luminosidade como porcentagens, de modo que um designer pode deixar algo mais claro sem recalcular três números. O CMYK pertence a um mundo totalmente diferente, o da tinta em vez da luz. É subtrativo, construído a partir de quatro chapas de impressão, e não consegue alcançar todas as cores que uma tela alcança, porque a tela emite luz enquanto o papel apenas a reflete. Para esses, veja HEX para HSL e HEX para CMYK.
Onde você os encontra
Em folhas de estilos
O hex é o que você digita numa folha de estilos e o que uma ferramenta de design lhe entrega. O RGB aparece onde uma cor precisa de aritmética: degradês, transparência, código que calcula um tom. Conhecer as duas grafias, e saber passar de uma à outra, faz parte do trabalho cotidiano de front-end.
Em scripts e desenho em canvas
O código de desenho muitas vezes quer os três números separados, para misturar duas cores, escurecer uma por um valor fixo ou testar se um pixel combina com um alvo. Converter HEX em RGB dá os números diretamente.
Em ferramentas de gráficos e imagens
Os editores de imagens costumam mostrar uma cor como três números ou como um código hex e deixam você digitar qualquer um. Passar de um para o outro permite reproduzir uma cor de uma página da web num programa que quer números.
Em documentação e guias de marca
Um guia de marca pode listar uma cor em hex para a web, em RGB para telas e em CMYK para impressão. Fazer os dois primeiros concordarem é questão de uma conversão, e é o tipo de conferência que pega um erro de digitação antes de ele ser impresso em mil folhetos.
Usos práticos da forma RGB
Transparência sem uma segunda cor
Com rgba(90, 70, 50, 0.5) você obtém a cor com metade da intensidade, de modo que o que está atrás dela aparece. É a maneira padrão de fazer sobreposições, sombras e fundos tingidos a partir de uma cor de marca sem inventar uma nova.
Calculando tons mais claros e mais escuros
Para fazer um estado de hover um pouco mais escuro, um script pode subtrair um valor fixo de cada um dos três números. Fazer o mesmo numa string hex é incômodo; em rgb é aritmética simples. Se você precisa de um ajuste baseado no matiz, converta HEX em HSL.
Verificações de contraste
As ferramentas de acessibilidade calculam o contraste entre duas cores a partir dos seus valores de vermelho, verde e azul. Ter os números permite fazer o cálculo você mesmo, ou colá-los num verificador, para confirmar que o texto sobre um fundo é legível.
Armadilhas ao converter HEX em RGB
Esquecer o par alfa
Um código de oito dígitos tem transparência nos dois últimos dígitos. Se você os tira, perde-a. Confira o comprimento do código antes de decidir que o resultado é a cor.
Confundir a ordem
O hex é vermelho, verde, azul. Alguns formatos, e algumas APIs gráficas antigas, usam azul, verde, vermelho. Se uma cor sai errada num programa em particular, confira a ordem dos canais dele.
Copiar de uma captura de tela
Uma cor lida numa captura de tela é a cor depois do gerenciamento de cores da tela e de qualquer compressão. Pode diferir um pouco da cor do arquivo de origem. Use o arquivo de design quando puder.
Supor que as telas concordam
Duas telas mostram o mesmo código de forma um pouco diferente. Os números são exatos; o que você vê depende do monitor e do seu perfil.
Perguntas que as pessoas fazem antes de converter
Quanto é #FF0000 em RGB?
rgb(255, 0, 0), vermelho puro.
Quanto é #FFFFFF em RGB?
rgb(255, 255, 255), branco.
Posso converter um código de três dígitos?
Sim. Cada dígito é dobrado: #09C vira #0099CC, que é rgb(0, 153, 204).
A conversão é exata?
Sim. São duas grafias dos mesmos três números.
A minha cor é enviada?
Não. A aritmética roda no seu navegador e nada é enviado a lugar nenhum.
Como volto?
Com RGB para HEX, que escreve os três números como um código hex.
Escolhendo com sabedoria ao converter HEX em RGB
Saiba do que precisa em seguida
Se você precisa de transparência, o rgba() é a forma natural. Se precisa ajustar luminosidade ou matiz, o HSL é mais fácil. Se a cor vai ser impressa, o CMYK é o passo seguinte, com as ressalvas que a conversão traz. Veja RGB para CMYK.
Guarde o hex como matriz
Para as cores de uma paleta de marca, guarde o código hex como referência. É curto, inequívoco e entendido em toda parte. Derive as outras formas a partir dele quando precisar.
Use propriedades personalizadas
No CSS, defina as cores uma só vez, como --brand: #5A4632, e refira-se a elas pelo nome. Se você precisa dos números para rgba(), defina também --brand-rgb: 90 70 50. A conversão é então feita uma única vez.
CSS moderno e a forma RGB
Sintaxe separada por espaços
O CSS atual aceita rgb() com espaços e uma barra para a transparência, como em rgb(90 70 50 / 50%). Os números são os mesmos da forma com vírgulas, então o resultado de uma conversão funciona nas duas. Navegadores mais antigos e algumas ferramentas esperam as vírgulas, então a forma com vírgulas continua sendo a escolha segura quando você não sabe onde a cor será usada.
Porcentagens e frações
O RGB também pode ser escrito com porcentagens, como rgb(35% 27% 20%), em que 100 por cento é 255. A página dá números inteiros porque é o que o hex guarda e o que a maioria das ferramentas espera. Se você precisa de porcentagens, divida cada número por 255 e multiplique por 100.
Propriedades personalizadas para os três números
Um truque comum é guardar só os três números numa propriedade personalizada, --brand-rgb: 90 70 50, e usá-la como rgb(var(--brand-rgb) / 0.5). Isso permite que uma única definição sirva a usos sólidos e translúcidos. Quando você converte HEX em RGB para esse fim, copie só os números da resposta.
Trabalhando com cor na prática
Confira com o guia de marca
Se um guia de marca dá hex e rgb para a mesma cor, converta um e compare com o outro. Uma divergência geralmente significa um erro de digitação no guia, e achá-lo antes de ele ser usado em todas as páginas vale o minuto que leva.
Mantenha uma paleta como uma lista curta
A maioria dos sites usa de cinco a oito cores. Escreva-as numa anotação nas duas formas. Cada vez que você precisar converter HEX em RGB para um novo componente, pode consultá-la em vez de calcular de novo, e a paleta se mantém consistente.
Nomeie as cores pela função
Nomes como primária, superfície e aviso sobrevivem melhor a redesenhos do que nomes como verde ou marrom. A conversão dá os números; o nome diz para que servem.
Conversores relacionados
A mesma família de ferramentas cobre as conversões vizinhas. Para voltar, use RGB para HEX. Para cores descritas por matiz, HEX para HSL e HSL para HEX estão à mão, e para impressão, HEX para CMYK, CMYK para HEX e CMYK para RGB. Para os tamanhos na mesma folha de estilos, px para rem e px para em fazem para comprimentos o que esta página faz para cores.
Um exemplo resolvido
Digamos que a cor da sua marca seja #1E7A5C e você queira uma versão translúcida para o fundo de um cartão. Você digita o código e lê rgb(30, 122, 92). Na folha de estilos escreve background: rgba(30, 122, 92, 0.12), um tom bem leve do mesmo verde, e uma borda de rgba(30, 122, 92, 0.4). O cartão fica bem numa página branca e numa cinza, porque a transparência deixa a página passar. Quando a cor da marca mudar, você troca os três números numa única propriedade personalizada e todos os tons acompanham.
Uma lista de conferência curta
Antes de converter
Confira o comprimento do código: três, seis ou oito dígitos. Decida se precisa de transparência.
Durante a conversão
Cole o código, leia o valor rgb e copie-o com os parênteses, ou só os três números.
Depois de converter
Teste a cor em contexto, sobre o fundo real, e confira o contraste de qualquer texto que fique sobre ela.
Erros comuns
Descartar o par de transparência
Oito dígitos significam alfa. Mantenha-o ou converta para rgba().
Confundir a ordem dos canais
O hex começa pelo vermelho. Algumas ferramentas esperam o azul primeiro.
Tratar a tela como a verdade
Os números são exatos. O aspecto depende do monitor.
As suas cores ficam no seu dispositivo
O cálculo acontece localmente. Os seus valores são usados pelo seu próprio navegador e nada é enviado a lugar nenhum. Não há nada a apagar depois e nenhuma conta a criar. Essa é a maneira simples de converter HEX em RGB.
Resumo
Para converter HEX em RGB aqui, digite ou cole o código hex e leia o valor rgb na hora. A conversão mantém a cor exatamente: o hex e o rgb() são duas grafias dos mesmos três números, de 0 a 255 para vermelho, verde e azul, então nada é aproximado e uma ida e volta devolve o que partiu. Um quarto valor para a transparência também é transportado, já que #RRGGBBAA vira rgba() e vice-versa. As duas grafias descrevem o sRGB, então não conseguem descrever cores fora dele, e a forma abreviada é expandida em vez de preservada: #abc volta como #AABBCC. Nada é enviado.