Conversor de cores
Uma cor entra, todas as notações saem, mais tons, sombras e contraste WCAG.
Entrada
Hex, rgb(), hsl(), hsv(), cmyk() ou um nome de cor do CSS. Nas porcentagens valem a vírgula e o ponto.
Alguns valores estavam fora da faixa e foram limitados, como o CSS faz.
Esta cor é translúcida. Hex, rgb(), hsl() e hsv() mantêm o alfa; CMYK e a paleta não têm alfa, então ele foi descartado ali.
Em todas as notações
- HEX
- RGB
- HSL
- HSV
- CMYK
- Nome
O CMYK vem da fórmula simples, sem perfil de impressora; as tintas impressas vão parecer diferentes.
Tons, sombras e harmonias
A luminosidade avança em passos iguais até o branco e até o preto; a complementar fica do lado oposto no círculo cromático e as análogas a 30° de cada lado. Clique em uma amostra para copiar o hex dela.
Mais claros
Mais escuros
Complementar
Análogas
Verificador de contraste
Digite uma cor válida acima e uma segunda aqui para medir o contraste.
A primeira cor era translúcida e foi misturada sobre a segunda antes da medição; o alfa da segunda cor é ignorado.
| Nível WCAG | Mínimo | Resultado |
|---|---|---|
| AA, texto normal | 4.5:1 | – |
| AA, texto grande | 3:1 | – |
| AAA, texto normal | 7:1 | – |
| AAA, texto grande | 4.5:1 | – |
Texto grande tem pelo menos 18 pt, ou 14 pt em negrito (cerca de 24 px, ou 18,7 px em negrito). A razão é julgada no valor exato e mostrada com duas casas.
Ferramentas relacionadas
-
Conversor de unidades
Escolha a grandeza e compare o mesmo valor em todas as unidades do grupo. -
Texto para binário
Converta texto e valores de bytes nos dois sentidos, com ASCII ou UTF-8. -
Conversor de números romanos
Converta nos dois sentidos e entenda cada algarismo. -
Conversor de imagens
Troque o formato sem alterar as dimensões da imagem. -
Calculadora de proporção de imagem
Descubra a proporção e calcule uma nova largura ou altura. -
Normalizador de ícones SVG
Uma grade comum para ícones com margens diferentes, sem transformar vetores em pixels.
Cole ou digite uma cor na notação que você tiver: um código hex com ou sem #, rgb() ou rgba(), hsl(), hsv(), cmyk() ou um dos 148 nomes de cor do CSS. O conversor mostra a cor nas outras notações enquanto você digita, cada uma com botão de copiar, e o seletor nativo ao lado do campo acompanha nos dois sentidos. Abaixo, tons mais claros e mais escuros, a cor complementar e duas análogas formam uma paleta rápida, e o verificador de contraste mede a razão WCAG contra branco, preto ou qualquer outra cor. Tudo roda no seu navegador; a cor não é enviada a lugar nenhum.
Como usar
- Digite ou cole uma cor: #1e90ff, rgb(30, 144, 255), hsl(210, 100%, 56%) ou dodgerblue.
- Leia a cor nas outras notações e copie a que precisar; Ctrl+Shift+C copia o valor em que você está.
- Arraste o seletor ao lado do campo para ajustar a cor; o campo e todas as notações acompanham.
- Escolha branco, preto ou outra cor no verificador de contraste e leia a razão com as marcas de aprovado e reprovado.
O que ela cobre
- Aceita hex de 3, 4, 6 e 8 dígitos, rgb() com valores ou porcentagens, hsl(), hsv() ou hsb(), cmyk(), listas como 30, 144, 255 e os 148 nomes de cor do CSS.
- Leva o alfa para hex, rgb(), hsl() e hsv(); CMYK e a paleta não têm alfa, e uma nota avisa quando ele é descartado.
- Limita valores fora da faixa como o CSS faz e avisa; o matiz dá a volta no círculo.
- Entende vírgula decimal em porcentagens como 55,9% quando a lista é separada por espaços ou por vírgula e espaço.
- Mostra cada veredito de contraste em palavra e símbolo, nunca só pela cor.
Perguntas frequentes
Qual é a diferença entre HSL e HSV?
Os dois descrevem uma cor por matiz, saturação e um terceiro eixo. No HSL esse eixo é a luminosidade: 100% é sempre branco e 50% é o matiz puro em saturação total. No HSV, também chamado HSB, é o valor ou brilho: 100% é o próprio matiz puro, e o branco vem de baixar a saturação. Seletores de programas de design costumam usar HSV e o CSS usa HSL; o conversor calcula os dois a partir da mesma cor.
Por que o CMYK fica diferente na impressão?
O CMYK daqui sai da fórmula simples: o preto assume a parte mais escura da cor e as outras três tintas preenchem o resto, sem nenhum perfil ICC. A impressão real depende do papel, do jogo de tintas e do perfil da gráfica, cujo programa converte a cor RGB por esse perfil, então as porcentagens dela serão diferentes destas. Use este CMYK como ponto de partida, não como valores finais.
Qual razão de contraste um texto precisa?
A WCAG 2 pede pelo menos 4,5:1 entre texto normal e fundo no nível AA e 3:1 para texto grande, ou seja, 18 pontos ou 14 pontos em negrito, cerca de 24 px ou 18,7 px em negrito. O nível AAA sobe para 7:1 e 4,5:1. O verificador calcula a razão pela luminância relativa como a norma define e julga o valor exato: 4,4999 reprova mesmo aparecendo como 4,50.
A cor que eu digito é enviada para algum lugar?
Não. A leitura, a conversão e a conta do contraste acontecem na própria página, então nada sai do seu aparelho e a página funciona sem internet. A última cor e a segunda cor do verificador ficam só neste navegador, e a cor principal aparece na barra de endereço como ?c= para que um link copiado abra nela. Limpar apaga as duas.
Atualizado em