Conversor de cores
Converta uma cor entre HEX, RGB, HSL, HSV e CMYK e verifique se duas cores têm contraste suficiente para um texto legível.
Funciona inteiramente no seu navegador
- HEX
- RGB
- HSL
- HSV / HSB
- CMYK
- Nome CSS
Verificador de contraste
Taxa de contraste –
| Uso | Exige | Resultado |
|---|---|---|
| Texto normal, AA | 4,5:1 | |
| Texto normal, AAA | 7:1 | |
| Texto grande, AA | 3:1 | |
| Texto grande, AAA | 4,5:1 | |
| Ícones e partes da interface, AA | 3:1 |
Lê HEX (3, 4, 6 ou 8 dígitos), rgb(), hsl(), hsv(), cmyk() e nomes de cores CSS; outras sintaxes de cor CSS são lidas pelo seu navegador quando possível. HSL, HSV e CMYK são mostrados com uma casa decimal.
Como converter uma cor
- Digite ou cole uma cor em qualquer formato comum, como
#1636a3,rgb(22, 54, 163),hsl(226, 76%, 36%)ounavy, ou escolha uma no seletor de cores. - Copie o formato de que precisa na lista. Os valores são atualizados enquanto você digita.
- Em Verificador de contraste, informe uma cor de texto e uma cor de fundo para ver a taxa de contraste entre elas e se passam no WCAG AA e AAA.
Formatos de cor e contraste
Um conversor de cores trabalha com formatos que descrevem a mesma cor de jeitos diferentes. HEX e RGB descrevem uma cor de tela como quantidades de vermelho, verde e azul de 0 a 255; o HEX apenas escreve cada quantidade como dois dígitos hexadecimais, com um terceiro par opcional para a opacidade. HSL e HSV descrevem as mesmas cores por matiz (um ângulo na roda de cores), saturação e luminosidade ou valor, o que facilita escolher uma versão mais clara ou mais apagada de uma cor. São coordenadas diferentes para as mesmas cores sRGB, então a conversão entre elas é exata, exceto pelo arredondamento.
O CMYK é diferente: ele descreve tinta, e a conversão real depende do processo de impressão. O valor mostrado é a fórmula simples (o preto é 1 menos o canal mais claro, e as outras tintas completam o resto), útil para trabalhos aproximados, mas não substitui um perfil de impressão.
O verificador de contraste aplica a fórmula de contraste do WCAG 2, a mesma usada em auditorias de acessibilidade e nas ferramentas de desenvolvedor dos navegadores. Ele mede apenas o contraste de luminância, então não informa sobre pares problemáticos para daltonismo, como vermelho sobre verde, e fontes muito finas ou pequenas podem precisar de mais contraste do que o mínimo.
Dicas
- Precisa da cor de um pixel em uma foto ou captura de tela? Use o Seletor de cores de imagem.
- Vai fazer um QR Code com as cores da marca? O Gerador de QR Code avisa quando o contraste está baixo demais para a leitura.
- Convertendo números hexadecimais que não são cores? Experimente o Conversor de bases numéricas.
Perguntas frequentes
O valor CMYK serve para impressão?
Só de forma aproximada. O CMYK daqui é a fórmula simples que converte o RGB da tela sem perfil de cor, que é o que a maioria dos conversores online usa. As gráficas trabalham com tintas e papéis específicos, descritos por um perfil ICC, então, para trabalhos impressos, converta em um software de design com o perfil que a sua gráfica fornecer.
Como a taxa de contraste é calculada?
Com a fórmula do WCAG 2: a luminância relativa de cada cor é calculada a partir dos valores sRGB, e a taxa é (mais clara + 0,05) dividido por (mais escura + 0,05). Ela vai de 1:1 (sem contraste) a 21:1 (preto no branco). O texto atual do WCAG usa um limite de 0,04045 na fórmula; versões antigas diziam 0,03928, o que dá o mesmo resultado para todas as cores de 8 bits.
Quais taxas o AA e o AAA exigem?
Texto normal precisa de 4,5:1 para AA e 7:1 para AAA. Texto grande, ou seja, pelo menos 24 px normal ou cerca de 18,7 px em negrito, precisa de 3:1 para AA e 4,5:1 para AAA. Ícones, bordas de campos e outras partes da interface precisam de 3:1 (WCAG 1.4.11). A taxa não é arredondada para cima: 4,49:1 reprova no AA para texto normal.
O que acontece com cores transparentes?
Uma cor de texto parcialmente transparente é primeiro misturada com o fundo, do jeito que a tela a mostra, e a cor resultante é medida. Um fundo parcialmente transparente é considerado sobre branco. Os canais são arredondados para números inteiros depois da mistura, como uma tela os mostraria.
Por que os valores HSL mudam um pouco depois de converter de volta?
As cores de tela têm 256 níveis por canal, então a maioria dos valores HSL e HSV não cai exatamente em um deles. O conversor mantém a precisão total internamente e arredonda só para exibir: HEX e RGB para números inteiros, HSL, HSV e CMYK para uma casa decimal.
Ele conhece os nomes de cores CSS?
Sim, todas as 148 cores com nome do CSS, como rebeccapurple e cornflowerblue. Digite um nome para convertê-lo; quando uma cor corresponde exatamente a um nome, o nome também aparece. Algumas cores têm dois nomes, como aqua e cyan.