HEX, RGB e HSL: escolhendo um formato de cor para a web

Toda cor nessas notações é a mesma cor sRGB vestindo roupas diferentes. HEX é RGB escrito em base dezesseis: #4F46E5 são os canais vermelho, verde e azul como dois dígitos hexadecimais cada. rgb(79, 70, 229) declara os mesmos três canais em decimal, e hsl() descreve o mesmo pixel como uma posição num círculo de cores.

HEX e rgb() podem representar exatamente os mesmos canais sRGB de oito bits. hsl() também descreve a cor, mas arredondar matiz, saturação ou luminosidade pode alterar uma conversão de ida e volta.

• HEXHEX é compacto e estável para copiar e colar entre ferramentas de design e código, e é por isso que paletas e guias de estilo costumam ser publicados em hex.
• RGBRGB se lê como três intensidades de canal de 0 a 255 e corresponde a como telas e formatos de imagem realmente armazenam pixels.
• HSLHSL se lê como matiz, saturação e luminosidade — mais perto de como as pessoas descrevem cor, e muito mais fácil de ajustar por intenção.

A transparência se acopla a toda notação. rgb() e hsl() aceitam um quarto argumento — rgba(79, 70, 229, 0.5) — e o HEX ganhou uma forma de oito dígitos, #4F46E580, em que o último par é o alfa de 00 a FF.

• 0–1 ou 00–FFO alfa funcional vai de 0 a 1; no hex de oito dígitos, vai de 00 a FF. O byte 80 vale 128/255, cerca de 0,502: próximo de 0,5, mas não idêntico.
• Teste nas superfíciesUma camada translúcida é composta com o fundo conforme seu alfa; teste-a em cada superfície em que aparecerá.
• Tokens relacionadosQuando um design system entrega uma versão sólida e uma translúcida do mesmo matiz, um único hex de oito dígitos as mantém visivelmente relacionadas.

Editar canais RGB diretamente é aritmética; editar intenção é mais fácil em HSL. Um tom claro é o mesmo matiz com mais luminosidade, um tom escuro é o mesmo matiz com menos, e uma variante suave é o mesmo matiz com a saturação reduzida — três movimentos de um único controle em vez de três canais derivando juntos.

Color Shades Generator mistura uma cor hex com preto e branco e retorna de três a vinte etapas ponderadas. Elas não são perceptualmente uniformes; confira cada opção no contexto real da interface.

• Tons claros e escurosTons claros e escuros: segure matiz e saturação, varra a luminosidade de quase branco a quase preto, e você tem uma rampa utilizável para fundos, estados e texto.
• Estados de saturaçãoVariantes suaves e vívidas vêm só do controle de saturação, e é assim que estados de hover e desabilitado permanecem na mesma família.
• Rotação de matizA rotação de matiz produz cores relacionadas: vizinhos análogos ficam dentro de cerca de trinta graus, complementares a cento e oitenta de distância.

Harmonias de cor são geometria no círculo de matizes: pares complementares ficam em lados opostos, conjuntos triádicos dividem o círculo em terços, grupos análogos se agrupam. O HSL torna a matemática visível — mude um número e o esquema inteiro se move.

O Construtor de Harmonias de Cor aplica exatamente esse modelo. A partir de um hex semente de seis dígitos, ele gera paletas de cinco cores em seis esquemas clássicos — análogo, complementar, complementar dividido, triádico, tetrádico e monocromático — e verifica o contraste de cada amostra contra texto preto e branco nas metas de razão WCAG de 3, 4.5 ou 7.

O resultado pode ser exportado como propriedades CSS e JSON. Para reproduzir as cinco cores, compartilhe a cor inicial e o esquema; inclua o alvo de contraste se os mesmos rótulos de aprovação importarem.

O CSS moderno fundiu as formas funcionais antigas: canais separados por espaço com uma barra opcional para o alfa — rgb(79 70 229 / 0.5) — substituem o rgba() cheio de vírgulas. A especificação de nível 4 também adiciona notações como hwb(), lab() e oklch() para gamuts mais amplos e rampas perceptualmente uniformes.

Color Mixer aceita cores hex compatíveis, oferece interpolação que considera alfa ou composição source-over e mostra o resultado em hex e RGBA. Escolha a operação e o peso antes de comparar duas cores.

O campo aceita texto hexadecimal, não qualquer expressão CSS de cor. Converta primeiro rgb() ou hsl() para uma forma hex aceita pela ferramenta.

• Sintaxe novaCanais separados por espaço com alfa após barra são válidos em todo navegador atual; as formas com vírgula continuam suportadas como aliases legados.
• Por que OKLCHoklch() corrige uma falha real do HSL: passos iguais de luminosidade em HSL não parecem igualmente brilhantes entre matizes, enquanto o OKLCH mantém a luminosidade percebida consistente.
• Adote deliberadamenteAdote notações novas onde elas resolvem um problema — rampas consistentes, telas de gamut amplo — e mantenha hex ou rgb() onde as ferramentas e os hábitos já funcionam.

Paletas muitas vezes nascem de capturas de tela, logotipos ou fotos. Amostrar um pixel decodificado no navegador oferece uma medida útil, mas ela pode diferir dos valores codificados no arquivo original.

Image Color Picker abre PNG, JPEG ou WebP e informa o valor RGBA amostrado pelo Canvas no pixel decodificado. Esse valor pode refletir decodificação e conversão de cores; não o trate como idêntico aos bytes da origem.

Tudo roda localmente: a imagem é decodificada no seu navegador e nunca enviada, o que importa quando a arte é um design inédito. Leve o valor capturado para as ferramentas de tons ou harmonias e toda a cadeia, da arte à paleta, fica no seu dispositivo.