Conversor de cores HEX, RGB, HSL e contraste
Escolha uma cor para obter os códigos HEX, RGB e HSL e teste a legibilidade sobre um fundo. #0F766E é rgb(15, 118, 110) e hsl(175, 77%, 26%).
- Verificado em milhares de casos
- Fontes: W3C
- Atualizado em 6 de novembro de 2026
Código HEX
rgb(15, 118, 110) · hsl(175, 77%, 26%)
- Matiz
- 175°
- Saturação
- 77 %
- Luminosidade
- 26 %
Teste de contraste
Texto de exemplo
Texto de exemplo
Razão de contraste
- AA · texto normal ≥ 4,5:1Aprovado
- AA · texto grande ≥ 3:1Aprovado
- AAA · texto normal ≥ 7:1Reprovado
- AAA · texto grande ≥ 4,5:1Aprovado
- Componentes de interface (AA) ≥ 3:1Aprovado
Desafio rápido
Sequência 0Recorde 0
Teste-se: cada resposta é calculada pela ferramenta, e as opções erradas são as armadilhas mais comuns.
Como funciona
Fórmula: Contraste = (L1 + 0,05) ÷ (L2 + 0,05)
Um código HEX escreve em hexadecimal os três componentes vermelho, verde e azul, de 0 a 255 cada um: #FF8000 = vermelho 255, verde 128, azul 0. O HSL descreve a mesma cor pelo matiz (um ângulo no círculo cromático), pela saturação e pela luminosidade. Para o contraste, calcula-se a luminância relativa de cada cor conforme a definição da WCAG 2.2 e depois a razão (L1 + 0,05) ÷ (L2 + 0,05), que vai de 1:1 a 21:1. O texto normal deve atingir 4,5:1 no nível AA (7:1 no AAA), o texto grande (18 pt, ou 14 pt em negrito) 3:1 (4,5:1 no AAA), e os componentes de interface 3:1. A razão nunca é arredondada para cima: 4,49:1 não passa.
Exemplos práticos
O vermelho puro #FF0000
rgb(255, 0, 0) = hsl(0, 100%, 50%).
Preto sobre branco
O contraste máximo: 21:1.
Cinza #777777 sobre branco
Contraste 4,47:1, logo abaixo do mínimo de 4,5:1 do nível AA para texto comum.
Erros comuns
Achar no olho que um cinza é "escuro o bastante".
#777777 sobre branco dá 4,47:1: texto comum precisa de pelo menos 4,5:1.
Ler #F0C como uma cor incompleta.
É a forma curta de #FF00CC: cada dígito é duplicado.
Achar que a ordem texto/fundo muda o contraste.
Branco sobre #777777 também dá 4,47:1: a razão é a mesma nos dois sentidos.
Cores comuns e seu contraste
| Código HEX | RGB | HSL | Sobre branco | Sobre preto |
|---|---|---|---|---|
| #000000 | 0, 0, 0 | 0°, 0%, 0% | 21:1 | 1:1 |
| #FFFFFF | 255, 255, 255 | 0°, 0%, 100% | 1:1 | 21:1 |
| #FF0000 | 255, 0, 0 | 0°, 100%, 50% | 3,99:1 | 5,25:1 |
| #00FF00 | 0, 255, 0 | 120°, 100%, 50% | 1,37:1 | 15,3:1 |
| #0000FF | 0, 0, 255 | 240°, 100%, 50% | 8,59:1 | 2,44:1 |
| #FFFF00 | 255, 255, 0 | 60°, 100%, 50% | 1,07:1 | 19,55:1 |
| #00FFFF | 0, 255, 255 | 180°, 100%, 50% | 1,25:1 | 16,74:1 |
| #FF00FF | 255, 0, 255 | 300°, 100%, 50% | 3,13:1 | 6,69:1 |
| #808080 | 128, 128, 128 | 0°, 0%, 50% | 3,94:1 | 5,31:1 |
| #767676 | 118, 118, 118 | 0°, 0%, 46% | 4,54:1 | 4,62:1 |
| #0F766E | 15, 118, 110 | 175°, 77%, 26% | 5,47:1 | 3,83:1 |
Perguntas frequentes
Como converter um código HEX em RGB?
Divida o código em três pares e converta cada um de hexadecimal para decimal: #1E90FF dá 1E = 30, 90 = 144 e FF = 255, ou seja, rgb(30, 144, 255).
Qual contraste um texto legível precisa?
A WCAG 2.2 pede pelo menos 4,5:1 para o texto normal no nível AA e 7:1 no nível AAA. O texto grande pode ficar em 3:1 no AA. Sobre branco, o cinza #767676 passa por pouco (4,54:1), enquanto #777777 não passa (4,47:1).
Qual a diferença entre RGB e HSL?
São duas formas de escrever a mesma cor. O RGB mistura vermelho, verde e azul; o HSL parte de um matiz e ajusta a saturação e a luminosidade, o que facilita criar versões mais claras ou mais escuras de uma cor.