Seletor de cores HEX
Predefinições comuns
Escolha uma cor com o controle visual do navegador ou insira um valor HEX de três ou seis dígitos. O seletor converte para RGB, HSL e CMYK aproximado, depois calcula a luminância relativa e as razões exatas de contraste com branco e preto. A cor é processada neste navegador e não entra na URL das etapas.
Como escolher uma cor
-
1
Comece com uma amostra ou o controle de cor
Escolha uma cor de exemplo ou abra o seletor nativo do navegador.
-
2
Insira um HEX exato
Digite três caracteres, como #F60, ou seis, como #FF6600. O formato curto é expandido corretamente.
-
3
Revise os formatos calculados
Veja juntos HEX, RGB, HSL, CMYK estimado e luminância relativa sRGB.
-
4
Verifique o contraste e copie
Compare a cor com branco e preto e copie o valor HEX, RGB ou HSL necessário.
Notações de cor na prática
Cada modelo de cor responde a uma pergunta um pouco diferente.
Referência de notações
| Notação | Componentes | Onde se usa |
|---|---|---|
| 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 |
| CMYK | ciano %, magenta %, amarelo %, key/preto % | Impressão, pré-impressão |
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 em tempo real a razão contra branco e contra preto. Se uma cor de primeiro plano personalizada for essencial, use um verificador de contraste dedicado para cada par de cores.
Dicas
- HEX é o padrão na maioria das ferramentas de design, mas o hexadecimal curto de três dígitos (
#F60) equivale a#FF6600, não a#F06060. - HSL é mais prático para montar paletas: fixe o matiz e varie a luminosidade para criar tons claros e escuros.
- CMYK e RGB não se convertem perfeitamente, o CMYK impresso depende do perfil da gráfica. Faça sempre uma prova em papel real.
- Se você cria para CSS moderno, considere OKLCH para obter passos de luminosidade visualmente mais uniformes.
Perguntas frequentes
O Photoshop aplica um perfil de cor, geralmente sRGB para tela e muitas vezes outro perfil para impressão. Navegadores interpretam valores HEX sem perfil como sRGB. Se o documento estiver em Adobe RGB ou ProPhoto, os valores dos pixels são os mesmos, mas a cor percebida muda.
Sim, ambos descrevem vermelho puro: vermelho em 255, verde e azul em 0. HEX é apenas a notação hexadecimal de dois dígitos para cada valor de canal entre 0 e 255.
Escolha a cor principal e copie o valor HSL. No CSS ou no aplicativo de design, mantenha matiz e saturação fixos e ajuste a luminosidade. Verifique cada par de primeiro plano e fundo.
A cor atual fica por até 30 minutos nesta aba para acompanhar as etapas guiadas. Ela não é adicionada à URL nem enviada aos nossos servidores. Recomeçar, fechar a aba, limpar os dados do navegador ou esperar o prazo expirar remove a cor.
Ferramentas relacionadas
Referência da Tabela ASCII
Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.
Referência de Caracteres HTML
Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.
Conversor de Binário para ASCII
Cole binário (bytes separados por espaço ou um longo fluxo de bits) e obtenha o texto ASCII que ele representa, decodificado 8 bits por vez.
Contador de FPS
Meça o FPS do navegador com requestAnimationFrame: suavização, taxa de quadros mínima e máxima, limite de alerta e gráfico opcional. Roda localmente, sem upload nem API.
Conversor de ASCII para Hex
Converta texto ASCII em valores de byte hexadecimal. A saída usa dois dígitos hexadecimais por caractere, prontos para dumps de memória, rastreamentos de pacotes ou tabelas de firmware.
Simplificador de Álgebra Booleana
Avalie uma expressão booleana para cada combinação de entrada e veja a tabela verdade completa. Suporta até cinco variáveis e os operadores &, |, ! e ^.