No CSS, a mesma cor pode ser escrita de pelo menos três formas diferentes, e cada uma é conveniente para uma tarefa diferente, do design à animação de transparência.
HEX: uma notação compacta para copiar e colar
A notação hexadecimal como #FF5733 codifica os três canais — vermelho, verde, azul — com dois caracteres cada. É o formato mais compacto, conveniente para copiar de mockups de design, mas quase ilegível para um humano: é difícil saber de relance qual tom uma sequência de dígitos representa.
RGB: acesso direto a cada canal
rgb(255, 87, 51) escreve esses mesmos três canais como números decimais de 0 a 255. Isso é útil quando é preciso mudar um canal específico via código, por exemplo aumentar gradualmente o vermelho em uma animação JavaScript.
HSL: seleção intuitiva de tom
HSL descreve uma cor através da matiz (hue, 0–360°), saturação e luminosidade. É o formato mais conveniente para escolher uma cor à mão: para obter uma versão mais escura da mesma matiz, basta reduzir apenas a luminosidade, sem recalcular os três canais RGB do zero.
O canal alfa para transparência
Os formatos rgba() e hsla() adicionam um quarto parâmetro: opacidade, de 0 a 1. O CSS moderno também permite definir transparência em HEX por meio de dois caracteres extras no final, como #FF573380.
Para que serve
- Converter rapidamente uma cor de um mockup de design para o formato CSS necessário.
- Escolher uma versão mais escura ou mais clara da mesma cor usando HSL.
- Adicionar transparência a uma cor sem mudar sua matiz base.
A paleta "web safe" de 216 cores que moldou a web antiga
Antes de monitores conseguirem exibir milhões de cores, navegadores dos anos 1990 rodavam frequentemente em telas de 8 bits, capazes de mostrar só 256 cores simultâneas — e o sistema operacional já reservava várias delas para ícones e janelas. Para evitar que fotos e fundos aparecessem cheios de manchas (dithering) em telas mais fracas, surgiu a paleta "web safe", com 216 cores formadas apenas por combinações de seis valores por canal (00, 33, 66, 99, CC, FF) — por isso HEX como #3399CC ou #CC6600 ainda hoje "parecem familiares" a quem trabalhou com web design nessa época. Hoje, com telas de 24 bits (16,7 milhões de cores) sendo o padrão absoluto, essa restrição praticamente desapareceu, mas o hábito de usar HEX com dois dígitos repetidos por canal continua presente em muitas paletas de design mais antigas.