Como converter uma cor
- Escolha uma cor ou digite em HEX (#0071e3), RGB, HSL ou CMYK.
- Todos os formatos aparecem de uma vez. Clique em Copiar ao lado do que precisa.
- Mais abaixo há paletas, versões mais claras e escuras e um verificador de contraste para texto.
Como funciona
Todos os formatos são calculados a partir do mesmo valor RGB, então sempre batem. HSL e HSV descrevem a cor por matiz, saturação e luminosidade ou brilho, o que facilita criar harmonias: cores complementares ficam a 180° no círculo cromático, e as de tríade a 120°. Os tons claros e escuros mantêm matiz e saturação e mudam só a luminosidade.
O verificador usa a fórmula de luminância relativa da WCAG 2, a mesma das auditorias de acessibilidade.
Um exemplo resolvido
Nosso azul #0071e3 é rgb(0, 113, 227), hsl(210, 100%, 44,5%) e cerca de cmyk(100%, 50%, 0%, 11%). Sobre branco ele chega a 4,70:1 de contraste, um pouco acima dos 4,5:1 que a WCAG AA pede para texto normal.
O cinza clássico #767676 sobre branco dá 4,54:1 e passa; um passo mais claro, #777777, dá 4,48:1 e reprova. Por isso designers conferem em vez de chutar. O laranja vivo #ff9f0a sobre branco fica em 2,06:1: serve para um ícone grande, não para texto.
Quando usar
Para passar uma cor do manual da marca para valores de CSS, Android ou gráfica. Para montar uma paleta para slides, site ou logo. Para conferir se o texto de um botão é legível antes de publicar. Para achar um tom mais escuro para o hover.
Para colocar cores em um QR code, use o Gerador de QR Code. Para texto sobre imagem, o Gerador de memes tem opções de cor próprias.
Limitações
- Os valores CMYK são uma conversão matemática simples, sem perfil de impressão. Para gráfica profissional, peça o perfil à gráfica.
- As cores são sRGB. Cores de gama ampla (Display P3) são recortadas para sRGB.
- O contraste considera fundo liso; texto sobre fotos precisa de outra checagem.
Perguntas frequentes
Como converter HEX em RGB?
Separe os seis dígitos em três pares e leia cada um em hexadecimal: #0071e3 → 00, 71, e3 → 0, 113, 227. A ferramenta faz isso enquanto você digita.
Qual contraste eu preciso?
A WCAG AA pede pelo menos 4,5:1 para texto normal e 3:1 para texto grande (cerca de 24 px, ou 19 px em negrito). A AAA pede 7:1.
O valor CMYK já serve para impressão?
É um bom ponto de partida, mas a cor impressa depende do papel e da tinta. Para cores de marca, peça uma prova à gráfica.
Que formato usar no CSS?
Qualquer um funciona. HEX é o mais comum; hsl() é prático para ajustar a luminosidade à mão.