HEX, RGB, HSL, CMYK e como verificar o contraste de texto

Um código de cor é uma mesma cor escrita em outra notação. HEX, RGB e HSL descrevem a mesma luz em uma tela, então convertem uma na outra com exatidão, a menos de arredondamentos. CMYK descreve tinta sobre papel, por isso sua conversão a partir de valores de tela é apenas uma estimativa. A razão de contraste WCAG é outro número, que compara o quão claras são duas cores, e ela define se o texto é legível. Cole uma cor no conversor de cores para ver todos os formatos de uma vez.

Conversor de coresPreciso de uma cor em outro formatoUse de graça

Se a cor que você precisa está dentro de uma foto, de um logotipo ou de uma captura de tela, primeiro leia-a do pixel com o seletor de cor de imagem e depois cole o HEX aqui. Como escolher uma cor exata de uma imagem explica os passos.

Hex e RGB são os mesmos números

Um código HEX são três pares de dígitos hexadecimais. #34D6A0 guarda um valor de vermelho, um de verde e um de azul. Cada par é um número de 00 a FF, o que equivale a 0 a 255 no sistema decimal. Assim, 34 é 52, D6 é 214 e A0 é 160, e a forma RGB é rgb(52, 214, 160).

Escrever o número em hexadecimal muda apenas a aparência. A forma abreviada #abc significa #aabbcc, com cada dígito duplicado. Um código de oito dígitos acrescenta um par de transparência no fim, de 00 para totalmente transparente a FF para totalmente opaco, então #34D6A080 é aproximadamente meio transparente. RGBA escreve a mesma transparência como um número de 0 a 1.

O CSS também aceita nomes de cores. rebeccapurple equivale a #663399. O conversor lê os nomes pelo próprio navegador, então qualquer nome que o navegador conheça vai funcionar.

HSL descreve uma cor do jeito que as pessoas a descrevem

HSL significa matiz, saturação e luminosidade. O matiz é um ângulo em um círculo de cores: o vermelho é 0 graus, o verde é 120 e o azul é 240. A saturação indica o quanto a cor se afasta do cinza, e a luminosidade indica o quanto ela se afasta do preto ou do branco.

A mesma #34D6A0 é hsl(160, 66%, 52%). Seu matiz fica entre o verde e o azul, sua saturação é alta e sua luminosidade está um pouco acima do ponto médio. HSL é a forma mais fácil de editar à mão, porque você pode manter o matiz e mudar só a luminosidade para obter um tom mais claro ou mais escuro.

HSV é parecido com HSL, mas usa o valor (brilho do canal mais forte) no lugar da luminosidade. Alguns seletores de cor usam esse formato, então você pode encontrá-lo em outras ferramentas. O conversor mostra o HSV ao lado do HSL para você comparar os dois.

CMYK é para tinta, por isso é uma estimativa

As telas somam luz: vermelho, verde e azul juntos formam o branco. As impressoras subtraem luz com tinta: ciano, magenta, amarelo e preto sobre papel branco. Os dois sistemas não se encaixam com exatidão, então um valor CMYK é sempre uma tradução.

O conversor usa a fórmula simples. O preto é K, igual a um menos o maior entre os valores de vermelho, verde e azul, numa escala de 0 a 1. Ciano, magenta e amarelo são então calculados a partir do que sobra de K. A fórmula ignora a tinta, o papel e o perfil de cor que a gráfica usa. Por isso o resultado impresso será diferente, e cores muito vivas podem ficar fora do que as tintas CMYK conseguem imprimir. Use o valor CMYK para começar a conversa com a gráfica e peça uma prova antes de uma tiragem grande.

Contraste depende de luminosidade, não de matiz

A razão de contraste WCAG compara duas cores pela luminância relativa. A luminância é calculada a partir dos valores de vermelho, verde e azul após a correção gama, e o verde pesa mais porque os olhos humanos são mais sensíveis a ele. Cada canal é convertido primeiro da escala de 0 a 255, e a luminância é 0,2126 vezes o vermelho, mais 0,7152 vezes o verde, mais 0,0722 vezes o azul.

A razão é a luminância mais clara somada a 0,05, dividida pela luminância mais escura somada a 0,05. Preto sobre branco dá 21 para 1, o maior valor possível. Duas cores podem parecer bem diferentes em matiz e ainda ter uma razão baixa se tiverem a mesma luminosidade, e esse é o caso que a verificação existe para pegar. O mesmo contraste baixo é a razão pela qual QR codes não são lidos.

Os limites

O WCAG 2.x define dois níveis, e a razão exigida depende do tamanho do texto.

• Nível AA: 4,5 para 1 para texto normal e 3 para 1 para texto grande.
• Nível AAA: 7 para 1 para texto normal e 4,5 para 1 para texto grande.

Texto grande tem 24 pixels ou mais, ou 18,66 pixels e negrito. Qualquer coisa menor conta como texto normal. Texto cinza sobre branco é uma falha comum. Um cinza médio como #777777 sobre branco dá cerca de 4,48 para 1. Ele reprova no AA para texto normal por pouca margem e passa no AA para títulos grandes.

O conversor mostra a razão arredondada com duas casas decimais, mas cada aprovação ou reprovação usa o número exato. Por isso, um valor que aparece como 4,50 ainda pode reprovar se estiver um pouco abaixo. A verificação mede apenas uma coisa. Ela não cobre o peso da fonte, o espaçamento entre linhas nem como pessoas com daltonismo veem um design, então teste também a página real nos tamanhos reais.

Tons claros e escuros

A faixa abaixo do conversor mostra nove etapas em torno da cor: quatro tons claros, misturados com branco, a própria cor e quatro tons escuros, misturados com preto. Clicar em uma delas copia o código HEX. Isso ajuda quando você precisa de um conjunto de cores relacionadas, como um fundo claro, um estado de hover e uma cor de texto escura, todas tiradas de um único valor da marca. Verifique cada par que escolher com a seção de contraste antes de usá-lo.

Como fazer com o fixmint

1. Cole uma cor na caixa Color como HEX, RGB, HSL ou um nome CSS, como rebeccapurple.
2. Leia as linhas HEX, RGB, HSL, HSV e CMYK. Pressione Copy ao lado da que você precisa. O CMYK aparece indicado como aproximado.
3. Digite a cor de fundo em Background ou use a amostra dela e leia a razão em On white, On black e On your background.
4. Confira as quatro marcas abaixo de cada razão: AA e AAA, cada um para texto normal e grande.
5. Em Tints and shades, toque em uma amostra para copiá-la.

Respostas rápidas

O valor CMYK é exato?

Não. É uma conversão aritmética simples que ignora a gráfica, o papel e o perfil de cor. Trate-o como ponto de partida e peça uma prova.

Uma razão de contraste aprovada torna um design acessível?

Significa que as cores do texto atingem um limite mensurável. A acessibilidade também depende do tamanho, do espaçamento, de animações e de como a página é construída, então a razão é um guia, não uma avaliação completa.

Qual formato devo guardar em uma folha de estilos?

Aquele que você consegue ler e editar com mais facilidade. HEX é compacto e comum. HSL é mais fácil de ajustar à mão, porque você muda a luminosidade sem mudar o matiz.