HEX, RGB e HSL: a diferença entre formatos de cor para design responsivo
Trabalhar com cores no desenvolvimento web exige compreender os diferentes sistemas de representação e quando cada um é mais adequado. Cada formato foi projetado com um propósito: HEX para brevidade em HTML/CSS, RGB para mistura e manipulação programática, HSL para ajustes intuitivos de tonalidade e luminosidade.
Guia completo dos formatos de cor em CSS
| Formato | Sintaxe CSS | Canal Alpha? | Melhor para |
|---|---|---|---|
| HEX | #FF5733 ou #F53 | Não (ou HEXA: #FF5733FF) | Copiar de Figma/Photoshop, design systems |
| HEXA | #FF573380 (com opacidade) | Sim (últimos 2 dígitos) | Cores com transparência em notação hexadecimal |
| RGB | rgb(255, 87, 51) | Não | Manipulação programática, mistura de cores |
| RGBA | rgba(255, 87, 51, 0.5) | Sim (0 a 1) | Overlays, sombras, backgrounds transparentes |
| HSL | hsl(14, 100%, 60%) | Não | Criar variações de tom, paletas, temas dinâmicos |
| HSLA | hsla(14, 100%, 60%, 0.5) | Sim (0 a 1) | Tudo que HSL faz + transparência |
| HWB | hwb(14 0% 0%) | Não | CSS Color Level 4 — intuitivo para humanos |
| oklch | oklch(0.7 0.2 60) | Não | CSS moderno — perceptualmente uniforme |
Por que HSL é o formato ideal para criar temas e paletas
O HSL (Hue, Saturation, Lightness) é o formato mais intuitivo para quem precisa criar variações de uma cor. Para criar uma paleta de botão, por exemplo: mantenha o Hue e a Saturation constantes e ajuste apenas a Lightness. Para o estado padrão: hsl(160, 100%, 35%). Para hover: hsl(160, 100%, 30%). Para disabled: hsl(160, 30%, 60%). Impossível de fazer tão intuitivamente com HEX ou RGB.
Perguntas frequentes — Conversor de Cores
Como converter HEX para RGB manualmente?▼
Separe os pares de dígitos HEX e converta cada um de base 16 para base 10. Ex: #FF5733 → R=FF=255, G=57=87, B=33=51 → rgb(255, 87, 51). Para HEX curto (#F53): duplique cada dígito (#FF5533) antes de converter.
Qual a diferença entre RGB e sRGB?▼
sRGB (standard RGB) é o espaço de cor padrão para a web e monitores modernos, definido pela IEC 61966-2-1. O RGB simples não especifica um espaço de cor. Na prática para desenvolvimento web, considere-os equivalentes. Para trabalho fotográfico e impressão, o espaço de cor importa muito mais.
Como usar variáveis de cor CSS para temas claro/escuro?▼
Defina cores em :root como variáveis CSS: --color-primary: hsl(160, 100%, 35%); e sobrescreva em [data-theme="dark"]. O HSL facilita muito isso pois você pode criar variações semânticas: --color-primary-light: hsl(160, 100%, 45%); --color-primary-dark: hsl(160, 100%, 25%);
O que é a função color-mix() do CSS moderno?▼
Introduzida no CSS Color Level 5, color-mix() mescla duas cores: color-mix(in oklch, blue 30%, red) cria uma cor 30% azul e 70% vermelha no espaço oklch. Suportada em todos os browsers modernos desde 2023, permite criar variantes de cor sem pré-processadores como SASS.
Como escolher cores acessíveis (WCAG)?▼
O WCAG 2.1 exige contraste mínimo de 4.5:1 para texto normal e 3:1 para texto grande. Use nossa ferramenta para obter os valores RGB e calcule o contraste: (L1 + 0.05) / (L2 + 0.05), onde L é a luminância relativa calculada a partir dos componentes RGB. Ferramentas como WebAIM Contrast Checker automatizam isso.
Por que o Figma exporta cores em HEX mas às vezes em rgba()?▼
O Figma usa HEX para cores sem transparência e rgba() quando há opacidade (fill com alpha < 100%). Ao copiar de um layer com blend mode ou opacidade parcial, o Figma gera o rgba() correspondente. Para padronizar no seu CSS, use variáveis com HSL ou RGBA e configure o Figma para copiar no formato desejado.
O que é oklch e por que está se tornando padrão?▼
oklch é um espaço de cor perceptualmente uniforme baseado no modelo de percepção humana. Diferentemente do HSL (que tem inconsistências perceptuais — um amarelo com hsl(60,100%,50%) parece muito mais claro que um azul hsl(240,100%,50%) com os mesmos parâmetros), o oklch é consistente. Recomendado para novos projetos que precisam de acessibilidade e contraste previsíveis.
Como extrair a cor dominante de uma imagem com JavaScript?▼
Use o Canvas API: desenhe a imagem num canvas, use getImageData() para obter os pixels, e calcule a cor dominante com um algoritmo de clustering (k-means ou median cut). Bibliotecas como ColorThief ou Vibrant.js fazem isso de forma otimizada para paletas de imagem.
Qual o significado do # em códigos de cor HEX?▼
O # é apenas um prefixo indicador de que o valor seguinte está em hexadecimal — não tem significado matemático. Vem da notação #RRGGBB onde RR, GG e BB são pares hexadecimais (00 a FF) representando as intensidades de Vermelho, Verde e Azul.
Como gerar uma paleta de cores harmoniosamente?▼
Regras de harmonia cromática: Complementar (cores opostas no círculo cromático — alto contraste), Análogo (cores adjacentes — harmonioso e suave), Triádico (3 cores equidistantes — vibrante e balanceado), Split-complementar (um tom + dois vizinhos do oposto — menor tensão que complementar). No HSL, basta ajustar o Hue em incrementos fixos.