Utilore

Conversor de cores

Digite uma cor em qualquer notação comum — #1f5fd6, 1f5fd6, #1f5, rgb(31, 95, 214) — e todas as outras aparecem de uma vez, junto com os números de contraste necessários para um texto legível.

  • #1f5fd6 HEX
  • rgb(31, 95, 214) RGB
  • hsl(219, 75%, 48%) HSL

Contraste:

Como usar

Bom saber

Três notações para a mesma cor

HEX é curto e universal no CSS. RGB nomeia os canais explicitamente, o que importa quando o valor é calculado em vez de escrito à mão. HSL descreve matiz, saturação e luminosidade: é a forma indicada quando você quer a mesma cor um tom mais clara, pois muda um número em vez de adivinhar três.

Contraste não é enfeite

Pela WCAG, o texto corrido precisa de pelo menos 4,5:1 em relação ao fundo, e o texto grande, 3:1. Os dois números mostrados aqui dizem de imediato se essa cor suporta texto branco, texto preto ou nenhum dos dois — antes de o layout chegar ao desenvolvedor.

Perguntas frequentes

Quais formatos são aceitos?

HEX de três, quatro, seis e oito dígitos, com ou sem cerquilha, além de rgb() e rgba() com vírgulas ou espaços. O alfa é preservado e aparece no valor HEX.

Por que o HSL às vezes mostra uma cor um pouco diferente?

Os valores HSL são arredondados para inteiros por legibilidade, então a volta pode deslocar um canal em uma unidade. HEX e RGB continuam exatos.

Alguma coisa vai para um servidor?

Não. Tudo é calculado na página — as cores de uma marca ainda não lançada ficam no seu computador.

Ferramentas relacionadas