Conversor de cores

Como usar

1. Digite ou cole uma cor no campo Cor, ou toque na amostra para abrir o seletor do sistema. Vale qualquer formato do CSS: #651424, #0af, rgb(101 20 36), rgba(101, 20, 36, .5), hsl(348 67% 24%), hwb(…), oklch(…), oklab(…), transparent e os 148 nomes, como tomato ou rebeccapurple.
2. A ferramenta mostra a mesma cor em HEX, RGB, HSL, HWB e OKLCH. Cada linha tem um botão de copiar.
3. Em Usar no código, escolha o formato e copie a cor pronta como classe do Tailwind (bg-[#651424]), variável CSS ou token de tema do Tailwind v4.
4. No painel Contraste, confira se um texto nessa cor fica legível sobre um fundo. Se não passar, a ferramenta sugere o tom mais próximo que passa.
5. Em Tons claros e escuros, toque numa amostra para copiar o HEX, ou copie a paleta inteira como variáveis CSS.

Tudo é calculado no seu navegador. Nada do que você digita é enviado ou guardado.

Qual formato usar?

• HEX: vermelho, verde e azul em hexadecimal (#rrggbb, com aa opcional para a transparência). É o mais compacto e aparece em design systems, Figma e e-mails.
• RGB: os mesmos três canais em números de 0 a 255. Útil quando você mexe nos canais via código, ou precisa de rgba() em código antigo.
• HSL: matiz (0–360°), saturação e luminosidade. Fácil de ajustar à mão ("mesma cor, mais clara"), mas a luminosidade não corresponde ao que o olho vê: um amarelo e um azul com l = 50% parecem muito diferentes.
• HWB: matiz + quanto de branco + quanto de preto. É o jeito de misturar tinta: pegue a cor pura e junte branco ou preto.
• OKLCH: luminosidade percebida (L), croma (C) e matiz (H). O mais moderno: L acompanha a percepção, então trocar só o matiz mantém o contraste parecido. Também descreve cores fora do sRGB (telas P3).

Todos os navegadores atuais aceitam os cinco formatos e a sintaxe com espaços (rgb(101 20 36 / 50%)). Marque Sintaxe antiga se precisar da forma com vírgulas (rgba(101, 20, 36, 0.5)).

Por que alguns valores têm casas decimais?

Uma cor em HEX tem 8 bits por canal (16,7 milhões de cores). Arredondar HSL ou OKLCH para números inteiros às vezes cai em outra cor. A ferramenta usa a menor precisão que, lida de volta, devolve exatamente a mesma cor. Por isso hsl(200 100% 50%) aparece limpo e outras cores ganham uma casa decimal.

"Fora do gamut"

O OKLCH descreve cores que uma tela comum (sRGB) não consegue mostrar, como oklch(70% 0.4 150). Nesse caso a ferramenta faz o mesmo que o navegador, seguindo o algoritmo do CSS Color 4: mantém a luminosidade e o matiz e reduz o croma até a cor caber. Os formatos mostrados são os dessa cor ajustada.

Contraste: o que significam AA e AAA

A razão de contraste do WCAG compara a luminância relativa das duas cores e vai de 1:1 (cores iguais) a 21:1 (preto no branco). Os mínimos do WCAG 2.2:

• Texto normal: 4,5:1 para AA e 7:1 para AAA.
• Texto grande (≥ 24 px, ou ≥ 18,66 px em negrito): 3:1 para AA e 4,5:1 para AAA.
• Ícones, bordas de campos e partes de gráficos (critério 1.4.11): 3:1.

O WCAG não arredonda: 4,49:1 reprova no AA. Por isso a razão aparece truncada em duas casas, nunca arredondada para cima.

Transparência: o WCAG só define contraste para cores opacas. Se o texto tem transparência, ele entra no cálculo já composto sobre o fundo. Se o fundo tem transparência, ele é composto sobre branco.

Sugestão de tom: quando o texto não passa, a ferramenta procura a cor mais parecida que passa. Ela mantém o matiz e o croma em OKLCH e muda só a luminosidade, testando tons mais escuros e mais claros, e fica com o que muda menos. Às vezes nenhum tom chega lá (por exemplo, 7:1 sobre um cinza médio). Aí a saída é trocar o fundo ou usar preto ou branco.

Limitações do cálculo

• A fórmula do WCAG 2.x é a exigida hoje por leis e auditorias de acessibilidade, mas tem defeitos conhecidos: costuma superestimar o contraste de cores escuras e não leva em conta o tamanho nem o peso da fonte. O futuro WCAG 3 estuda outro método (APCA), que ainda é rascunho.
• Passar no contraste não garante leitura para todos. Não dependa só da cor para passar informação (use também ícones e texto) e teste com a página de verdade.

Tons claros e escuros

Os tints misturam a cor com branco e os shades com preto, em passos de 10%. A mistura acontece no espaço OKLab: nele os passos parecem igualmente espaçados ao olho e a cor não fica "suja", como acontece misturando em RGB. Use os tons claros para fundos e destaques e os escuros para texto e estados de hover. Confira o contraste de cada par antes de usar.

Usar no código

• Classe do Tailwind com valor arbitrário: bg-[#651424], text-[oklch(33.8%_0.113_14.9)]. No Tailwind, os espaços dentro de [...] viram _.
• Variável CSS: --brand: #651424;, para usar com var(--brand).
• Tema do Tailwind v4: dentro de @theme { --color-brand: #651424; } você ganha as classes bg-brand, text-brand, border-brand e outras.

Perguntas frequentes

HEX com 8 dígitos funciona? Sim. Os dois últimos dígitos são a opacidade (80 ≈ 50%). Todos os navegadores atuais aceitam.

Por que a cor do seletor não tem transparência? O seletor nativo do sistema só escolhe cores opacas. Ajuste a opacidade no controle logo abaixo, ou digite um HEX de 8 dígitos ou um / alpha.

Por que currentColor ou lab() não funcionam? currentColor, inherit e as cores do sistema (Canvas, ButtonText) não têm valor fixo: dependem do elemento ou do tema do aparelho, então não dá para convertê-las sozinhas. lab(), lch() e color() ainda não são convertidos aqui. Nesses casos a ferramenta explica o motivo.

A ferramenta funciona sem internet? Depois que a página carrega, sim: não há nenhuma chamada ao servidor.