Início > Blog > Como converter HEX para RGB e verificar o contraste WCAG

Como converter HEX para RGB e saber se o teu texto tem contraste suficiente

Escolheste uma cor de marca em HEX, mas o programador pede o valor em RGB, o CSS aceita HSL e o cliente pergunta se o texto branco sobre esse roxo "passa" nas normas de acessibilidade. Este guia mostra como converter entre os formatos e como calcular o contraste, com exemplos numéricos reais.

Índice

HEX para RGB, passo a passo
HSL vs HSV/HSB
Rácio de contraste WCAG
Montar uma paleta harmoniosa
Perguntas frequentes

Converter um código HEX para RGB

Resposta rápidaDivide o código HEX em três blocos de dois carateres e converte cada um de base 16 para base 10. #7C3AED torna-se 7C=124, 3A=58, ED=237, ou seja rgb(124, 58, 237).

Um código HEX escreve-se #RRGGBB. Cada par de carateres representa um canal de cor (vermelho, verde, azul) em hexadecimal, com valores possíveis de 00 a FF — ou seja, 0 a 255 em decimal. Converter é simplesmente reler cada bloco em base 10.

Também existe a forma abreviada de três carateres, #RGB, usada em alguns ficheiros CSS antigos. Para expandir, cada carácter repete-se duas vezes: #F0A torna-se #FF00AA. Se a cor tiver transparência, um HEX de 8 dígitos como #7C3AEDCC acrescenta o canal alfa nos dois últimos carateres.

Código HEX	R	G	B	RGB
#7C3AED	124	58	237	rgb(124,58,237)
#0D9488	13	148	136	rgb(13,148,136)
#FFFFFF	255	255	255	rgb(255,255,255)
#111528	17	21	40	rgb(17,21,40)

Exemplo ilustrativo com valores reais de conversão matemática — não representa nenhuma marca em particular.

HSL e HSV/HSB: quando usar cada um

Resposta rápidaHSL (Tom, Saturação, Luminosidade) e HSV/HSB (Tom, Saturação, Valor) descrevem o mesmo espaço de cor sRGB, mas de forma diferente: em HSL, 100% de luminosidade dá sempre branco; em HSV, 100% de valor dá a cor mais viva possível.

HSL — pensa numa roda de cores: o Tom escolhe a posição (0–360°), a Saturação a intensidade (0–100%) e a Luminosidade a claridade. Manter o tom fixo e só mudar a luminosidade produz facilmente tons mais claros ou escuros da mesma cor — muito usado em CSS com hsl(262, 83%, 58%).

HSV/HSB — usa Tom e Saturação da mesma forma, mas o terceiro eixo é o Valor/Brilho. A 100% de valor obtém-se a cor mais viva; para chegar a branco é preciso também reduzir a saturação. É o modelo mais comum nos seletores de cor de ferramentas de design, porque "vivo e brilhante" costuma ser mais intuitivo de ajustar visualmente.

Na prática, uma ferramenta de conversão mantém os dois formatos sincronizados automaticamente — não precisas de escolher um só; podes ler ambos a partir da mesma cor selecionada.

Rácio de contraste WCAG: o texto vai ser legível?

Resposta rápidaPara texto de tamanho normal, o WCAG 2.1 exige um rácio mínimo de 4,5:1 (nível AA) ou 7:1 (nível AAA). Para texto grande (cerca de 18pt, ou 14pt a negrito), os limites descem para 3:1 e 4,5:1.

O cálculo começa pela luminância relativa de cada cor: cada canal sRGB é normalizado entre 0 e 1, linearizado, e combinado com a fórmula L = 0,2126·R + 0,7152·G + 0,0722·B. O rácio de contraste resulta de (L1 + 0,05) / (L2 + 0,05), onde L1 é a luminância da cor mais clara. O resultado varia entre 1:1 (sem contraste algum) e 21:1 (preto sobre branco).

Exemplo hipotético: texto branco (#FFFFFF) sobre um fundo roxo médio (#7C3AED) dá aproximadamente 4,8:1 — passa no nível AA para texto normal, mas fica abaixo do nível AAA (7:1). Estes números são apenas um exemplo de cálculo, não uma garantia para qualquer combinação de roxo.

Para componentes gráficos e elementos de interface — como o contorno de um botão, um ícone ou um indicador de estado — 3:1 costuma ser considerado suficiente pelo WCAG. Vale a pena testar sempre a combinação exata de texto e fundo que vais usar, e não confiar apenas na "aparência" no ecrã.

Montar uma paleta de cores harmoniosa a partir de uma cor

Resposta rápidaA forma mais rápida é usar relações angulares na roda de cores: complementar (H+180°) para contraste forte, análoga (H±30°) para um aspeto harmonioso, ou triádica (H, H+120°, H+240°) para três tons equilibrados.

Estas relações partem sempre do Tom (H) em HSL. Se a tua cor base tem H=262° (um roxo), a complementar fica perto de H=82° (um verde-amarelado), enquanto a triádica soma e subtrai 120° para chegar a três pontos distribuídos uniformemente na roda. Tons e matizes obtêm-se mantendo o Tom fixo e apenas subindo ou baixando a Luminosidade.

Um cenário prático: estás a desenhar um botão de destaque numa aplicação e já tens a cor principal da marca. Em vez de escolher a segunda cor "a olho", gerar automaticamente a complementar garante um contraste visual consistente e testável — e depois basta confirmar o rácio WCAG entre o texto do botão e o fundo escolhido.

Perguntas frequentes

Como se converte um código de cor HEX para RGB?

Um código HEX escreve-se #RRGGBB, e cada bloco de dois carateres representa um canal de cor em base 16. Para converter, cada bloco passa para base 10: RR é o vermelho, GG o verde, BB o azul, cada um entre 0 e 255. Por exemplo, #7C3AED dá 7C=124, 3A=58, ED=237, ou seja rgb(124, 58, 237).

Que rácio de contraste é necessário para um contraste de cor acessível?

Segundo o WCAG 2.1, o texto de tamanho normal precisa de um rácio AA mínimo de 4,5:1, e AAA precisa de pelo menos 7:1. Para texto grande (cerca de 18pt, ou 14pt a negrito), os limites descem para 3:1 (AA) e 4,5:1 (AAA). Para componentes gráficos e de interface, 3:1 costuma ser suficiente.

Qual é a diferença entre HSL e HSV/HSB?

Ambos usam Tom e Saturação, mas o terceiro componente difere. Em HSL, a Luminosidade a 50% dá a cor pura, 100% dá branco. Em HSV/HSB, o Valor a 100% dá a cor mais viva; para chegar ao branco é preciso também baixar a saturação. Os seletores de cor de ferramentas de design usam muitas vezes HSV, porque escolher «vivo e brilhante» é intuitivo.

Como se constrói rapidamente uma paleta de cores harmoniosa?

Os métodos mais comuns baseiam-se em relações angulares na roda de cores: uma paleta complementar usa o tom oposto (H+180°) para contraste forte; uma paleta análoga usa tons vizinhos (H±30°) para um aspeto harmonioso; uma paleta triádica combina três tons distribuídos uniformemente (H, H+120°, H+240°). Uma ferramenta de conversão de cor pode gerar as três automaticamente a partir de uma única cor base.

Porque é que a cor HEX aparece diferente ao imprimir em CMYK?

HEX/RGB é um modelo aditivo pensado para ecrãs, que adicionam luz; CMYK é um modelo subtrativo pensado para a impressão, que adiciona tinta. Algumas cores vivas que um ecrã mostra não podem ser reproduzidas exatamente com tinta, por isso a conversão para CMYK é sempre uma aproximação matemática, não uma garantia de resultado impresso.

Testa a tua própria cor agora

Converte entre HEX, RGB, HSL e HSV, verifica o contraste WCAG e gera paletas complementares em segundos — tudo gratuito, no navegador.

Experimentar o Conversor de cor →

Nota sobre metodologia: os exemplos numéricos deste artigo (valores RGB, rácios de contraste) são cálculos matemáticos diretos usados apenas para fins ilustrativos e informativos. Não substituem uma auditoria de acessibilidade completa nem um perfil de cor ICC para impressão. A cor exibida no teu ecrã pode variar consoante a calibração do monitor.