Como converter HEX para RGB (e por que os designers alternam entre os dois)

Se você trabalha com cor na web, já se deparou com o mesmo valor escrito de duas maneiras diferentes. Um designer te entrega #3498DB, mas o seu código precisa de rgb(52, 152, 219). Os dois descrevem exatamente o mesmo azul, apenas em uma notação diferente. Saber como passar de HEX para RGB, e por que fazer isso, poupa um bocado de adivinhação. Este guia explica os dois formatos em linguagem simples e mostra como convertê-los na hora com o Conversor de Cores gratuito.

O que significa um código de cor HEX

Uma cor HEX é a string #RRGGBB que você vê por toda parte no CSS e nas ferramentas de design. A cerquilha é apenas um marcador, e os seis caracteres que vêm depois dela são três pares: vermelho, verde e azul. Cada par é um número hexadecimal (base 16) que vai de 00 a FF, ou seja, de 0 a 255 no sistema decimal do dia a dia.

Pegue #3498DB. Divida em 34, 98 e DB. Essas são as quantidades de vermelho, verde e azul. 34 em hexadecimal é 52, 98 é 152 e DB é 219. Então a cor tem uma boa quantidade de verde e muito azul com menos vermelho, o que resulta em um azul-céu limpo. Quando você passa a ver o HEX como três números de dois caracteres, ele deixa de parecer um código aleatório.

O que significa RGB

O RGB descreve exatamente a mesma ideia, só que em decimal simples. Em vez de #3498DB você escreve rgb(52, 152, 219). Três números, cada um de 0 a 255, para o vermelho, o verde e o azul. Zero significa nada daquele canal, 255 significa força total. Os três em 0 dão preto, os três em 255 dão branco, e todo o resto é uma mistura.

Como o RGB soletra os números, muita gente acha mais fácil de raciocinar. Quer um pouco mais de vermelho? Aumente o primeiro número. O HEX esconde essa aritmética por trás de pares em base 16, o que é compacto, mas menos intuitivo de ajustar à mão.

Por que designers e desenvolvedores alternam entre os dois

Os dois formatos são intercambiáveis, então por que se dar ao trabalho de converter? Algumas razões práticas aparecem o tempo todo:

• Ferramentas diferentes falam formatos diferentes. Um guia de marca pode listar HEX, enquanto um programa de gráficos ou um trecho de código espera RGB.
• A opacidade precisa de RGB. Um código HEX simples não consegue carregar transparência, mas rgba(52, 152, 219, 0.5) adiciona um quarto valor para o alfa. Quando você precisa de uma sobreposição semitransparente, recorre à família RGB.
• Legibilidade e ajustes. O RGB é mais fácil de ajustar canal por canal; o HEX é mais curto para colar e compartilhar.
• Combinar com uma paleta existente. Muitas vezes você recebe uma cor em uma notação e precisa dela na outra para manter a coerência com o restante de um projeto.

Em resumo, você mantém os dois por perto e traduz sob demanda, dependendo do que a próxima ferramenta ou linha de código pede.

Como converter HEX para RGB na hora

Você nunca precisa fazer a conta hexadecimal à mão. O Conversor de Cores gratuito cuida disso no seu navegador, então os valores que você cola permanecem no seu próprio dispositivo e nunca são enviados para lugar nenhum.

1. Abra a ferramenta e cole o seu código HEX, como #3498DB.
2. Leia os valores RGB correspondentes na hora.
3. Copie a notação de que você precisa e use a forma rgba, que reconhece o alfa, quando quiser transparência.

Funciona no sentido contrário também, então você pode colar RGB e obter o equivalente HEX com a mesma rapidez. Se você precisa apenas do caminho de mão única, a ferramenta específica HEX para RGB faz exatamente isso e nada mais.

Encontrar e criar cores para converter

Às vezes a parte mais difícil é decidir a cor em primeiro lugar. Se você notou um tom em uma captura de tela ou em uma foto e quer o código exato dele, o Seletor de Cor de Imagem lê o valor direto do pixel. Se você está começando do zero e quer opções novas, o Gerador de Cor HEX te dá códigos para experimentar. Quando tiver uma cor de que gosta, passe-a pelo Conversor de Cores para obtê-la em todas as notações de que o seu projeto precisa.

A versão curta

HEX e RGB são duas maneiras de escrever a mesma cor: o HEX empacota vermelho, verde e azul na string em base 16 #RRGGBB, enquanto o RGB os lista como três números decimais de 0 a 255. Você alterna entre eles porque ferramentas diferentes, e a transparência com rgba, exigem formatos diferentes. Sempre que precisar traduzir um no outro, o Conversor de Cores gratuito faz isso no seu navegador em uma única etapa.