Conversores de cores: HEX, RGB, RGBA, HSL, HSV, alpha e acessibilidade
HEX, RGB, HSL e HSV são formas diferentes de representar cor. HEX para RGB pode ser exato no mesmo espaço; RGBA para HEX exige decidir o que fazer com alpha.
HEX e RGB normalmente descrevem os mesmos canais
#RRGGBB representa três canais RGB de 8 bits em hexadecimal. HEX para RGB muda a notação.
#369 expande para #336699, mas valores RGB precisam do contexto do espaço de cor.
Alpha é transparência
RGBA adiciona alpha e a cor visível depende do fundo. HEX para RGBA não prevê o resultado final sem esse fundo.
#RRGGBBAA preserva alpha; em RGBA para HEX confirme se o conversor mantém oito dígitos.
HSL é intuitivo, não uniforme
HSL facilita ajustar hue, saturação e lightness. HEX para HSL ajuda em variações.
Lightness igual não significa brilho visual igual entre cores.
HSV usa outra geometria
HSV usa Value e é comum em seletores. HEX para HSV ajuda entre aplicações.
HSL e HSV não são equivalentes.
Arredondamento
Arredondar cedo pode alterar alguns canais num round-trip. Preserve maior precisão.
Alpha também sofre quantização entre frações e 8 bits.
Wide gamut
CSS Color 4 inclui espaços como display-p3. Converter para HEX sRGB pode cortar cores.
Verifique perfil e espaço em gráficos profissionais.
Contraste
WCAG usa luminância relativa, não HSL lightness. Teste foreground e background reais.
Não utilize apenas cor para transmitir informação essencial.
Design systems
Mantenha uma fonte canónica e gere variantes. Documente alpha e espaço.
RGB para HEX automatiza sintaxe, não decisões de acessibilidade.
Workflow
Identifique espaço, converta com precisão, trate alpha conscientemente e teste na aplicação final.
Depois execute testes de contraste para UI.
Perguntas frequentes
HEX é mais preciso que RGB?
Não.
RGBA define a cor final?
Não sem o fundo.
HSL e HSV são iguais?
Não.
Conversão correta garante acessibilidade?
Não; contraste deve ser testado.
Normas de cor e acessibilidade
- W3C — CSS Color Module Level 4
- W3C Web Accessibility Initiative — Understanding Contrast Minimum
- W3C Web Accessibility Initiative — Use of Color
- U.S. Web Design System — Color
This article is an original practical guide informed by the standards and official references above.