Por que os formatos de cor são importantes
Os formatos de cor definem como uma cor é descrita e compartilhada. HEX é muito usado em CSS. RGB é a base das telas. HSL facilita ajustes de luminosidade e saturação. HSV é frequente nos seletores de cores. CMYK é essencial para impressão.
Entender esses formatos ajuda a manter a consistência entre produto, marketing e impressão.
Códigos de cor HEX
HEX é uma forma compacta de representar RGB. Um código de 6 caracteres como #1F2937 corresponde aos canais vermelho, verde e azul. O formato de 8 caracteres #RRGGBBAA adiciona o canal alfa.
Use HEX para variáveis CSS, design tokens e configurações.
RGB e RGBA
RGB define a cor com três canais de 0 a 255. RGBA acrescenta o canal alfa para transparência. É o modelo mais direto para telas.
RGB é útil para transformações programáticas e APIs.
HSL e HSLA
HSL descreve matiz, saturação e luminosidade. Facilita criar variações consistentes ajustando apenas a luminosidade.
HSL é ótimo para temas e acessibilidade.
HSV (HSB)
HSV usa valor, ou brilho, e costuma ser mais intuitivo em seletores de cores, mas menos regular para criar escalas.
CMYK para impressão
CMYK descreve as quantidades de ciano, magenta, amarelo e preto. A conversão de RGB para CMYK pode alterar cores muito vivas.
Dicas práticas
- HEX para compacidade e CSS.
- HSL para construir tons claros e sombras.
- RGB para trabalho técnico em tela.
- CMYK para materiais de impressão.
Conversões comuns
- HEX ↔ RGB: conversão direta de canais.
- RGB ↔ HSL/HSV: útil para ajustes perceptivos.
- RGB ↔ CMYK: referência para impressão (com variações).
FAQs
HEX é a forma compacta em hexadecimal do RGB (ex. #1F2937). RGB descreve a cor pelos canais vermelho, verde e azul (ex. rgb(31, 41, 55)).
HSL facilita ajustar luminosidade e saturação mantendo o mesmo matiz, sendo ótimo para UI e contraste acessível.
HSV usa valor, ou brilho, em vez de luminosidade. É comum em seletores de cores, mas menos estável para criar escalas consistentes.
CMYK é um modelo subtrativo para impressão. Algumas cores RGB muito vivas não são reproduzidas exatamente.
O canal alfa representa a opacidade, de 0 (transparente) a 1 (opaco).