Conversor de cores

O que é um conversor de cores?

Um conversor de cores pega uma cor em qualquer formato comum — HEX, RGB, HSL, OKLCH — e mostra todos os outros formatos que representam exatamente a mesma cor. É a ferramenta do dia a dia de quem trabalha com design e desenvolvimento na hora de bater cores da marca, depurar variáveis CSS, comparar paletas de tema claro e escuro ou conferir contraste de acessibilidade.

O CSS suporta vários modelos de cor, e cada um tem seus pontos fortes. HEX e RGB descrevem cores em termos de luz vermelha, verde e azul. HSL é mais intuitivo (matiz, saturação e luminosidade). Já o OKLCH é um modelo perceptual, no qual variações numéricas iguais parecem variações visuais iguais — o que é especialmente útil para gerar tonalidades, sombras e paletas acessíveis.

Acessibilidade vem do contraste, e não só da cor em si. A WCAG define uma razão de contraste entre texto e fundo — pelo menos 4.5:1 para texto corrido e 3:1 para títulos grandes. Uma boa ferramenta de cor mostra os dois números ao lado da cor escolhida, pra você não publicar uma UI inacessível sem querer.

O que você vai aprender convertendo cores

• HEX nada mais é do que uma forma curta de RGB — #ff8800 é a mesma coisa que rgb(255, 136, 0).
• HSL separa *matiz* (qual cor), *saturação* (quão vívida) e *luminosidade* (quão clara). Mexer em uma sem afetar as outras é bem mais intuitivo do que ficar ajustando R/G/B.
• OKLCH é perceptualmente uniforme: aumentar L em 10% no OKLCH parece a mesma variação de luminosidade pra qualquer matiz. Com HSL isso não acontece.

Como converter e validar cores passo a passo

1. 1

   Informe uma cor

   Cole qualquer valor em HEX, RGB, HSL ou OKLCH, ou escolha uma cor pelo conta-gotas / seletor nativo.

2. 2

   Veja todos os formatos de uma vez

   O conversor mostra a mesma cor expressa em cada formato suportado. Clique em qualquer valor para copiar para a área de transferência.

3. 3

   Ajuste com sliders de HSL ou OKLCH

   Arraste o slider de luminosidade para gerar tonalidades (mais claras) e sombras (mais escuras). Use a luminosidade do OKLCH quando quiser passos visualmente consistentes.

4. 4

   Confira o contraste com cores de texto

   O painel de contraste mostra a razão WCAG tanto contra branco quanto contra preto. Mire em ≥ 4.5 para texto corrido e ≥ 3 para títulos grandes.

5. 5

   Cole o valor no seu CSS

   Use o formato que combina com a sua base de código — HEX para design tokens, OKLCH para paletas modernas, HSL quando quiser ajustar com calc().

Referência rápida dos formatos de cor do CSS

Os cinco formatos que você encontra no dia a dia, todos com exemplos da mesma cor. A referência completa de sintaxe está na página <color> do MDN.

Exemplos de conversão de cores para testar

color: #6c8cff;color: rgb(108 140 255);color: hsl(228 100% 71%);color: oklch(67% 0.16 268);

--brand:        oklch(67% 0.16 268);--brand-light:  oklch(78% 0.12 268);--brand-lighter:oklch(88% 0.08 268);--brand-dark:   oklch(55% 0.18 268);--brand-darker: oklch(40% 0.16 268);

background: rgb(108 140 255 / 0.5);background: #6c8cff80;

Erros comuns na conversão de cores

• Comparar a luminosidade do HSL entre matizes diferentes. hsl(60 100% 50%) (amarelo) e hsl(240 100% 50%) (azul) têm o mesmo L, mas o brilho percebido é totalmente diferente — para comparações visuais, vá de OKLCH.
• Esquecer que o HEX de 3 dígitos (#abc) é só um atalho para a forma de 6 dígitos (#aabbcc).
• Usar rgba(...) em vez da sintaxe moderna rgb(... / alpha) — as duas funcionam, mas a versão com barra é a da spec atual e fica mais legível nas ferramentas.

Perguntas frequentes sobre o Conversor de Cores