Converter RGB em HEX Red Green Blue ↔ Hexadecimal Grátis Online Seguro
Escreva um valor em RGB e leia-o de imediato em HEX. 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 você converte RGB em HEX
Um editor de imagens, um seletor de cores do sistema operacional ou uma linha de código dá a você uma cor como três números: 90, 70, 50. Uma folha de estilos, um arquivo de tokens de design ou uma mensagem a um colega a quer como um único código curto: #5A4632. O passo entre as duas coisas é o que esta página faz. Converter RGB em HEX é escrever os mesmos três números na base dezesseis, dois dígitos cada um, e pôr um sinal de jogo da velha na frente. É fácil de fazer para uma só cor e cansativo para vinte, e é fácil errar quando um número precisa de um zero à esquerda ou um dígito é uma letra.
A conversão é exata, o que não é verdade de 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. A página faz isso no seu navegador, e nada é enviado. Abaixo você encontra como cada número vira dois dígitos hex, como a transparência é levada junto, os limites do sRGB, os lugares em que as pessoas precisam converter RGB em HEX e alguns hábitos que mantêm as cores de um projeto consistentes.
Como a conversão funciona
Cada número vira dois dígitos hex
Tome rgb(90, 70, 50). Divida cada número por dezesseis: 90 é 5 vezes 16 mais 10, e 10 é o dígito A, então 90 vira 5A. 70 é 4 vezes 16 mais 6, então 46. 50 é 3 vezes 16 mais 2, então 32. Junte os três pares e acrescente o sinal de jogo da velha: #5A4632. A página faz isso por você enquanto você digita, e mostra a frase rgb(90, 70, 50) = #5A4632 para que você verifique.
Zeros à esquerda
Todo par precisa ter dois dígitos. Um número abaixo de 16 precisa de um zero na frente: 7 vira 07, e 0 vira 00. Então rgb(0, 7, 255) é #0007FF, e não #07FF, que significaria algo bem diferente. Esquecer o zero é o erro mais comum ao fazer a conversão à mão.
A faixa
Cada número deve ficar entre 0 e 255. Um valor acima de 255 não pode ser escrito em dois dígitos hex, e um valor negativo não tem sentido. Se um cálculo no seu código produziu 270 ou −5, limite-o à faixa primeiro. O conversor faz o mesmo, para nunca produzir um código inválido.
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 RGB em HEX e volte e você tem os números com que começou.
Leva a transparência junto
Um quarto valor, de transparência, também é levado junto: #RRGGBBAA vira rgba(), e de volta. Uma transparência de 0,5 vira o par 80, já que a metade de 255 é cerca de 128, que é 80 em hex. Então rgba(90, 70, 50, 0.5) é #5A463280. O hex de oito dígitos é aceito 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 uma tela usa há trinta anos. Não conseguem descrever uma cor fora dele, e é para isso que existem as notações CSS mais novas, lab(), oklch() e color(). Se você parte de uma cor numa ferramenta de gama ampla, os três números que você copia já são a versão sRGB, e o hex é fiel a eles.
Não preserva a forma abreviada
Onde um código poderia ser escrito em três dígitos, como #AABBCC como #ABC, o conversor dá a forma longa. A forma longa é sempre válida e é a mesma cor; a forma curta é só uma comodidade para o leitor.
Cores comuns e seus códigos
Algumas para lembrar
rgb(255, 255, 255) é #FFFFFF, branco: as três luzes com força total. rgb(0, 0, 0) é #000000, preto: nenhuma luz. rgb(255, 0, 0) é #FF0000, vermelho puro; rgb(0, 255, 0) é #00FF00 e rgb(0, 0, 255) é #0000FF. Toda cor com três números iguais é um cinza, e seu código tem três pares iguais: rgb(128, 128, 128) é #808080.
O hábito das cores seguras para a web
Os guias mais antigos falavam de cores seguras para a web, cujos pares eram só 00, 33, 66, 99, CC ou FF. Pertencem aos dias das telas de 256 cores e não têm razão para sobreviver. Use o valor que quiser; a tela pode mostrar todos.
Como converter RGB em HEX aqui
Digite os três números
Digite a cor no primeiro campo na forma rgb(90, 70, 50), ou com os números separados por vírgulas ou espaços. Porcentagens não são necessárias; use números de 0 a 255.
Leia o código hex
A resposta aparece na hora no outro campo, começando com um sinal de jogo da velha, em letras maiúsculas. Se você deu um quarto valor de transparência, o código tem oito dígitos.
Copie para o seu trabalho
Cole o código na folha de estilos, no arquivo de tokens ou na mensagem. Acrescente-o à nota da sua paleta para que a próxima conversão seja uma consulta.
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, 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 ao mesmo pixel.
HSL e CMYK
O HSL foi inventado porque nenhum dos dois é legível para um humano: dá o matiz como um ângulo em torno de uma roda de cores, com a saturação e a luminosidade em porcentagens, para que um designer possa clarear algo sem recalcular três números. O CMYK pertence a um mundo totalmente diferente, tinta em vez de luz. É subtrativo, feito de quatro chapas de impressão, e não alcança todas as cores que uma tela alcança, porque uma tela emite luz enquanto o papel só a reflete. Veja HEX para HSL e RGB para CMYK.
Onde você os encontra
Na entrega do design
Um designer trabalha num editor que mostra valores rgb ou num seletor; o desenvolvedor precisa de hex para a folha de estilos. Converter RGB em HEX é o passo do meio, e é feito para toda cor de uma paleta.
Em scripts que calculam cores
Um script que mistura duas cores ou escurece uma trabalha com números e termina com três deles. Para usar o resultado numa folha de estilos, ou para exibi-lo, é preciso escrevê-lo como um código hex. Fazer à mão no código são algumas linhas; conferir o resultado com um conversor é mais rápido.
Na visualização de dados
As bibliotecas de gráficos aceitam cores como cadeias hex. As paletas geradas por métodos numéricos saem como trios rgb. Um passo de conversão transforma uma na outra.
Em documentos e apresentações
Os programas de escritório mostram cores como números RGB; os editores da web querem hex. Quando uma cor de marca precisa aparecer nos dois, a conversão as mantém idênticas.
Armadilhas ao converter RGB em HEX
Esquecer o zero à esquerda
Escrever 7 como 7 e não 07 desloca todos os dígitos seguintes. Use sempre dois dígitos por par.
Confundir porcentagem com 0 a 255
rgb(35%, 27%, 20%) é outra grafia dos números, com 100 por cento sendo 255. Se a sua fonte usa porcentagens, converta-as antes para 0 a 255: multiplique por 2,55.
Erros de arredondamento em cores calculadas
Um script que produz 127,5 precisa decidir se é 127 ou 128. A diferença é invisível, mas faz dois códigos para o que você pensava ser uma só cor. Arredonde do mesmo jeito em toda parte.
Tirar a cor de uma captura de tela
Uma cor lida de uma captura de tela passou pela gestão de cores da tela e talvez por compressão. Pode diferir um ou dois passos da fonte. Use o arquivo de design quando puder.
Perguntas que as pessoas fazem antes de converter
Quanto é rgb(255, 0, 0) em hex?
#FF0000, vermelho puro.
Quanto é rgb(0, 0, 0) em hex?
#000000, preto.
Posso usar minúsculas no código hex?
Sim. #5a4632 e #5A4632 são a mesma cor. A página escreve maiúsculas.
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 HEX para RGB, que lê os três pares como números.
Hábitos que mantêm as cores consistentes num projeto
Defina cada cor uma só vez
Ponha a sua paleta em propriedades personalizadas, como --brand: #5A4632, e refira-se às cores pelo nome. Quando você converte RGB em HEX para uma cor nova, acrescenta uma linha, e todos os usos a acompanham.
Escolha uma caixa
Escolha maiúsculas ou minúsculas para os códigos hex e mantenha-se nela. Uma busca por uma cor no código fica então confiável.
Registre a fonte
Ao lado de cada cor, anote de onde ela veio: o guia da marca, um logotipo, uma imagem amostrada. Quando surge a pergunta se uma cor está correta, você sabe onde conferir.
Teste o contraste
Para texto sobre um fundo colorido, confira a razão de contraste com uma ferramenta. Os números da forma rgb alimentam direto a fórmula, e a forma hex é o que você digita na maioria dos verificadores.
Por que 256 passos e o que há por trás dos números
Oito bits para cada luz
Cada um dos três números é guardado em oito bits, o que permite 256 valores de 0 a 255. Os três juntos dão 256 × 256 × 256, cerca de 16,7 milhões de combinações, mais do que o olho consegue distinguir na maioria das condições. Essa é a razão de os códigos hex terem exatamente seis dígitos: dois para cada luz, nem mais nem menos. Quando você converte RGB em HEX, está escrevendo três bytes na forma mais compacta que as pessoas conseguiram combinar.
Por que passos iguais não parecem iguais
Os números não são proporcionais à luz que chega ao seu olho. As telas aplicam uma curva, próxima de uma potência de 2,2, de modo que os tons escuros ganham mais dos 256 passos que os claros, o que convém ao olho. Um passo de 10 a 20 parece uma mudança maior que um passo de 240 a 250. Para você isso significa que tirar a média de duas cores pela média dos seus números não dá a cor que você veria misturando as luzes, um fato que importa quando você calcula degradês e misturas no código.
Cinzas e a diagonal
Todos os cinzas ficam na linha em que os três números são iguais. Há 256 deles, do preto em 0 ao branco em 255. Se você converte RGB em HEX e os três pares coincidem, sabe de imediato que a cor não tem matiz. Um quase cinza com pares que diferem em um ou dois passos tem um leve tom, que os designers muitas vezes usam para dar a uma cor neutra um toque de calor ou de frieza.
Montando e conferindo uma paleta
De um punhado de cores escolhidas a uma paleta
Uma paleta típica tem uma cor primária, um destaque, um neutro para o texto, um neutro mais claro para as superfícies e uma ou duas cores de sinal para sucesso e erro. Escolha cada uma na sua ferramenta de design, leia os números rgb dela e converta RGB em HEX para a folha de estilos. Escreva-as como propriedades personalizadas com nomes que descrevam o papel, e a paleta está pronta para uso em todo componente.
Contraste entre texto e fundo
O texto legível precisa de diferença de brilho suficiente entre as letras e o fundo. As diretrizes de acessibilidade definem uma razão de contraste calculada a partir dos valores de vermelho, verde e azul das duas cores e pedem pelo menos 4,5 para 1 para o texto normal. Os verificadores aceitam códigos hex, então os códigos que você produz aqui podem ir direto a eles. Confira cada combinação que você pretende usar, e não só a cor primária sobre branco.
Convertendo uma lista
Quando você tem muitas cores para converter, trabalhe uma de cada vez e cole cada resultado numa tabela com o nome e o uso. Leva um minuto por cor, e a tabela se torna a referência de todo o projeto. Se uma cor for ajustada depois, só a linha dela precisa mudar.
Mantendo hex e rgb em sintonia
Se o seu projeto guarda algumas cores em hex e outras em rgb, é fácil que se afastem quando alguém edita uma e esquece a outra. Escolha uma como original, em geral o hex, e derive a outra com o conversor sempre que precisar.
Conversores relacionados
A mesma família de ferramentas cobre as conversões vizinhas. Para voltar, use HEX para RGB. Para cores descritas por matiz, HEX para HSL e HSL para HEX estão à mão, e para impressão, RGB para CMYK, CMYK para RGB e CMYK para HEX. Para os tamanhos da mesma folha de estilos, px em rem faz para comprimentos o que esta página faz para cores.
Um exemplo resolvido
Digamos que um seletor de cores num editor de imagens diga que o destaque de uma fotografia é rgb(214, 98, 56). Você digita os três números e lê #D66238. Na folha de estilos escreve --accent: #D66238 e a usa em botões e links. Um colega pergunta qual é a cor no guia da marca, e você manda o código. Mais tarde você precisa de uma versão translúcida para um banner e a converte de volta com HEX para RGB para montar rgba(214, 98, 56, 0.15). As duas conversões são exatas, então o banner tem o mesmo matiz do botão.
Uma lista de conferência rápida
Antes de converter
Confira se cada número está entre 0 e 255. Decida se você precisa de transparência.
Durante a conversão
Digite os três números, leia o código e copie-o com o sinal de jogo da velha.
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
Perder um zero à esquerda
Cada par tem dois dígitos. 7 é 07.
Escrever números acima de 255
Não podem ser escritos em dois dígitos. Limite-os antes.
Tratar a tela como a verdade
Os números são exatos. O aspecto depende da tela.
Suas cores ficam no seu dispositivo
O cálculo acontece localmente. Seus valores são usados pelo seu próprio navegador e nada é enviado a lugar nenhum. Não há nada a apagar depois nem conta a criar. Esse é o jeito simples de converter RGB em HEX.
Resumo
Para converter RGB em HEX aqui, digite os três números e leia o código hex 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 de transparência também é levado junto, já que rgba() vira #RRGGBBAA, e de volta. As duas grafias descrevem o sRGB, então não conseguem descrever cores fora dele. Todo par tem dois dígitos, então um número abaixo de 16 ganha um zero à esquerda. Nada é enviado.