Seletor de Cores HEX
Designers e desenvolvedores lidam com a mesma cor em quatro notações centenas de vezes por dia. Clique em qualquer lugar no campo 2D de saturação/valor, arraste o controle deslizante de matiz ou cole um valor, e este seletor mostra HEX, RGB, HSL, HSV e CMYK lado a lado — com verificações de contraste WCAG contra preto e branco para que você saiba imediatamente se a cor é legível.
Como escolher uma cor
-
1
Escolha uma matiz
Arraste o controle deslizante de matiz vertical através do espectro completo de 0-360°.
-
2
Escolha saturação e valor
Clique ou arraste dentro do quadrado 2D para definir quão vívida e quão brilhante a cor é.
-
3
Ajuste com os inputs
Digite valores exatos em HEX, RGB, HSL, HSV ou CMYK — todos os cinco campos permanecem sincronizados.
-
4
Verifique a acessibilidade e copie
As razões de contraste contra preto e branco aparecem inline; um clique copia a notação que você precisa.
Notações de cor na prática
Cada modelo de cor responde a uma pergunta ligeiramente diferente.
Referência de notação
| Notação | Componentes | Onde é usado |
|---|---|---|
| HEX | #RRGGBB | CSS, ferramentas de design, guias de marca |
| RGB | vermelho 0-255, verde 0-255, azul 0-255 | CSS rgb(), editores de imagem |
| HSL | matiz 0-360°, saturação %, luminosidade % | CSS hsl(), sistemas de design |
| HSV/HSB | matiz 0-360°, saturação %, valor/brilho % | Photoshop, seletores de cor do Figma |
| CMYK | ciano %, magenta %, amarelo %, chave/preto % | Impressão, pré-impressão |
| OKLCH | luminosidade %, croma, matiz | Paletas do Módulo de Cor CSS Moderno 4 |
Contraste de acessibilidade
WCAG 2.2 define razões mínimas de contraste entre texto e fundo:
- AA para texto normal: ≥ 4.5:1
- AA para texto grande (18 pt ou 14 pt em negrito): ≥ 3:1
- AAA para texto normal: ≥ 7:1
O seletor calcula a razão contra branco e contra preto em tempo real. Se uma cor de primeiro plano personalizada for crítica, use um verificador de contraste dedicado para cada par.
Dicas
- HEX é o padrão na maioria das ferramentas de design, mas o hex curto de três dígitos (
#F60) é equivalente a#FF6600, não#F06060. - HSL é mais amigável para construir paletas: bloqueie a matiz, varie a luminosidade para tons e sombras.
- CMYK e RGB não podem ser perfeitamente convertidos — a impressão em CMYK depende do perfil da impressora. Sempre faça prova de impressão em papel real.
- Se você projeta para CSS moderno, considere OKLCH para passos de luminosidade perceptivamente uniformes.
Perguntas frequentes
O Photoshop aplica um perfil de cor (geralmente sRGB para tela, muitas vezes diferente para impressão). Os navegadores renderizam HEX não etiquetado como sRGB. Se seu documento estiver configurado para Adobe RGB ou ProPhoto, os valores de pixel são os mesmos, mas a cor percebida muda.
Sim — ambos descrevem vermelho total, com vermelho em 255 e verde e azul em 0. HEX é apenas uma notação hexadecimal de dois dígitos para cada valor de canal de 0-255.
Escolha sua cor primária, mude para HSL e, em seguida, varie a luminosidade em passos de 10% enquanto mantém a matiz e a saturação bloqueadas. Você obtém uma escada coerente de tons e sombras que estão na mesma matiz.
As cores usadas recentemente são mantidas no armazenamento local do seu navegador, para que sobrevivam a uma atualização. Nada é enviado para um servidor, e você pode limpar o histórico da paleta a qualquer momento.