Conversor de Cores

Conversor de Cores Online — HEX, RGB, HSL e CMYK

Chega de converter cores manualmente ou depender de múltiplas ferramentas espalhadas. Este conversor de cores online gratuito exibe os valores em HEX, RGB, HSL e CMYK ao mesmo tempo — sem cadastro, sem instalação e sem que seus dados saiam do navegador.

Escolha uma cor usando o seletor interativo, digite um código hex diretamente, ou clique em uma das cores complementares para explorar harmonias de cor. Todos os formatos atualizam em tempo real, e cada valor é copiado com um único clique.

Como Usar o Conversor de Cores

1. Escolha ou digite sua cor — clique no swatch colorido para abrir o seletor nativo do navegador, ou digite um código hex de 6 dígitos como #3A86FF diretamente no campo de texto.
2. Copie o formato desejado — clique no ícone de cópia ao lado de HEX, RGB, HSL ou CMYK para pegar o valor e colar no seu projeto.
3. Verifique o contraste WCAG — a ferramenta compara automaticamente sua cor com o branco e informa se passa nos critérios WCAG AA (4,5:1) e AAA (7:1).
4. Salve e exporte — clique em "Save to Palette" para colecionar cores e depois "Export Palette" para baixar um arquivo CSS pronto com variáveis customizadas.

Converter entre HEX, RGB e HSL

As cores web vivem em três mundos diferentes: HEX é o shorthand que você vê em folhas de estilo CSS (#FF5733), RGB é a representação por canais usada em ferramentas de design (rgb(255, 87, 51)), e HSL é o modelo amigável para humanos que permite raciocinar sobre matiz, saturação e luminosidade de forma independente (hsl(11, 100%, 60%)).

Converter entre eles é mecânico, mas propenso a erros quando feito manualmente. Esta ferramenta hex para rgb elimina erros de arredondamento e fornece valores matematicamente precisos para os três formatos simultaneamente. CMYK é incluído para fluxos de impressão onde tintas substituem pixels.

Contraste de Cores WCAG — Por Que Importa

As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) definem razões de contraste que garantem que o texto permaneça legível para usuários com baixa visão. Os principais limiares:

• WCAG AA — pelo menos 4,5:1 para texto normal, 3:1 para texto grande (≥18pt ou ≥14pt negrito)
• WCAG AAA — pelo menos 7:1 para texto normal, 4,5:1 para texto grande

A ferramenta calcula a razão de contraste da cor selecionada contra o fundo branco usando a fórmula padrão de luminância relativa. Uma cor que repruva no AA geralmente é clara demais para texto corrido e deve ser escurecida.

Formatos de Cor Explicados

• HEX — Seis dígitos hexadecimais representando os canais R, G, B. Suporte universal em CSS. Exemplo: #1A73E8.
• RGB — Três inteiros (0–255) para vermelho, verde e azul. Suportado em CSS e em todas as ferramentas de design. Exemplo: rgb(26, 115, 232).
• HSL — Matiz (0–360°), Saturação (0–100%), Luminosidade (0–100%). Ideal para ajustes programáticos de cor, como escurecer um botão no hover.
• CMYK — Ciano, Magenta, Amarelo e Preto (Key) como porcentagens. Padrão para design de impressão.

Casos de Uso Comuns

• Handoff design-para-código: Designers especificam cores em HEX; desenvolvedores frequentemente precisam de RGB para funções color() do CSS ou HSL para temas dinâmicos.
• Auditorias de acessibilidade: Verifique rapidamente se a cor primária de uma marca passa no contraste WCAG AA no branco antes de lançar em produção.
• Preparação para impressão: Converta cores de tela para CMYK antes de enviar assets para uma gráfica e evite surpresas na impressão.
• Construindo sistemas de design: Salve múltiplas cores de marca na paleta e exporte todas como propriedades customizadas CSS com um clique.
• Explorando harmonias de cor: Clique nos swatches complementares para descobrir cores que combinam bem com a cor base.

Perguntas Frequentes

Como converter uma cor hex para RGB?

Digite ou cole um código hex de 6 dígitos (ex.: #FF8000) no campo de entrada. A ferramenta exibe instantaneamente o equivalente RGB — neste caso rgb(255, 128, 0). Clique no ícone de cópia para usar no seu stylesheet. Sem cálculo manual.

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

HSL significa Matiz, Saturação e Luminosidade. Ao contrário de HEX ou RGB, o HSL permite manipular uma cor em termos legíveis para humanos — aumente a luminosidade para torná-la pastel, reduza a saturação para deixá-la cinza. É o formato preferido em CSS quando você precisa de variações dinâmicas de cor, como estados de hover ou variantes para modo escuro.

Como funciona o verificador de contraste WCAG?

A ferramenta calcula a luminância relativa da sua cor e a compara com a luminância do branco (1,0) usando a fórmula WCAG: razão de contraste = (L1 + 0,05) / (L2 + 0,05). Se a razão for ≥ 4,5, a cor passa no WCAG AA para texto normal. Se for ≥ 7,0, passa no nível AAA mais restritivo.

Qual a diferença entre cores HEX e RGB?

HEX é simplesmente RGB codificado em notação hexadecimal. A cor #3A86FF é exatamente a mesma que rgb(58, 134, 255) — os dois primeiros dígitos hex (3A = 58) representam vermelho, os do meio (86 = 134) representam verde, e os últimos (FF = 255) representam azul.

Como gerar cores complementares?

Cores complementares são calculadas rotacionando o ângulo de matiz no espaço de cor HSL. Esta ferramenta gera quatro complementos harmoniosos em +90°, +150°, +180° e +270° a partir do matiz base, mantendo a mesma saturação e luminosidade. Clique em qualquer swatch para mudar instantaneamente para aquela cor.

Recursos

• MDN — Valor de cor CSS — Referência completa para todos os formatos de cor CSS incluindo HEX, RGB, HSL.
• WCAG 2.1 — Contraste Mínimo (1.4.3) — Orientação oficial do W3C sobre razões de contraste mínimas para conteúdo web acessível.
• Especificação CSS Color Level 4 — A especificação formal cobrindo todos os modelos de cor suportados em navegadores modernos.