Conversor de Cores
Hexadecimal, RGB e HSL de uma cor, com a complementar e o contraste contra preto e branco.
Resultados
O que faz esta ferramenta
A mesma cor tem três nomes conforme quem pergunta: um designer escreve hexadecimal, uma folha de estilos aceita os três, e quem estiver a tentar tornar uma cor mais clara ou mais suave precisa de HSL, porque é o único dos três em que essas coisas são números únicos que se podem rodar. Cole uma cor em qualquer das formas habituais — com ou sem cardinal, três dígitos ou seis, ou como três números — e ela volta em todas elas, mais a luminância relativa que decide se o texto por cima deve ser preto ou branco.
Fórmula
converte entre hexadecimal, RGB e HSL, e calcula a luminância da norma WCAG
Variáveis
| Símbolo | Significado | Unidade |
|---|---|---|
color | Cor | — |
HX | Hexadecimal | — |
RG | RGB | — |
HS | HSL | — |
CP | Cor complementar | — |
ON | Cor de texto legível | — |
CW | Contraste contra branco | — |
CB | Contraste contra preto | — |
LU | Luminância da cena | — |
Exemplo resolvido
- Cor#d1490b
- Hexadecimal#d1490b
- RGBrgb(209, 73, 11)
- HSLhsl(19, 90%, 43%)
- Cor complementar#2eb6f4
- Cor de texto legível#000000
- Contraste contra branco4,50
- Contraste contra preto4,67
- Luminância da cena0,1834
Limitações
- O cálculo é feito inteiramente no seu navegador. Os valores que introduz nunca são enviados para um servidor.
- Os valores por defeito são referências típicas e não medições da sua situação. Substitua-os pelos seus próprios dados sempre que os tiver.
Perguntas frequentes
Que rácio de contraste é preciso?
As directrizes de acessibilidade WCAG pedem pelo menos 4,5 para 1 entre o texto corrente e o fundo, e 3 para 1 para texto grande — à volta de 24 px, ou 19 px a negrito — e para os contornos de botões e campos de formulário. Os dois valores aqui são o rácio contra branco e contra preto, por isso o maior dos dois diz de que cor deve ser o texto.