Softonic

Seletor de cores HEX

Etapa 1 / 4 Cor hexadecimal

Escolher cor

Predefinições comuns
Avançar: prévia

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. 1

    Comece com uma amostra ou o controle de cor

    Escolha uma cor de exemplo ou abra o seletor nativo do navegador.

  2. 2

    Insira um HEX exato

    Digite três caracteres, como #F60, ou seis, como #FF6600. O formato curto é expandido corretamente.

  3. 3

    Revise os formatos calculados

    Veja juntos HEX, RGB, HSL, CMYK estimado e luminância relativa sRGB.

  4. 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

Gerador de Cartão CSS

Crie o CSS de um contêiner de cartão: fundo, borda, raio dos cantos, espaçamento interno e sombra suave, com pré-visualização imediata e código para copiar e colar.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Conversor de base numérica

Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.

Gerador de README

Gere um README.md estruturado a partir de alguns campos: nome do projeto, tagline, recursos, comando de instalação, trecho de início rápido, autor e licença. Cole direto no seu repositório.

Visualizador de Markdown

Escreva Markdown e veja a renderização HTML atualizar ao vivo. Sintaxe com estilo GitHub, incluindo tabelas, listas de tarefas, blocos de código cercados e autolinks.

Ferramenta disponível em outros idiomas