ToolsMaxxing

Conversor de cores

Converta uma cor entre HEX, RGB, HSL, HSV e CMYK e confira o contraste do texto.

HEX
#4f46e5
RGB
rgb(79, 70, 229)
HSL
hsl(243, 75%, 59%)
HSV
hsv(243, 69%, 90%)
CMYK
cmyk(66%, 69%, 0%, 10%)

Contraste do texto (WCAG)

Texto branco sobre esta cor
6.29:1 Passa no AA
Texto preto sobre esta cor
3.34:1 Só texto grande

Seus arquivos ficam no seu dispositivo

Como funciona

  1. 1Digite uma cor em qualquer formato ou escolha uma com o seletor de cores.
  2. 2Veja a mesma cor em HEX, RGB, HSL, HSV e CMYK.
  3. 3Copie o formato que você precisa.
  4. 4Confira as linhas de contraste para ver se texto branco ou preto fica legível sobre ela.

O que cada opção faz

Entradas aceitas
#rgb, #rrggbb, #rrggbbaa, rgb(), rgba(), hsl(), hsla() e nomes de cores CSS como tomato.
Contraste
A razão WCAG contra branco e preto. 4,5:1 atende ao AA para texto normal e 3:1 para texto grande.

Privacidade

Tudo roda no seu navegador. Nada do que você digita é enviado a um servidor.

Perguntas frequentes

O valor CMYK é exato para impressão?

Não. É uma conversão matemática simples a partir do RGB. As impressoras usam perfis de cor, então uma prova da gráfica ficará diferente, principalmente em azuis e verdes vivos.

Qual a diferença entre HSL e HSV?

Ambos descrevem matiz, saturação e um eixo de brilho. No HSL, luminosidade 100 por cento é sempre branco. No HSV, valor 100 por cento é a versão mais brilhante da cor. Ferramentas de design costumam usar HSV e o CSS usa HSL.

O que significa o hex de oito dígitos?

Os dois últimos dígitos são a opacidade, de 00 (transparente) a ff (sólido). #4f46e580 tem cerca de 50 por cento de opacidade.

Por que um nome de cor não funciona?

Só as cores nomeadas do CSS são reconhecidas, como tomato ou rebeccapurple. Nomes de ferramentas de design não são.

Que contraste eu preciso?

O WCAG AA pede 4,5:1 para texto comum e 3:1 para texto grande e componentes de interface. O AAA pede 7:1 para texto comum.

Ferramentas relacionadas