Por que os formatos de cores são importantes
A cor parece simples na superfície: você vê, escolhe, usa. Mas o trabalho de design profissional enfrenta constantemente um problema frustrante: a mesma cor tem representações diferentes dependendo de onde você a usa, e escolher o formato errado torna seu fluxo de trabalho mais difícil do que deveria ser.
HEX: o padrão da web
Códigos de cores hexadecimais como#667eeasão o formato mais comum no desenvolvimento web. Eles codificam valores vermelhos, verdes e azuis (0–255) como números hexadecimais de dois dígitos concatenados em uma sequência de seis caracteres. O formato é compacto, facilmente copiável e universalmente compatível com CSS, HTML e ferramentas de design.
Quando todos os três pares são dígitos idênticos, o código pode ser abreviado:#fffffftorna-se#fff. Esta abreviatura funciona em todos os principais navegadores e pré-processadores.
RGB: Transparência e Controle Programático
RGB (e sua variante RGBA) se torna o formato preferido quando você precisa de transparência ou quando calcula cores programaticamente.rgb(102, 126, 234, 0,5)dá à sua cor 50% de opacidade - impossível de expressar diretamente em HEX (embora HEX suporte um formato de 8 caracteres como#667eea80que poucos desenvolvedores conhecem).
HSL: a arma secreta do Palette Builder
HSL (matiz, saturação, luminosidade) é o maislegível por humanosformato de cor. Matiz é um ângulo (0–360°) na roda de cores. Saturação é o quão viva a cor é. Leveza é quão claro ou escuro.
Isso torna a criação de paletas trivialmente fácil. Para criar 10 tons do mesmo matiz para um sistema de design:
- Mantenha H e S iguais
- Defina L para: 10, 20, 30, 40, 50, 60, 70, 80, 90, 95
- Agora você tem uma escala de cores completa de 10 etapas
Acessibilidade: taxas de contraste
Os padrões de acessibilidade WCAG 2.1 AA exigem uma taxa de contraste de 4,5:1 entre o texto e seu plano de fundo para texto de tamanho normal e 3:1 para texto grande. Antes de finalizar qualquer combinação de cores em sua IU, teste a taxa de contraste. As falhas nas taxas de contraste são uma das violações de acessibilidade mais comuns em web design.
| Padrão | Texto normal | Texto grande (18pt+) |
|---|---|---|
| WCAG AA | 4.5:1 | 3:1 |
| WCAG AAA | 7:1 | 4.5:1 |
Por que as cores parecem diferentes na impressão e na tela?
As telas usam o modelo RGB (luz aditiva). As impressoras usam CMYK (tinta subtrativa). A mesma cor HEX pode parecer visivelmente diferente quando impressa. Para trabalhos com cores com impressão precisa, converta para CMYK em uma ferramenta profissional como Adobe Illustrator ou InDesign.
O que uma ferramenta conta-gotas realmente faz?
O conta-gotas usa a API EyeDropper do seu navegador para obter amostras de cores de pixels de qualquer lugar da tela, não apenas da janela do navegador. Ele lê os valores RGB exatos de qualquer pixel e os converte instantaneamente para todos os três formatos.