Depois Do Hexa Vem O Quê

Depois do hexa vem o quê

A gente passa anos trabalhando com #RRGGBB e acha que é o padrão final. Eu passei uns seis anos só mexendo com hex na tela do Photoshop, depois migrei pra SVG, depois pra print. O problema é que o hex tem limitações que a maioria não percebe até receber um arquivo que não abre direito. Na prática, depois do hex veio o hsl(), o lab(), o oklch(). Cada um com seu motivo. O hsl resolve o problema de luminosidade controlada — você pensa em tom, saturação e brilho separadamente, não em valores RGB empilhados. O CSS moderno já aceita isso nativamente desde 2020. Eu já perdi duas horas num projeto porque o cliente enviou um layout em #E8F4FD e eu precisava achatar aquilo num tom mais escuro sem perder a saturação. Se eu tivesse usado hsl desde o início, seria um ajuste de um minuto. O CSS Color Level 4 introduziu function notation. Dá pra escrever rgb(255 120 80 / 0.7) ou hsl(20 80% 60%). O slash é opcional em navegadores modernos. O CSS Color Level 5 trouxe o color() para espaços arbitrários. O lab() e o lch() são perceptualmente uniformes — distâncias iguais no espaço de cor correspondem a percepções iguais pelo olho humano. Isso não acontece com hex ou RGB.

Por que o hex continua sendo usado

Porque ele é curto, legível, funciona em todo lugar. Um #FF5733 cabe numa linha de CSS sem complicação. Mas o hex não tem canal alfa nativo — precisa usar #RRGGBBAA (8 casas) ou misturar com opacity. E não dá pra manipular luminosidade de forma intuitiva. Você quer um cinza mais claro? Tem que calcular manualmente quanto tirar de cada canal. O oklch() resolve isso. É o novo padrão do W3C (2022). Usa o espaço de cor oklab, que é perceptualmente uniforme como o lab, mas com gamute mais previsível. A diferença prática: com oklch você consegue criar paletas onde todos os tons têm a mesma luminosidade percebida, o que é impossível com hex. Eu usei oklch num dashboard pra garantir acessibilidade WCAG AA sem precisar de ferramentas de contraste. A conta direto daria uns 40 minutos de teste; com oklch ficou 10.

Quando usar cada formato

Se você tá fazendo design responsivo, hsl() é o mais produtivo. Troca de tom é um clique. Se precisa de precisão impressa, lab() ou oklch(). Se o código precisa rodar num navegador de 2018, hex ainda é a escolha segura. O oklch não funciona no IE — óbvio, mas vale lembrar. Uma limitação do oklch que ninguém conta: ele depende de color-gamut media queries pra fallback. Num monitor sRGB, valores P3 ou Rec.2020 ficam clipados. Eu tinha um gradiente em oklch que ficava esbarrado num iPhone 8 — resolvi com @media (color-gamut: p3) e fallback pra hsl. O tempo de desenvolvimentotriplicou por causa disso, então avalie antes de adotar.

Migração prática

Se você quer migrar de hex, não tente converter tudo de uma vez. Comece pelos componentes que mais precisam de ajuste fino — botões, badges, estados hover. Ferramentas como colormixer ou chroma.js facilitam a conversão. Ochroma.js converte hex pra HSL com uma linha: chroma('#FF5733').hsl(). Se você vai pro oklch, use o color-convert do npm ou a API css-color-4. Mas tenhafallback — nem todo consumidor de cor suporta function notation. Um site de e-commerce que migrei inteiro pra oklchteve 12% de queixas de clientes com navegadores antigos. O workaround foi usar postcss-color-modern com autoprefixer. O build demorou 3 segundos a mais, mas resolveu.

O futuro

Além do oklch, tá saindo o display-p3 como padrão em novas telas. Apple já usa há anos. O Rec.2020 pra vídeo. O JSC (Japanese Standard Color) que tenta padronizar pra mercados asiáticos. Nada disso substitui o hex completamente — ele continua sendo o lingua franca do design web. Mas pra trabalho profissional, saber o que vem depois do hexa é o que separa um designer que improvisa de um que escolhe. Eu pessoalmente parei de usar hex puro em 2023. Só uso quando o cliente pede. Meu fluxo atual: concebo em oklch, exporto pra hsl pra compatibilidade, e gero hex só pros ícones SVG que precisam de valor fixo. O tempo de iteraçãocaiu de 2 horas por sprint pra 20 minutos. Não é mágica — é só escolher a ferramenta certa pra o trabalho.