Conversor de cores (HEX, RGB, HSL, CMYK, OKLCH)
Digite uma cor em qualquer formato — #hex, rgb(), hsl(), hwb(), oklch() ou um nome como «tomato» — e obtenha na hora todas as equivalências, o contraste WCAG sobre branco e preto e uma escala de tons e sombras.
Processado 100% no seu navegador
Como posso verificar?
Seus arquivos nunca são enviados: são processados no seu dispositivo. Verifique você mesmo: carregue a página, desligue o Wi-Fi e a ferramenta continua funcionando. Ou abra as ferramentas de desenvolvedor do navegador (F12), aba «Rede»: nenhum arquivo sai do seu dispositivo.
Ctrl + Enter executarCtrl + C copiar resultado
Como usar
- 1Digite ou cole uma cor em qualquer formato, ou escolha-a no seletor.
- 2Confira as equivalências em HEX, RGB, HSL, HSV, HWB, CMYK e OKLCH.
- 3Clique em qualquer formato para copiá-lo para a área de transferência.
- 4Verifique o contraste WCAG e use os tons e sombras para criar variações.
Casos de uso
- Levar cores do Figma ou Photoshop (HEX) para CSS moderno (OKLCH, HSL).
- Preparar valores CMYK aproximados para impressão.
- Verificar se a cor de um texto cumpre a acessibilidade AA ou AAA.
- Encontrar o nome CSS mais parecido com uma cor.
Perguntas frequentes
Qual a diferença entre HEX, RGB e HSL?
Descrevem a mesma cor de formas diferentes. HEX e RGB indicam a quantidade de vermelho, verde e azul (HEX em hexadecimal). HSL usa matiz, saturação e luminosidade, mais intuitivo para criar variações de um tom.
O que é OKLCH e por que usar?
Um espaço de cor perceptual suportado pelos navegadores modernos: duas cores com o mesmo «L» parecem igualmente claras, o que não acontece no HSL. É ideal para paletas e design systems consistentes.
O valor CMYK é exato para impressão?
É uma conversão matemática aproximada. O CMYK real depende do perfil de cor da gráfica e do papel, então confirme os valores finais com o seu fornecedor.
O que significam AA e AAA no contraste?
São níveis das diretrizes WCAG: AA exige contraste mínimo de 4,5:1 para texto normal (3:1 para texto grande) e AAA exige 7:1. Quanto maior a razão, mais legível é o texto.