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.
Gerador de Cores Análogas
Crie uma paleta análoga de cinco cores a partir de qualquer cor base, com o trio clássico, dois tons externos e valores hex, RGB e HSL.
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.
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.
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.