Ferramentas
Conversor de Cores HEX RGB HSL
Converta cores entre os formatos HEX, RGB e HSL em tempo real. Use o seletor visual ou digite o valor diretamente. Ideal para desenvolvedores e designers web.
Cada formato de cor tem seu contexto ideal no CSS
HEX, RGB e HSL representam exatamente as mesmas cores — são apenas notações diferentes para o mesmo espaço de cor sRGB. A escolha entre eles não afeta como a cor aparece na tela, mas afeta muito a manutenção do código, a legibilidade e a facilidade de criar variações programáticas de cores.
Designers e ferramentas como Figma trabalham predominantemente com HEX e RGB. Mas no código CSS, especialmente ao construir design systems com temas e paletas dinâmicas, HSL oferece uma vantagem considerável: é intuitivo criar variantes mais claras ou mais escuras de uma cor simplesmente ajustando o valor de luminosidade.
HEX: a linguagem comum entre design e desenvolvimento
O formato hexadecimal nasceu com a web e continua sendo o mais difundido. Cada par de dígitos hexadecimais (00 a FF, decimal 0 a 255) representa a intensidade de um canal de cor: vermelho, verde e azul respectivamente. #FF0000 é vermelho puro, #00FF00 é verde puro e #0000FF é azul puro. A mistura desses três primários aditivos produz todas as outras cores.
HEX é compacto (7 caracteres incluindo #) e é o formato padrão em paletas de design systems como Material Design, Tailwind e Ant Design. Ao receber especificações de cores de um designer, HEX é o formato mais provável — mas para implementar temas dinâmicos em CSS, converter para HSL frequentemente resulta em código mais fácil de manter.
RGB: controle granular dos canais de cor
O modelo RGB (Red, Green, Blue) é o modelo de cores aditivas usado em monitores.
Cada canal vai de 0 a 255, totalizando mais de 16 milhões de combinações. No CSS,
a notação rgb(255, 0, 128) ou a moderna rgb(255 0 128)
são equivalentes. Com rgba(), um quarto parâmetro de 0 a 1 controla
a transparência.
RGB é útil quando você precisa manipular canais individualmente — por exemplo, em animações que fazem a cor mudar gradualmente em JavaScript, ou ao misturar cores de forma programática. Para temas CSS, porém, HSL oferece manipulação mais intuitiva porque "tornar uma cor mais clara" simplesmente significa aumentar L, sem recalcular todos os três canais.
HSL: o modelo favorito dos desenvolvedores para temas
HSL (Hue, Saturation, Lightness) descreve cores da forma que os humanos pensam nelas: qual é a cor (matiz), quão viva ela é (saturação) e quão clara ou escura (luminosidade). Isso torna a criação de paletas coerentes muito mais intuitiva — para gerar 9 variantes de uma cor de um design system, você mantém H e S constantes e espaça L em intervalos regulares.
Com CSS custom properties, uma estratégia poderosa é armazenar apenas os componentes
HSL: --primary-h: 220; --primary-s: 70%; --primary-l: 50%;. Então você
usa hsl(var(--primary-h) var(--primary-s) var(--primary-l)) e pode mudar
a luminosidade para hover, focus e variantes disabled sem redefinir toda a cor.
Acessibilidade e contraste de cores
As diretrizes WCAG 2.1 exigem um contraste mínimo de 4.5:1 entre texto e fundo para nível AA, e 7:1 para nível AAA. O contraste é calculado com base na luminância relativa das cores, que deriva dos valores RGB. Ao escolher cores para texto e fundo, verificar o contraste é essencial — especialmente ao criar variantes mais claras com HSL, onde é fácil perder contraste sem perceber.
Uma dica prática: ao usar HSL para temas, evite L muito alto (acima de 90%) para elementos de texto e L muito baixo (abaixo de 15%) para fundos em modo claro. No modo escuro, inverta a lógica. Sempre valide o contraste com ferramentas específicas após definir sua paleta.
Perguntas frequentes
Qual a diferença entre HEX, RGB e HSL?
HEX representa a cor com 6 dígitos hexadecimais (dois para vermelho, dois para verde, dois para azul), como #FF5733. RGB usa três valores decimais de 0 a 255 para os mesmos canais, como rgb(255, 87, 51). HSL define a cor por matiz (hue, 0-360°), saturação (0-100%) e luminosidade (0-100%), como hsl(14, 100%, 60%). Os três formatos representam as mesmas cores, apenas com notações diferentes.
Quando usar cada formato de cor no CSS?
HEX é o mais comum em design systems e arquivos de design — compacto e familiar para designers. RGB é útil quando você precisa manipular canais de cor dinamicamente ou adicionar transparência com rgba(). HSL é ideal para criar variações de cores programaticamente — é intuitivo ajustar a luminosidade ou saturação de uma cor sem mudar o tom. CSS custom properties com HSL são uma estratégia popular para temas dinâmicos.
O que significa o H, S e L no HSL?
H (Hue) é o matiz — a posição no espectro de cores em graus (0° e 360° são vermelho, 120° é verde, 240° é azul). S (Saturation) é a saturação — 0% é cinza total, 100% é a cor mais vibrante. L (Lightness) é a luminosidade — 0% é preto, 100% é branco, 50% é a cor plena. Para criar uma paleta de tons de uma cor, você mantém H e S fixos e varia apenas L.
O que são as cores HEX abreviadas como #fff?
HEX de 3 dígitos é uma abreviação onde cada dígito é duplicado. #fff equivale a #ffffff (branco), #000 equivale a #000000 (preto), #f0a equivale a #ff00aa. A abreviação só funciona quando cada par de dígitos é idêntico. É amplamente suportada por todos os navegadores e é uma forma válida de reduzir tamanho em CSS.
Como as funções de cor modernas do CSS se relacionam com esses formatos?
O CSS moderno introduziu novas funções de cor: oklch() e oklab() para manipulação perceptualmente uniforme, color() para espaços de cor de ampla gama como display-p3, e lch() e lab(). A função oklch() está ganhando adoção por permitir criar paletas com luminosidade perceptualmente consistente — algo que HSL não garante. Mas HEX, RGB e HSL continuam sendo os formatos mais compatíveis e amplamente usados.
Como adicionar transparência às cores no CSS?
Para transparência, use: rgba(255, 87, 51, 0.5) para 50% de opacidade em RGB, hsla(14, 100%, 60%, 0.5) em HSL, ou HEX de 8 dígitos onde os últimos dois representam o canal alpha (#FF573380 para 50%). CSS moderno também aceita rgb() e hsl() com quatro valores separados por espaço: rgb(255 87 51 / 50%). A propriedade opacity no CSS também funciona, mas afeta o elemento inteiro incluindo seus filhos.