Cor em 2026: por que passei as paletas do Studio Seu para OKLCH e P3

Se me perguntam o que mudou de mais concreto no design digital em 2026, eu respondo sem hesitar: a forma como a cor é definida. Aqui no Studio Seu eu parei de escrever paletas em HEX e passei tudo para OKLCH, um espaço de cor perceptualmente uniforme que já roda em todos os navegadores modernos. O resultado foi direto: paletas previsíveis, modo escuro sem retrabalho, e cores de marca que aparecem com a força certa nas telas de hoje.

O que é OKLCH, e por que a cor virou infraestrutura em 2026

OKLCH descreve uma cor por três valores: luminosidade, croma e matiz. A diferença que importa está no primeiro. Em OKLCH, luminosidade de 50% parece meio-tom em qualquer matiz, seja azul, amarelo ou magenta.

Quem já montou um design system em HSL sabe exatamente o problema que isso resolve. Em HSL, um amarelo com luminosidade 50% quase cega, e um azul com a mesma luminosidade 50% sai quase preto. Mesmo número, percepções completamente diferentes. Eu perdia horas corrigindo isso na mão, escala por escala, tom por tom.

Não é teoria nova, e não é experimento. A função oklch() faz parte do CSS Color Module 4 e chegou ao Chrome e ao Edge na versão 111, ao Firefox na 113 e ao Safari desde a 15.4. Em 2026 isso é baseline: nada de flag, nada de polyfill.

Por que abandonei HEX nas paletas de marca

HEX é um endereço, não uma descrição. Um código como E6007A não me diz se a cor é clara ou escura, nem quanta saturação ela tem, nem como se compara ao tom vizinho da escala. Eu só descubro abrindo no Figma.

Com OKLCH eu leio a cor no próprio código. Quando um cliente pede "o mesmo rosa, só que mais calmo", eu baixo o croma e mantenho luminosidade e matiz. A cor continua na mesma família, só que mais contida. Em HEX, esse pedido virava tentativa e erro.

O ganho real está nas escalas

Hoje eu gero a escala inteira de uma marca variando só a luminosidade, de 10% a 95%, com croma e matiz travados. As escalas saem equilibradas de primeira. Somando a função color-mix(), disponível no Chrome e Edge 111, Firefox 113 e Safari 16.2, e a sintaxe de cor relativa, que chegou no Chrome e Edge 119, Firefox 128 e Safari 16.4, eu consigo derivar estados de hover, bordas e superfícies a partir de um único token de marca. Uma cor muda, o sistema inteiro acompanha.

P3: a cor que o HEX não alcança

Essa é a parte que mais surpreende cliente. Telas modernas exibem bem mais cor do que o sRGB, o espaço em que o HEX vive. Rosas, laranjas e verdes intensos ficavam presos numa versão lavada de si mesmos.

OKLCH resolve isso de um jeito elegante: valores que caem fora do sRGB aparecem em toda a intensidade em telas P3, e são mapeados de volta automaticamente em telas antigas. Eu escrevo uma cor só, e o navegador cuida dos dois cenários.

Na minha experiência, marcas construídas sobre magenta, ciano ou laranja saturado são as que mais ganham. Já peguei projeto em que o rosa da identidade parecia vivo no material impresso e morto no site, e a causa era exatamente essa.

Como eu aplico isso na prática

• Um token de origem por cor de marca, escrito em OKLCH, com luminosidade, croma e matiz explícitos.
• Escalas geradas por luminosidade, nunca escolhidas no olho.
• Estados derivados com color-mix(), em vez de mais um HEX solto na folha de estilo.
• Contraste verificado sempre: OKLCH ajuda muito, mas não substitui teste de acessibilidade.
• Fallback só quando o projeto exige suporte real a navegador antigo.

Onde eu ainda seguro a mão

Eu não saio convertendo tudo por esporte. Se a marca tem manual impresso, mantenho a referência Pantone e o HEX na documentação, porque gráfica e fornecedor trabalham com eles. OKLCH entra como fonte de verdade do digital, não como substituto de tudo.

E vale um aviso: croma alto demais em P3 cansa a vista em texto corrido. Eu uso cor forte em acento, botão e detalhe. Corpo de texto continua sendo contraste e legibilidade, não espetáculo.

Perguntas frequentes

OKLCH funciona em todos os navegadores?

Sim, nos navegadores modernos. Chrome e Edge desde a versão 111, Firefox desde a 113 e Safari desde a 15.4. Em 2026 é seguro usar em produção.

Preciso trocar a paleta da minha marca?

Não. As cores continuam as mesmas, muda só a forma de descrevê-las. É uma tradução, e ela costuma revelar inconsistências que já existiam.

OKLCH melhora a acessibilidade?

Ajuda bastante, porque a luminosidade passa a ser confiável entre matizes. Mas contraste ainda precisa ser medido, não presumido.

Vale a pena em um site pequeno?

Vale, e talvez mais ainda. Site pequeno costuma ter pouca gente cuidando dele. Quanto mais o sistema de cor se sustenta sozinho, menos manutenção manual você paga depois.

O que eu levo disso

Cor deixou de ser escolha de gosto e virou parte da infraestrutura do produto. Quando a paleta é descrita de um jeito que o código entende, o design para de se degradar a cada tela nova. É esse o ganho que eu vejo no dia a dia.

Se você está revendo a identidade digital da sua marca e desconfia que as cores não estão rendendo o que deveriam, me chama para conversar. Aqui no Studio Seu eu gosto de olhar esse tipo de coisa com calma, projeto por projeto.