Códigos de cor na web: HEX, RGB e HSL
No desenvolvimento web, as cores são definidas principalmente por três formatos: HEX, RGB e HSL. Esta ferramenta converte instantaneamente qualquer cor nos três formatos e mostra também o nome CSS e a cor complementar.
Códigos de cor HEX
HEX é o formato de cor mais comum na web. É escrito como #RRGGBB, com cada par indicando a intensidade de um canal (Vermelho, Verde, Azul) de 00 a FF (0–255). Com 256 valores por canal, HEX suporta 16.777.216 cores. A notação abreviada #RGB também é válida: #F06 → #FF0066.
Modelo de cor RGB
RGB reflete a estrutura física das telas. Cada canal assume valores de 0 a 255. Em CSS: rgb(255, 87, 51) ou com transparência rgba(255, 87, 51, 0.8).
Modelo de cor HSL
HSL (Matiz-Saturação-Luminosidade) é mais intuitivo para designers. Matiz: 0–360° na roda cromática. Saturação: 0%=cinza, 100%=cor viva. Luminosidade: 0%=preto, 50%=normal, 100%=branco. Criar tons claros ou escuros é simples: manter matiz e saturação, ajustar a luminosidade.
Cores complementares
As cores complementares estão a 180° na roda de cores: Vermelho ↔ Ciano, Verde ↔ Magenta, Azul ↔ Amarelo. Criam o máximo contraste e são usadas em botões CTA e visualizações de dados.
Acessibilidade web (WCAG)
Cerca de 8% dos homens têm daltonismo. WCAG 2.1 AA exige uma relação de contraste de pelo menos 4,5:1 para texto normal. Nunca transmita informação apenas por cor.
Cores CSS nomeadas
CSS define 148 cores nomeadas (red, navy, coral, teal, etc.). Esta ferramenta as reconhece automaticamente e exibe o nome.
Privacidade
Todos os cálculos são realizados localmente no seu navegador. Nenhum dado é enviado para servidores.
Verificação prática do resultado
Conversor de cores deve ser tratado como um gerador de trabalho: ajuste os parâmetros, confira a prévia e copie apenas o resultado que atende ao formato necessário. A ferramenta cobre HEX, RGB, HSL e nomes CSS; ajuda a comparar tons e copiar valores para folhas de estilo. Em códigos, cores, hashes, identificadores, senhas, JSON, QR ou códigos de barras, anote também as configurações usadas. Isso facilita repetir o processo, revisar uma decisão de design ou explicar a origem do resultado para outra pessoa da equipe.
A maior parte das operações acontece no navegador depois que a página é carregada, o que torna o uso rápido e sem conta. Mesmo assim, evite colar segredos de produção, senhas reais, chaves de API ou dados pessoais se você não tiver certeza de como o conteúdo será armazenado depois da cópia. Antes de usar em produção, teste no destino correto: CSS no componente real, JSON no parser da aplicação, QR ou código de barras em um leitor, senha em um gerenciador seguro. Essa verificação evita problemas de compatibilidade, caracteres especiais e quebras de formato.
Comentários