DevToolPal
PT

Conversor de cores (HEX, RGB, HSL)

Converta cores entre HEX, RGB, HSL, HSV e CMYK, com pré-visualização ao vivo e contraste com branco e preto.

Roda localmente, nada é enviado

Opções

Cor

Resultado

O resultado aparece aqui

O que faz

O conversor de cores recebe uma cor em qualquer notação CSS comum e a mostra em todas as outras de uma vez: HEX, RGB, HSL, HSV e CMYK. Ele também exibe uma amostra de pré-visualização, o nome da cor CSS quando há correspondência exata e a taxa de contraste com branco e preto, para você conferir a legibilidade.

Como usar

  1. Digite ou cole uma cor no campo Cor, ou use o seletor de cores ao lado.
  2. Todas as notações são atualizadas enquanto você digita. Clique em Copiar ao lado da que você precisa.
  3. Ative Hex em maiúsculas se o seu guia de estilo escreve hex em letras maiúsculas.
  4. Confira as linhas de contraste antes de usar a cor em texto: um selo verde indica que ela passa no WCAG AA.

Exemplo

#1e90ff é a cor CSS dodgerblue. Ela é convertida em:

  • RGB: rgb(30, 144, 255)
  • HSL: hsl(210, 100%, 55.9%)
  • HSV: hsv(210, 88.2%, 100%)
  • CMYK: cmyk(88%, 44%, 0%, 0%)

O contraste dela no branco é de 3,24:1, o suficiente para títulos grandes, mas não para texto de corpo.

Modelos de cor em resumo

  • HEX e RGB descrevem quanto de luz vermelha, verde e azul uma tela emite. São o que navegadores e ferramentas de design usam internamente.
  • HSL descreve matiz (o ângulo no círculo cromático), saturação e luminosidade, o que facilita criar tons mais claros ou mais escuros da mesma cor.
  • HSV (também chamado de HSB) é usado pela maioria dos seletores de cor em softwares de design.
  • CMYK descreve as tintas ciano, magenta, amarela e preta usadas na impressão.

Cores com transparência, como #1e90ff80 ou rgb(30 144 255 / 50%), aparecem com canal alfa em HEX, RGB e HSL.

Perguntas frequentes

› Como converter HEX para RGB?

Divida os seis dígitos hexadecimais em três pares e leia cada par como um número de 0 a 255. Para #1e90ff, fica 1e = 30, 90 = 144 e ff = 255, ou seja, rgb(30, 144, 255). Esta ferramenta faz isso para você enquanto você digita.

› Quais formatos posso colar?

Hex com ou sem # (3, 4, 6 ou 8 dígitos), rgb() e rgba(), hsl() e hsla() tanto na sintaxe com vírgulas quanto com espaços, porcentagens, unidades de ângulo como deg e turn, e todos os 148 nomes de cores CSS.

› O que significa a taxa de contraste?

É o contraste WCAG 2 entre a cor e um fundo branco ou preto. Texto de corpo precisa de pelo menos 4,5:1 para o nível AA; texto grande (cerca de 24px, ou 19px em negrito) precisa de 3:1.

› Por que o CMYK é só aproximado?

Impressoras usam perfis de tinta que dependem do papel e da máquina. O CMYK mostrado aqui é a fórmula padrão independente de dispositivo, boa como ponto de partida, mas não substitui um perfil de impressão.