Trocar formatos de cor no front-end
Converta um HEX do design em valores de referência RGB/HSL/CMYK.
Carregando…
Guide
A ferramenta de cor usa colord e os plugins de CMYK, acessibilidade e mistura para interpretar valores CSS e mostrar HEX, RGB, HSL, HSV e CMYK, além de gerar 10 escalas em direção ao branco e 10 em direção ao preto. Há ainda um verificador de contraste entre primeiro plano e fundo e, quando o navegador oferece suporte, o conta-gotas de tela com EyeDropper.
Atualizado em 2026-09-102 min read
rgb(), hsl(), por nome e afins, ou use o seletor de cor nativo.| Entrada | Saída | Observação |
|---|---|---|
#6366f1 |
HEX/RGB/HSL/HSV/CMYK | a mesma cor em vários formatos |
| Texto preto + fundo branco | 21:1 | contraste alto |
| Cor CSS inválida | mensagem de erro | não tenta adivinhar uma correção |
colord à sintaxe de cores CSS; não é um parser completo de todas as futuras funções de cor dos navegadores.colord.tints(10) / shades(10) e não equivalem à paleta fixa de um design system específico.Converta um HEX do design em valores de referência RGB/HSL/CMYK.
Informe a cor da marca e a cor de fundo para confirmar se o contraste AA/AAA é atingido.
Porque o navegador atual não tem a API EyeDropper e o botão fica desativado; use as ferramentas de desenvolvedor do próprio navegador ou um ambiente que suporte a API.
Aqui só há conversão matemática de representação de cor; não há gerenciamento ICC, papel nem configuração de impressora.
Os cálculos de cor acontecem no navegador; o EyeDropper só devolve um valor de cor quando o usuário o aciona e não envia o conteúdo da tela.
Atualizado em 2026-09-10
Conversão entre HEX, RGB, HSL, HSV e CMYK, geração de escalas, verificação de contraste e conta-gotas da tela
Esta ferramenta ainda não está totalmente traduzida; parte do conteúdo usa o idioma de origem ou um idioma de reserva.
Compatível com qualquer formato de cor CSS: HEX, rgb(), hsl(), nomes de cores e outros
Dica: capturar cores da tela exige um navegador compatível com a EyeDropper API (Chrome / Edge 95+)
| HEX | #6366f1 | |
| RGB | rgb(99, 102, 241) | |
| HSL | hsl(239, 84%, 67%) | |
| HSV | hsv(239, 59%, 95%) | |
| CMYK | cmyk(59%, 58%, 0%, 5%) |
10 níveis em direção ao branco (tints) e 10 ao preto (shades); clique em uma amostra para copiar
Avalia a legibilidade do texto sobre o fundo conforme a WCAG 2.0
Considera-se texto grande o de ≥18 pt (cerca de 24 px) ou ≥14 pt em negrito