O que é o formato HSL e quando devo usá-lo?

Matiz, Saturação e Luminosidade — permite manipular uma cor em termos legíveis: aumente a luminosidade para pastel, reduza a saturação para cinza. Preferido em CSS para variações dinâmicas como hover.

Como funciona o verificador de contraste WCAG?

Calcula a luminância relativa da cor e compara com o branco usando a fórmula WCAG. Razão ≥ 4,5 passa AA para texto normal; ≥ 7,0 passa AAA.

Qual a diferença entre cores HEX e RGB?

HEX é RGB codificado em hexadecimal. `#3A86FF` é exatamente `rgb(58, 134, 255)` — os pares de dígitos representam vermelho, verde e azul.

Como gerar cores complementares?

São calculadas rotacionando o ângulo de matiz no espaço HSL. Esta ferramenta gera quatro complementos em +90°, +150°, +180° e +270° a partir do matiz base.

Como converter uma cor RGB para CMYK antes de imprimir?

Digite ou selecione a cor e o valor CMYK aparece automaticamente ao lado dos outros formatos — não precisa converter manualmente. Lembre que alguns azuis e verdes vívidos de tela ficam fora da gama imprimível, então confira o resultado visualmente com sua gráfica antes de fechar o arquivo.

Como copiar o código hex rapidamente sem usar o mouse?

Pressione Shift+Enter em qualquer parte da página (fora de um campo de texto) para copiar o HEX ativo direto para a área de transferência. Útil quando você está alternando entre várias cores em sequência.

Dá para salvar várias cores e exportar todas de uma vez?

Sim — clique em "Save to Palette" para cada cor que quiser guardar, e depois em "Export Palette" para baixar um arquivo `.css` com todas como custom properties (`--palette-1`, `--palette-2`...). Ideal para consolidar as cores de um sistema de design.

O campo aceita hex abreviado de 3 dígitos, como #FFF?

Não — o validador exige exatamente 6 dígitos hexadecimais após o `#`. Se você tem um shorthand de 3 dígitos, duplique cada caractere manualmente (`#FFF` vira `#FFFFFF`) antes de colar.

Conversor de Cores

Converta cores entre HEX, RGB, HSL e CMYK instantaneamente. Ferramenta gratuita com seletor de cores, verificador de contraste WCAG e gerador de paletas.

Atualizado em abril de 2026

Active Preview

#197FE6

Complementary Colors

Format Conversions

Hexadecimal

RGB (Red, Green, Blue)

HSL (Hue, Saturation, Lightness)

CMYK (Cyan, Magenta, Yellow, Key)

WCAG AA: Fail

WCAG AAA: Fail

4.02:1 vs white

Tip: Click a complementary color swatch to use it. Press Shift+Enter to copy the HEX value.

Como usar

Um valor, quatro formatos ao mesmo tempo

1. Escolha ou digite a cor

Use o seletor nativo, ou digite um código hex de 6 dígitos como `#3A86FF`.

2. Copie o formato que precisa

HEX, RGB, HSL ou CMYK — clique no ícone de cópia ao lado de cada um.

3. Salve na paleta e exporte

"Save to Palette" coleciona cores; "Export Palette" baixa CSS com variáveis prontas.

O que esta ferramenta faz

Conversão precisa entre os quatro formatos

Verificação de contraste WCAG embutida

Compara automaticamente sua cor com branco e informa se passa AA (4,5:1) e AAA (7:1).

Cores complementares

Explore harmonias clicando nos swatches gerados a +90°, +150°, +180° e +270°.

Exportação CSS custom properties

Colecione cores numa paleta e baixe um arquivo CSS pronto de uma vez.

Precisão matemática

Elimina erros de arredondamento comuns em conversões manuais entre os formatos.

Atalho de teclado para copiar

Pressione Shift+Enter em qualquer lugar da página para copiar o HEX ativo sem precisar clicar no botão de cópia.

Formatos de cor explicados

Formato

Exemplo

HEX

#1A73E8 — shorthand universal em CSS

RGB

rgb(26, 115, 232) — canais 0–255

HSL

hsl(217, 89%, 51%) — matiz, saturação, luminosidade

CMYK

ciano/magenta/amarelo/preto — padrão para impressão

HEX 3 dígitos

#FFF não é aceito — expanda para os 6 dígitos completos, #FFFFFF

Quando você vai usar isso

Os cenários mais comuns entre quem usa a ferramenta

Handoff design-para-código

Designers especificam em HEX; devs precisam de RGB para color() ou HSL para temas dinâmicos.

Auditorias de acessibilidade

Verifique rapidamente se a cor primária da marca passa no contraste WCAG AA.

Preparação para impressão

Converta cores de tela para CMYK antes de enviar assets para uma gráfica.

Construindo sistemas de design

Salve múltiplas cores de marca e exporte todas como custom properties CSS de uma vez.

Erros comuns

Achar que RGB de tela bate exato com CMYK impresso

Alguns azuis e verdes vívidos de tela ficam fora da gama imprimível — confira antes de mandar para gráfica.

Usar HSL sem entender luminosidade 50%

50% é a cor pura; valores acima clareiam, abaixo escurecem — não é o mesmo eixo do brilho HSV.

Esquecer o `#` ao colar hex

O campo aceita com ou sem o prefixo, mas mantenha o hábito para evitar erro em outras ferramentas.

Colar hex abreviado de 3 dígitos

Códigos como #FFF não são reconhecidos pelo campo — ele exige os 6 dígitos completos. Expanda cada par antes de colar, ex.: #FFF vira #FFFFFF.

Aprovar uma cor só pela aparência

Uma cor pode parecer escura o suficiente a olho nu e ainda reprovar no contraste mínimo AA. Confie no cálculo dos badges WCAG antes de aprovar para produção, não na percepção visual.

Por que usar esta ferramenta

Mostra HEX, RGB, HSL e CMYK simultaneamente — sem precisar alternar entre múltiplas ferramentas espalhadas para cada formato.

O verificador de contraste WCAG embutido poupa uma etapa extra: você já sabe se a cor escolhida serve para texto antes de sair da tela de conversão.

Tudo roda direto no navegador — sem cadastro, sem instalação e sem enviar sua cor para um servidor externo. É a forma mais rápida de conferir uma cor de marca sem abrir um editor de imagem pesado.

Perguntas frequentes

Digite ou cole um código hex de 6 dígitos — a ferramenta exibe instantaneamente o equivalente RGB. #FF8000 vira rgb(255, 128, 0).

Referências

MDN — Valor de cor CSS

Referência completa para todos os formatos de cor CSS.

WCAG 2.1 — Contraste Mínimo

Orientação oficial do W3C sobre razões de contraste mínimas.

Especificação CSS Color Level 4

A especificação formal cobrindo todos os modelos de cor em navegadores modernos.