Sobre a ferramenta: Conversor de cores
Ferramentas de design usam HEX, o CSS usa RGB ou HSL e a gráfica trabalha com CMYK. Em qualquer campo que você digitar, os outros formatos se atualizam na hora, e dá para copiar o código CSS com transparência (alfa).
A ferramenta também calcula a taxa de contraste entre a cor do texto e a do fundo e mostra com selos AA e AAA se as diretrizes WCAG 2.1 são atendidas — a mesma referência usada pelo eMAG, o modelo de acessibilidade do governo brasileiro.
Como usar
- Toque na amostra grande no canto superior esquerdo para escolher uma cor ou digite um código em qualquer um dos campos HEX, RGB, HSL, HSV ou CMYK.
- Mova o controle de opacidade para gerar o HEX de 8 dígitos e os códigos rgba e hsla.
- Em Taxa de contraste, veja o contraste com branco, preto e uma cor de sua escolha.
- Toque em uma cor da paleta Mais claro · mais escuro para copiar o HEX ou copie todo o CSS no final.
Formatos de cor
| Formato | Exemplo | O que significa |
|---|---|---|
| HEX | #4f46e5 | Vermelho, verde e azul com dois dígitos hexadecimais cada; com 8 dígitos, os dois últimos são a opacidade |
| RGB | rgb(79, 70, 229) | Cada canal de 0 a 255 |
| HSL | hsl(243, 75%, 59%) | Matiz (0–360°), saturação e luminosidade; fácil de ajustar |
| HSV (HSB) | hsv(243, 69%, 90%) | O modelo dos seletores de cor do Photoshop e do Figma |
| CMYK | cmyk(66%, 69%, 0%, 10%) | Proporção de tintas para impressão |
Requisitos de contraste WCAG
| Nível | Texto normal | Texto grande |
|---|---|---|
| AA (mínimo) | pelo menos 4,5:1 | pelo menos 3:1 |
| AAA (reforçado) | pelo menos 7:1 | pelo menos 4,5:1 |
Texto grande é aquele com pelo menos 18 pt (cerca de 24 px) ou 14 pt em negrito (cerca de 18,66 px). Para ser acessível, o texto principal deve ter no mínimo 4,5:1. A taxa vai de 1:1 (mesma cor) a 21:1 (preto no branco).
Perguntas frequentes
Por que as cores impressas ficam diferentes da tela?
A tela mistura luz (RGB) e a impressora mistura tintas (CMYK), por isso cada uma reproduz uma faixa de cores diferente. O CMYK desta ferramenta vem da fórmula de conversão simples e será diferente do valor calculado com um perfil como o FOGRA39. Peça uma prova de cor para impressos importantes.
O que é um código HEX de 8 dígitos?
É o formato #RRGGBBAA, em que os dois últimos dígitos são a opacidade: 80 é cerca de 50%, CC é 80% e FF é 100% (opaco). Todos os navegadores atuais suportam.
Como é calculado o contraste de uma cor transparente?
Com transparência, a cor visível depende do fundo, então a ferramenta ignora a opacidade e calcula o contraste com a cor sólida.
Posso digitar o nome da cor?
Sim. Digite no campo HEX um dos 148 nomes de cor CSS, como red, navy, skyblue ou tomato.