Formatos de Cor Explicados: HEX, RGB, HSL e CMYK para Designers e Devs

Resumo Executivo: Escolher o formato de cor correto facilita a criação de temas claros/escuros, paletas acessíveis e garante que o design digital corresponda exatamente à impressão final.

Os Principais Formatos de Cor no Desenvolvimento Web

No ecossistema digital, as cores são representadas por modelos matemáticos específicos. Vamos entender cada um deles:

1. HEX (Hexadecimal)

O formato HEX é uma notação de 6 dígitos precedida por uma tralha (#). Ele representa a intensidade das canais Red (Vermelho), Green (Verde) e Blue (Azul) em base 16 (0-9 e A-F).

* Sintaxe: #RRGGBB

* Exemplo: #3B82F6 (Azul primário do Tailwind)

* 3B (59 em decimal) de Vermelho

* 82 (130 em decimal) de Verde

* F6 (246 em decimal) de Azul

2. RGB e RGBA

O modelo RGB utiliza valores decimais diretos de 0 a 255 para cada um dos três canais de luz primários. O canal Alpha (RGBA) adiciona o controle de opacidade (transparência de 0.0 a 1.0).

/* Exemplo de cor sólida */
color: rgb(59, 130, 246);

/* Exemplo com 50% de transparência */
background-color: rgba(59, 130, 246, 0.5);

3. HSL (Hue, Saturation, Lightness): O Favorito dos Design Systems

O modelo HSL é muito mais intuitivo para humanos do que o HEX ou RGB:

* Hue (Matiz): Um ângulo de 0° a 360° na roda de cores (0° Vermelho, 120° Verde, 240° Azul).

* Saturation (Saturação): Percentual de pureza da cor (0% cinza, 100% cor pura).

* Lightness (Luminosidade): Percentual de iluminação (0% preto total, 50% cor normal, 100% branco total).

Tabela de Comparação de Formatos

Converta suas paletas de cores instantaneamente utilizando nosso Gerador e Conversor de Cores.