Conversor de cor HEX ↔ RGB

Cada par do HEX (#RRGGBB) é um número de 0 a 255 em base 16. RGB usa os mesmos três valores em base 10. A conversão é só mudar a base.

Como ler um HEX de cabeça

Cada par vai de 00 (nada) a FF (255, o máximo). Sabendo disso, dá para interpretar qualquer cor sem calculadora:

• #FF0000 — vermelho puro. #00FF00 — verde. #0000FF — azul.
• Os três pares iguais (#333333, #CCCCCC) sempre resultam em cinza — sem dominância de nenhum canal.
• #000000 é preto e #FFFFFF é branco: todos os canais no mínimo ou no máximo.
• Quanto maior o par, mais claro aquele canal. #FF9900 tem muito vermelho, verde médio e nenhum azul — resultado: laranja.

Existe ainda a forma abreviada de 3 dígitos: #F90 equivale a #FF9900, com cada dígito duplicado.

Por que hexadecimal e não decimal

Porque cada canal de cor ocupa exatamente 1 byte (8 bits, 0 a 255), e um byte cabe em exatamente dois dígitos hexadecimais. A base 16 encaixa perfeitamente na estrutura binária do computador, o que torna a notação compacta e sem ambiguidade — enquanto em decimal a mesma cor exigiria de 3 a 9 dígitos com separadores.

O canal alfa

Formatos modernos aceitam um quarto par para transparência: #RRGGBBAA, onde 00 é totalmente transparente e FF totalmente opaco. Em CSS, o equivalente funcional é rgba(255, 153, 0, 0.5), com o alfa de 0 a 1.

HSL costuma ser mais fácil de ajustar

Para escolher cores, RGB e HEX são pouco intuitivos: clarear um tom exige mexer nos três valores ao mesmo tempo. O modelo HSL (matiz, saturação, luminosidade) separa essas dimensões — para deixar a mesma cor mais clara, basta subir a luminosidade. Por isso designers costumam trabalhar em HSL e exportar em HEX.

Contraste importa mais que a cor

Ao escolher a combinação de texto e fundo, verifique a razão de contraste: as diretrizes de acessibilidade (WCAG) pedem no mínimo 4,5:1 para texto normal e 3:1 para texto grande. Cores bonitas com contraste baixo tornam o conteúdo ilegível para muita gente — e isso não aparece na conversão HEX ↔ RGB.