PT

Conversor de cores

Digite qualquer cor CSS ou escolha uma, e veja a cor em todos os formatos de uma vez. Confira o contraste com um fundo e gere tons mais claros e mais escuros.

Grátis e privado. Tudo funciona no seu navegador e nada é enviado.

Como funciona

  1. Digite uma corDigite um valor como #0d6b57, rgb(13 107 87) ou teal, ou use o seletor.
  2. Copie o formato que precisaTodos os formatos se atualizam de uma vez; copie com um clique.
  3. Confira o contrasteDefina uma cor de fundo e veja os resultados WCAG.

Todos os formatos a partir de uma entrada

Designers passam valores HEX, o CSS pede rgb() ou hsl(), design tokens usam cada vez mais OKLCH e as gráficas pedem CMYK. Digite a cor em qualquer formato que o navegador entenda, incluindo nomes como rebeccapurple, e todos os outros aparecem na hora, prontos para copiar.

OKLCH é um espaço de cor perceptual aceito por todos os navegadores atuais: passos iguais de luminosidade parecem iguais ao olho, e é por isso que a paleta de tons abaixo é montada em OKLCH em vez de misturar a cor com branco e preto.

Contraste acessível

O texto precisa se destacar do fundo para pessoas com baixa visão. O verificador de contraste calcula a taxa WCAG e mostra se o par passa no nível AA (4,5:1 para texto normal, 3:1 para texto grande) e no AAA (7:1 e 4,5:1). Cores semitransparentes são misturadas com o fundo antes, como o navegador faria.

Perguntas frequentes

Quais formatos de cor posso digitar?

Qualquer valor válido em CSS: HEX com 3, 4, 6 ou 8 dígitos, rgb(), hsl(), hwb(), lab(), oklch() e nomes de cores.

O valor CMYK é exato para impressão?

É uma conversão simples, sem perfil de impressão. Para impressão profissional, use os valores CMYK do perfil da sua gráfica.

Qual taxa de contraste eu preciso?

O WCAG AA pede 4,5:1 para texto normal e 3:1 para texto grande e elementos da interface.

Por que o OKLCH importa?

Ele acompanha a forma como as pessoas enxergam a luminosidade, então paletas e degradês feitos em OKLCH ficam uniformes.