HEX para RGB

Como funcionam as cores em hexadecimal

Uma cor como #FF8800 são três bytes escritos em hexadecimal: FF vermelho, 88 verde, 00 azul. Cada par vai de 00 (0) a FF (255), então #FF8800 é rgb(255, 136, 0), um laranja vivo. A forma curta #F80 repete cada dígito e é a mesma cor. Um quarto par opcional define a transparência: #FF880080 é o mesmo laranja com cerca de 50% de opacidade.

Designers escolhem cores em hexadecimal, mas código de canvas, bibliotecas de imagem, cores do Android e muitas APIs querem os números RGB separados. Esta página também mostra HSL (útil para criar tons mais claros ou escuros), HSV, um CMYK simples e o contraste WCAG com texto branco e preto.

Exemplo resolvido

#767676: 76 em hexadecimal = 7 × 16 + 6 = 118, então a cor é rgb(118, 118, 118), um cinza médio. O contraste com o branco é 4,54:1, logo acima dos 4,5:1 que a WCAG 2.2 exige para texto normal, por isso ele é o famoso "cinza mais claro acessível".

A página divide o código em pares de dígitos e converte cada um de base 16 para um número de 0 a 255; códigos de três e quatro dígitos são expandidos antes, repetindo cada dígito, e o par de alfa é dividido por 255. HSL e HSV são calculados com as fórmulas do CSS Color 4. Para o contraste, cada canal é convertido em luz linear, combinado em luminância relativa com os pesos da WCAG (0,2126 vermelho, 0,7152 verde, 0,0722 azul) e comparado como (mais clara + 0,05) ÷ (mais escura + 0,05). Tudo roda nesta aba.