HEX vs RGB vs HSL — Guia Completo de Formatos de Cor para Web Design

As cores são a base do design visual. Seja construindo um site, projetando um aplicativo móvel ou criando arte digital, você encontrará diferentes formatos de cor constantemente. Os três formatos mais comuns na web são HEX, RGB e HSL. Cada formato representa as mesmas cores de uma forma diferente. A escolha depende do seu fluxo de trabalho, suas ferramentas e o que você está tentando alcançar.

HEX (hexadecimal) é o formato de cor mais reconhecido na web. Usa um código de seis caracteres precedido por um símbolo de hash, como #FF0000 para vermelho, #00FF00 para verde e #0000FF para azul. O intervalo de valores para cada canal vai de 00 (0 em decimal) a FF (255 em decimal). HEX é a escolha padrão para a maioria dos desenvolvedores web porque é compacto, universalmente suportado e fácil de copiar e colar de ferramentas de design.

RGB significa Red (Vermelho), Green (Verde), Blue (Azul). No CSS, é escrito como rgb(255, 0, 0) para vermelho puro. Cada valor varia de 0 a 255. RGB é baseado no modelo de cor aditiva. Quando todos os três canais estão no máximo, você obtém branco. Quando todos estão em zero, obtém preto. RGB também suporta transparência: rgba(255, 0, 0, 0.5) cria um vermelho semitransparente.

HSL significa Hue (Matiz), Saturation (Saturação) e Lightness (Luminosidade). É escrito como hsl(0, 100%, 50%) para vermelho puro. O matiz é um grau na roda de cores de 0 a 360. A saturação vai de 0% a 100%. A luminosidade vai de 0% (preto) a 100% (branco). HSL é o formato mais intuitivo para humanos. Quer um tom mais escuro? Diminua a luminosidade. Quer um tom mais suave? Reduza a saturação. Muitos designers preferem HSL pela facilidade de criar paletas harmoniosas.

Os três formatos podem representar os mesmos 16,7 milhões de cores. A diferença está na legibilidade e no fluxo de trabalho. HEX é compacto e universal, mas difícil de ler. RGB corresponde ao funcionamento das telas. HSL é o mais amigável para humanos — olhando hsl(210, 60%, 55%), você sabe que é um azul moderado.

Use HEX para CSS compacto e padrão. Use RGB quando precisar de transparência ou manipulação programática de cores. Use HSL para sistemas de design, temas e variações de cor dinâmicas.

Você não precisa memorizar fórmulas de conversão. Nossa ferramenta de Seletor de Cores permite selecionar qualquer cor e ver instantaneamente seus valores em HEX, RGB, HSL, CMYK e mais. Experimente nossas ferramentas de cores gratuitas.