Conversor de códigos de cor

Converta códigos de cor entre HEX, RGB, HSL, HSV, OKLCH e CMYK. Também dá para verificar a taxa de contraste (WCAG) entre texto e fundo.

1. Informe uma cor

Cole um código de cor ou clique no quadrado à esquerda para escolher uma cor.

Ex.: #FF6B35, rgb(255, 107, 53), hsl(16, 100%, 60%), C0 M58 Y79 K0, tomato

2. Resultado da conversão

Use os botões à direita para copiar cada valor, pronto para colar no CSS.

HEX
—
RGB
—
HSL
—
HSV (HSB)
—
OKLCH
—
CMYK (aproximado)
—
Nome de cor CSS
—

3. Verificar o contraste

Veja se uma combinação de cor de texto e de fundo é fácil de ler, segundo as WCAG (as diretrizes de acessibilidade na web).

Usar a cor como

Informe uma cor acima para ver uma amostra aqui.

Taxa de contraste

—

  • Texto normal AA4.5:1 ou mais—
  • Texto normal AAA7:1 ou mais—
  • Texto grande AA3:1 ou mais—
  • Texto grande AAA4.5:1 ou mais—

Texto grande é o de 18 pt (24 px) ou mais, ou de 14 pt (cerca de 18,7 px) ou mais em negrito.

A conversão é feita neste dispositivo. As cores que você informa não são enviadas para lugar nenhum.

Os valores CMYK são uma estimativa calculada sem perfil de cor de impressão (perfil ICC). Antes de enviar arquivos para a gráfica, confira as cores no seu programa de design.

Foi útil? Adoraríamos que você compartilhasse

Algo não funcionou ou tem uma ideia para melhorar?

Informar um problemaSugerir uma melhoria

Como usar

  1. 1. Digite um código de cor

    Digite o código da cor que você quer converter (por exemplo, #FF6B35) no campo “Código de cor”. Na hora, o “Resultado da conversão” logo abaixo mostra a cor em RGB, HSL, HSV, OKLCH e CMYK, junto com o nome de cor CSS.

  2. 2. Escolha uma cor

    Toque no quadrado de cor à esquerda do campo “Código de cor”. O seletor de cores se abre, e o código da cor escolhida entra no campo e atualiza os resultados.

  3. 3. Copie os resultados

    Em “Resultado da conversão”, toque no botão à direita de “RGB” para copiar no formato rgb(…). Toque em “Copiar todos os resultados”, logo abaixo, para copiar todos os formatos, um por linha.

  4. 4. Verifique o contraste

    Mais abaixo, em “Verificar o contraste”, toque em “Preto”, à direita de “Cor de fundo”. Aparecem uma amostra de texto sobre fundo preto, a taxa de contraste e se o texto normal e o grande atendem aos níveis AA e AAA.

Útil para

  • Levar as cores do design para o CSS

    Cole um HEX copiado do seu programa de design e veja na hora as versões em rgb(), hsl() e no novo oklch().

    Quem desenvolve sites e apps

  • Conferir se o texto está legível

    Informe a cor do texto e a do fundo para ver a taxa de contraste e se ela atende aos níveis AA e AAA das WCAG.

    Designers atentos à acessibilidade

  • Ter uma ideia do CMYK para impressão

    Ao criar panfletos ou cartões de visita, tenha uma noção de como uma cor da web fica em CMYK.

    Quem cria materiais impressos

  • Reunir as cores da marca em todos os formatos

    Com “Copiar todos os resultados”, você copia de uma vez do HEX ao CMYK, pronto para colar num manual de marca ou documento.

    Equipes de marketing e de marca

Bom saber antes de começar

  • Os valores CMYK são uma estimativa calculada. Para valores exatos de acordo com o perfil de cor da gráfica (perfil ICC), confira no seu programa de design.
  • Para extrair as cores de uma imagem, use Extrair cores de uma imagem.
  • Não converte para códigos de cores especiais como PANTONE nem para valores Munsell.

Qual a diferença entre os formatos de cor

As cores da tela são formadas pela intensidade de três cores de luz: vermelho, verde e azul. HEX (#FF6B35) e RGB (rgb(255, 107, 53)) são a mesma coisa escrita em hexadecimal e em decimal. HSL e HSV descrevem isso como matiz, saturação e luminosidade (ou brilho), o que facilita ajustar as cores. O OKLCH descreve a luminosidade do jeito que o olho percebe, então fica mais fácil montar paletas com luminosidade uniforme, e ele já começa a ser usado no CSS moderno.

CMYK é a quantidade de cada tinta de impressão: ciano, magenta, amarelo e preto. A tela usa luz e a impressão usa tinta, então não dá para reproduzir exatamente a mesma cor. Os valores CMYK desta ferramenta são uma estimativa obtida com uma fórmula bastante usada. A taxa de contraste expressa a diferença de luminosidade entre o texto e o fundo numa escala de 1 a 21. As WCAG pedem pelo menos 4,5 (AA) ou 7 (AAA) para texto normal.

Formatos de código de cor
ExemploOnde é usado
HEX#FF6B35CSS, HTML, programas de design
RGBrgb(255, 107, 53)CSS, programação, edição de imagens
HSLhsl(16, 100%, 60%)CSS (ajuste de luminosidade)
HSV (HSB)hsv(16, 79%, 100%)Seletores de cor do Photoshop, Figma e outros
OKLCHoklch(70.5% 0.193 39.2)CSS moderno, criação de paletas
CMYKcmyk(0%, 58%, 79%, 0%)Impressos (panfletos, cartões de visita)

Perguntas frequentes

Dúvidas comuns sobre conversão de códigos de cor e taxa de contraste.

As cores que eu informo são enviadas para algum lugar?

Não. Tanto a conversão quanto o cálculo do contraste são feitos apenas no navegador do seu aparelho.

Em quais formatos posso informar uma cor?

HEX como #FF6B35 ou #F63 (com ou sem #), rgb() e rgba(), hsl() e hsla(), hsv() e hsb(), oklch(), cmyk() ou “C0 M58 Y79 K0”, e nomes de cores CSS como tomato. Se você digitar só números, como “255, 107, 53”, eles são lidos como RGB. Caracteres de largura total também funcionam.

Dá para converter cores com transparência (alfa)?

Dá. Se você informar um HEX de 8 dígitos como #FF6B3580 ou rgba(255, 107, 53, 0.5), o resultado sai com HEX de 8 dígitos, e RGB, HSL e OKLCH com opacidade. HSV e CMYK não têm como expressar opacidade, então só a cor é mostrada.

Por que um valor muda em 1 quando converto para HSL e volto?

Assim como em outros sites e programas de design, HSL e HSV são arredondados para números inteiros. Ao voltar a partir de valores arredondados, o RGB pode variar em 1 ou 2. Se precisar de valores exatos, use HEX ou RGB.

Posso usar os valores CMYK direto na impressão?

Use como referência. A cor impressa de verdade depende do papel, da tinta e do perfil de cor da gráfica (perfil ICC). Os valores desta ferramenta vêm de uma fórmula geral que não usa perfil. Confira no seu programa de design ou com a gráfica antes de enviar os arquivos.

O que é OKLCH?

Uma forma de descrever a cor por luminosidade (L), croma (C) e matiz (H) que se aproxima de como o olho humano percebe as cores. Cores com o mesmo valor de luminosidade parecem igualmente claras, mesmo com matizes diferentes. Os navegadores modernos aceitam no CSS como oklch().

A cor que informo em OKLCH muda um pouco.

O OKLCH consegue descrever cores muito vivas que uma tela comum (sRGB) não mostra. Nesses casos, a luminosidade e o matiz são mantidos, e o croma é reduzido até a cor poder ser exibida. Quando isso acontece, aparece um aviso abaixo do campo.

O que significam AA e AAA na taxa de contraste?

São níveis de conformidade das diretrizes de acessibilidade na web (WCAG 2). Texto normal precisa de 4,5 ou mais para AA e 7 ou mais para AAA. Texto grande (18 pt ou mais, ou 14 pt ou mais em negrito) precisa de 3 ou mais para AA e 4,5 ou mais para AAA.

Por que uma taxa de 4,49 não aparece como 4,5?

Para que uma combinação que fica logo abaixo do limite não pareça “Aprovado”, a taxa é truncada (não arredondada) em 2 casas decimais, e é esse valor que vale na verificação.

É grátis?

É. Sem cadastro e sem anúncios.

Mais ferramentas