Conversor de Cores
Converta uma cor entre HEX, RGB, HSL e HSV, com o contraste dela contra preto e branco.
Roda inteiramente no seu navegador. Nada é enviado, registrado ou armazenado.
Hexadecimal
#3498DB
- RGB
- rgb(52 152 219)
- HSL
- hsl(204.1 69.9% 53.1%)
- HSV
- hsv(204.1 76.3% 85.9%)
- Luminância relativa
- 0,2830
- Contraste sobre branco
- 3,15:1
- Contraste sobre preto
- 6,66:1
HEX, RGB, HSL e HSV são quatro jeitos de escrever a mesma cor sRGB. Qual deles é conveniente depende do que você está fazendo: hexadecimal para copiar um valor de um design, HSL para deixar algo um pouco mais claro sem mudar o matiz.
Como funciona
A entrada é lida em canais de oito bits de vermelho, verde e azul mais um alfa, e toda saída é calculada a partir desses canais. Nada é convertido a partir de outra saída, então um valor não pode se desviar ao longo de uma cadeia de arredondamentos.
Os números de contraste seguem a WCAG 2.1: cada canal é linearizado, ponderado pelo quanto o olho capta dele, e a razão é (mais claro + 0,05) dividido por (mais escuro + 0,05). A escala vai de 1, para duas cores idênticas, a 21, para preto contra branco.
Exemplos
| Caso | Entrada | Resultado |
|---|---|---|
| Um valor hexadecimal de um arquivo de design | #3498db | rgb(52 152 219), hsl(204 70% 53%) |
| A forma curta, que repete cada dígito | #39d | #3399DD, not #039D |
| Com transparência | rgb(52 152 219 / 0.5) | #3498DB80 |
Perguntas frequentes
Um contraste de 4,5 significa que o meu texto passa?
Depende do texto, e é por isso que se dá o número em vez de um veredicto. A WCAG pede 4,5 para texto normal e 3 para texto grande, sendo grande pelo menos 18 pontos, ou 14 pontos em negrito. Uma ferramenta que só enxerga duas cores não tem como saber qual regra se aplica.
Por que converter para HSL e voltar às vezes muda um dígito?
Porque o hexadecimal tem 256 passos por canal e o HSL não se divide neles de forma exata. A ida e volta pode cair um passo adiante. Aqui cada notação é calculada a partir dos canais originais, então os valores mostrados são sempre os mais próximos do que você digitou.
Qual é a diferença entre HSL e HSV?
Eles compartilham o matiz e discordam do resto. No HSL, luminosidade 100% é branco e 50% é a cor pura. No HSV, valor 100% é a cor pura e o branco só aparece quando a saturação cai a zero. As ferramentas de design costumam mostrar HSV; o CSS fala HSL.
Cores nomeadas como "rebeccapurple" são suportadas?
Não. A lista de palavras-chave do CSS é uma tabela de cerca de 150 nomes que pertence à especificação, e não à aritmética, e esta ferramenta converte entre notações em vez de procurar nomes.
Bom saber
- Tudo aqui é sRGB, o espaço que a web sempre presumiu. Os espaços mais amplos que o CSS Color 4 acrescenta — lab, oklch, display-p3 — descrevem cores que o sRGB não alcança, e converter para eles exige uma decisão sobre o que fazer com as que ficam de fora. Essa decisão não é tomada aqui.
- Os números de contraste são números, não veredictos. Se um par passa depende do tamanho e do peso do texto, coisa que uma cor sozinha não sabe.
Fontes
Todas as ferramentas de Código