Como converter códigos de cor HEX para RGB
HEX e RGB são duas formas de escrever exatamente as mesmas cores. Designers e desenvolvedores alternam entre eles constantemente — HEX em folhas de estilo CSS, RGB em animações JavaScript, HSL em ferramentas de design. Entender como se relacionam torna o trabalho com cores muito mais fácil.
Como as cores HEX funcionam
Um código de cor HEX como #FF5733 é um número hexadecimal de 6 dígitos que representa os canais vermelho, verde e azul. Os dois primeiros dígitos (FF) são vermelho em hex, que equivale a 255 em decimal — o canal vermelho na intensidade máxima. Os dois dígitos do meio (57) são verde em hex, que equivale a 87 em decimal — algum verde. Os dois últimos dígitos (33) são azul em hex, que equivale a 51 em decimal — um pouco de azul.
Cada canal varia de 00 (0, nenhuma cor) a FF (255, intensidade total). Então #FF5733 significa vermelho total, algum verde, um pouco de azul — o que lhe dá um vermelho-alaranjado quente.
Como converter HEX para RGB
1. Insira seu código HEX — digite ou cole um código de cor como #FF5733 ou use o seletor de cor. 2. Veja os valores RGB — veja os valores equivalentes de vermelho, verde e azul (0-255 cada). 3. Copie em qualquer formato — obtenha os valores como rgb(255, 87, 51), canais individuais ou outros formatos como HSL.
Códigos de cor comuns
Branco: #FFFFFF / rgb(255, 255, 255). Preto: #000000 / rgb(0, 0, 0). Vermelho: #FF0000 / rgb(255, 0, 0). Verde: #00FF00 / rgb(0, 255, 0). Azul: #0000FF / rgb(0, 0, 255). Amarelo: #FFFF00 / rgb(255, 255, 0).
Dicas
- Use HEX em CSS —
color: #FF5733é mais limpo e mais comum do quecolor: rgb(255, 87, 51)em folhas de estilo. - Use RGB para transparência — quando precisar de cores semitransparentes, use
rgba(255, 87, 51, 0.5). Não há maneira de adicionar alpha em HEX padrão (embora HEX de 8 dígitos exista, o suporte do navegador varia). - Atalho de 3 dígitos —
#F00é o mesmo que#FF0000. Use-o quando cada par tiver dígitos idênticos para economizar espaço. - Seletor de cor é mais rápido — se está tentando encontrar a cor certa, use o seletor visual em vez de adivinhar valores HEX. Copie o código quando estiver satisfeito com o resultado.
Perguntas frequentes
Como converto HEX para RGB manualmente?
Divida o código hex de 6 dígitos em três pares (ex.: #FF5733 → FF, 57, 33). Converta cada par de hexadecimal para decimal: FF = 255, 57 = 87, 33 = 51. Então #FF5733 = rgb(255, 87, 51).
E os códigos HEX de 3 dígitos?
HEX de três dígitos é um atalho em que cada dígito é duplicado. <code>#F80</code> equivale a <code>#FF8800</code>, que em RGB é <code>rgb(255, 136, 0)</code>.
Quando devo usar HEX vs RGB?
HEX é mais compacto e amplamente usado em CSS. RGB é melhor quando você precisa manipular canais de cor individuais programaticamente ou usar rgba() para transparência. Ambos representam as mesmas cores.
O que é o símbolo # nos códigos HEX?
O # (hash) é um prefixo que identifica o valor como um código de cor hexadecimal. Não faz parte do valor da cor em si. Algumas ferramentas aceitam códigos HEX com ou sem o hash.