Conversor de Cores

Como funcionam HEX, RGB e HSL: cores na web e contraste WCAG

O que são os modelos de cor da web

Na web e nas aplicações digitais, uma cor é sempre um triplo de componentes. Três modelos coexistem por razões diferentes:

• RGB (Red, Green, Blue): aditivo. Cada canal varia de 0 a 255 (8 bits) e representa a intensidade de vermelho, verde e azul emitida pelo pixel. É o modelo nativo dos monitores.
• HEX (#RRGGBB): notação hexadecimal compacta de RGB. Cada par de dígitos representa um canal em base 16. #FF0000 é vermelho puro (R=255, G=0, B=0).
• HSL (Hue, Saturation, Lightness): modelo intuitivo para humanos. Matiz em graus (0-360°) na roda cromática, saturação em percentagem (0-100 %) e luminosidade em percentagem (0-100 %).

O browser converte tudo internamente para RGB antes de pintar. HEX e HSL são conveniências: HEX para escrever depressa, HSL para ajustar. Compreender os três permite escolher paletas coerentes e testar contrastes.

Como se calcula

HEX ↔ RGB é conversão directa entre base 16 e base 10:

#FF3366 → R = 0xFF = 255
         G = 0x33 = 51
         B = 0x66 = 102

RGB ↔ HSL é matemático mas menos linear. Simplificadamente:

Max = max(R, G, B) / 255
Min = min(R, G, B) / 255
Lightness = (Max + Min) / 2
Saturation = (Max - Min) / (1 - |2·L - 1|)   se L ≠ 0 e ≠ 1
Hue = depende do canal máximo (0-360°)

O canal alfa (α) adiciona transparência: #FF336680 em HEX de 8 dígitos, ou rgba(255, 51, 102, 0.5) em CSS. 80 em hex = 128 decimal = 50 % transparente.

O contraste WCAG entre duas cores calcula-se pela razão de luminâncias relativas:

Contraste = (L₁ + 0,05) / (L₂ + 0,05)

onde L₁ é a luminância clara e L₂ a escura. WCAG 2.1 exige ≥ 4,5:1 para texto normal (nível AA) e ≥ 7:1 para nível AAA.

Exemplo prático

Estás em 2026 a desenhar um botão de call-to-action para um site em Portugal com o tema visual roxo #7C3AED. Precisas de verificar se o texto branco #FFFFFF sobre esse fundo cumpre WCAG AA.

• Luminância relativa de #7C3AED: aproximadamente 0,167.
• Luminância relativa de #FFFFFF: 1,0.
• Contraste: (1 + 0,05) / (0,167 + 0,05) = 4,84.

Passa AA (4,84 ≥ 4,5) mas falha AAA. Aceitável para body copy, insuficiente para requisitos de acessibilidade elevada. Se subisses para roxo mais escuro #6D28D9, o contraste passa a 5,9:1 — ainda mais seguro.

Uma variação com transparência: background: rgba(124, 58, 237, 0.9) sobre fundo branco produz uma cor efectiva próxima de #8548EA. O canal alfa mistura com o que está por baixo, complicando cálculos de contraste dinâmicos.

Em HSL, o mesmo roxo é hsl(258, 82%, 58%). Para gerar um verde complementar, roda o matiz 180°: hsl(78, 82%, 58%) = amarelo esverdeado vibrante.

Quando usar

• HEX: em código-fonte, design systems, ficheiros de configuração. Compacto, sem espaços, universalmente aceite.
• RGB / rgba(): em CSS quando precisas de canal alfa dinâmico ou animar componentes individuais.
• HSL / hsla(): quando quiseres gerar variações (mais claras, mais escuras, complementares) mantendo o matiz — ideal para design tokens e paletas responsivas.
• HWB, LCH, OKLCH (novos em CSS Color Module Level 4): representam luminância percebida uniformemente e são superiores para paletas com igual “peso visual”. Suportados em browsers modernos desde 2023.

Ferramentas de design como Figma, Sketch e Adobe XD aceitam todos os formatos; um design system consistente escolhe um e converte para os outros quando necessário.

Erros comuns

• Assumir que #FFF é sempre branco puro: em espaços de cor não-sRGB (P3, Rec.2020), o branco #FFFFFF desloca-se. Ecrãs modernos podem usar wide-gamut, mudando o resultado percebido.
• Confundir Lightness de HSL com luminância percebida: hsl(60, 100%, 50%) (amarelo) parece muito mais claro que hsl(240, 100%, 50%) (azul), embora ambos tenham L=50%. Para percepção uniforme usa LCH ou OKLCH.
• Contraste insuficiente para daltónicos: contraste WCAG assume visão típica. Cor vermelha e verde com contraste 4,5:1 pode ser ilegível para deuteranopia. Usa também variação de luminância, não só matiz.
• Ignorar o canal alfa em cálculos: um vermelho #FF0000 com opacity: 0.5 sobre branco parece cor-de-rosa, mas o navegador continua a reportar a cor original. Ferramentas de contraste devem considerar a cor efectiva pós-mistura.
• Copiar HEX sem verificar formato: #RGB (3 dígitos) é atalho para #RRGGBB — #F36 = #FF3366. Não confundir com #RGBA (4 dígitos, com alfa).
• Assumir sRGB como gamut universal: fotografias RAW e cinema DCI-P3 têm cores fora de sRGB. Uma cor hex de referência pode ser inatingível no ecrã do utilizador.

Ver também

• Conversor de cores — HEX ↔ RGB ↔ HSL com preview.
• Bases numéricas — hexadecimal em detalhe.
• Percentagem — para canais HSL e opacidades.