Conversor de Cor HEX para RGB

HEX e RGB: duas formas de escrever a mesma cor

Toda cor que você vê em uma tela é misturada a partir de três luzes: vermelho, verde e azul. Aumente as três no máximo e você obtém branco; apague todas e obtém preto. HEX e RGB são simplesmente duas notações para descrever o quão brilhante cada um desses três canais deve ser. Eles apontam para exatamente a mesma cor, então um bom conversor apenas traduz entre os dois sistemas de escrita sem nunca mudar o tom real. É isso que esta ferramenta faz, inteiramente no seu navegador, enquanto mostra uma amostra ao vivo para que você confirme o resultado com os próprios olhos.

Como ler um código hexadecimal

Uma cor hexadecimal se parece com #1E90FF. O sinal de cerquilha apenas marca o início; os seis caracteres depois dele são três pares, escritos no padrão #RRGGBB. O primeiro par é o vermelho, o segundo é o verde, o terceiro é o azul. Cada par é um número escrito em hexadecimal, ou seja, base 16, em que os dígitos vão de 0 a 9 e então A, B, C, D, E, F representam de 10 a 15. Um par pode conter valores de 00 (canal totalmente desligado) até FF (totalmente ligado). Em decimal simples, essa faixa é exatamente de 0 a 255, a mesma escala que o RGB usa. Com 256 níveis possíveis por canal, a forma de seis dígitos consegue descrever 16.777.216 cores distintas.

Convertendo nos dois sentidos, com um exemplo prático

Para ir de HEX para RGB, divida o código em seus três pares e converta cada um da base 16 para o decimal comum. Pegue #1E90FF. O par do vermelho é 1E: isto é 1 multiplicado por 16, mais 14 (E), o que dá 30. O par do verde 90 é 9 multiplicado por 16, mais 0, o que dá 144. O par do azul FF é 15 multiplicado por 16, mais 15, o que dá 255. Assim, #1E90FF vira rgb(30, 144, 255) — o conhecido azul-dodger.

O caminho inverso é o mesmo processo ao contrário. Pegue cada número RGB e escreva-o como dois dígitos hexadecimais. O vermelho puro, rgb(255, 0, 0), dá FF, 00 e 00, que se juntam em #FF0000. Vale lembrar de uma coisa: se um valor for menor que 16, você ainda precisa de dois dígitos, então 5 se escreve 05 e não apenas 5. O conversor cuida desse preenchimento para você, mas isso costuma derrubar quem faz na mão.

Onde cada formato é usado

O HEX é a língua cotidiana da web. CSS, HTML e a maior parte do código que você escreve recorrem a códigos hexadecimais porque são compactos e fáceis de copiar. O RGB tende a surgir dentro de ferramentas de design e imagem — Figma, Photoshop, Sketch e Illustrator costumam mostrar controles deslizantes ou campos na faixa de 0 a 255, e apps de gravação de tela ou vídeo muitas vezes também esperam RGB. Então você frequentemente pega um código hexadecimal de uma folha de estilos e precisa da forma RGB dele para digitar em um painel de design, ou vice-versa. Esse vai e volta é toda a razão de um conversor ser útil. Se você precisa montar um conjunto inteiro de tons combinando, em vez de traduzir um só, nosso gerador de paleta de cores é o ponto de partida melhor, e você encontra mais utilitários como este em ferramentas para desenvolvedores.

Alpha, opacidade e HSL

As duas notações têm uma forma estendida que adiciona transparência. O RGB vira rgba(30, 144, 255, 0.5), em que o quarto valor é o alpha — 0 é totalmente transparente e 1 é totalmente sólido. O HEX acrescenta um quarto par com o mesmo propósito, dando um código de oito dígitos #RRGGBBAA; 80, por exemplo, é cerca de 50 por cento de opacidade. Alguns conversores também oferecem HSL (matiz, saturação, luminosidade), que descreve a cor do jeito que um humano poderia — escolha um matiz na roda, depois ajuste sua vivacidade e seu brilho. O HSL é um modelo mental diferente, não uma paleta diferente, então pode ser mais intuitivo quando você quer deixar uma cor mais clara ou mais suave sem malabarismos com três números separados.

Perguntas frequentes