Cor de marca em 2026: por que parei de definir paleta em HEX e passei a usar OKLCH

Se você me perguntar hoje em qual formato eu defino a paleta de uma marca, a resposta é OKLCH, não HEX. Escrevo a cor em OKLCH porque nesse espaço a luminosidade é perceptualmente uniforme: dois tons com o mesmo valor de luminosidade parecem de fato ter o mesmo brilho, o que me permite gerar escalas, estados e variações sem ficar corrigindo no olho. O HEX continua no meu processo, só que virou formato de compatibilidade, não de autoria.

O que mudou na cor de marca em 2026

Essa não é uma preferência estética minha, é uma mudança de plataforma que amadureceu nos últimos meses. Três fatos concretos me fizeram virar a chave de vez:

• Suporte deixou de ser desculpa. A função oklch() passou de curiosidade a padrão: em meados de 2026 o suporte global gira em torno de 90% e todos os navegadores modernos entendem o formato.
• O Tailwind CSS v4 trocou a paleta padrão inteira de rgb para oklch, e junto veio uma paleta pensada para Display P3, com cores mais vivas do que o sRGB conseguia entregar. Ou seja, o ecossistema que a maioria dos times usa já assumiu o espaço perceptual como base.
• color-mix() e a sintaxe de cor relativa viraram ferramenta de trabalho. Consigo derivar hover, foco, desabilitado e fundo a partir de um único token de marca, em vez de cadastrar doze HEX na mão.

Some a isso o fato de que quase todo cliente hoje abre o site em uma tela com gama ampla, seja um celular recente ou um notebook com painel P3. A cor da marca não vive mais em um único espaço.

Por que o HEX quebra a identidade em telas P3

O problema que mais vejo no dia a dia é este: o manual de marca traz um HEX, o time de vídeo aplica esse HEX no lower third, o time de site aplica o mesmo HEX no botão, e mesmo assim as duas coisas parecem cores diferentes na tela do cliente. Isso acontece porque o HEX descreve um ponto em sRGB e não carrega nenhuma informação sobre percepção. Quando o painel é P3, sobra gama que ninguém está usando, e quando o material passa por conversão, a diferença aparece.

Na minha experiência, o sintoma clássico é a escala de cinza da marca. Em HSL, você acha que criou cinco tons equidistantes; na tela, dois deles parecem quase iguais e um parece um buraco. Em OKLCH isso simplesmente não acontece, porque a luminosidade é confiável como número.

Como eu monto uma paleta OKLCH aqui no Studio Seu

Um matiz âncora, uma escala honesta

Começo definindo o matiz e o croma da cor principal e travo esses dois valores. Depois construo a escala variando só a luminosidade, em passos regulares. O resultado é uma escala em que o tom 500 é a versão mais saturada e on brand, e os extremos servem para fundo e texto sem sustos.

Estados derivados, não cadastrados

Hover, pressionado e desabilitado eu derivo do token principal com color-mix() ou com cor relativa. Isso me dá uma vantagem prática que vale ouro em projeto de sistema: quando o cliente muda a cor da marca, eu troco uma linha e a interface inteira acompanha, coerente.

Contraste conferido na origem

Como a luminosidade em OKLCH é previsível, eu consigo definir regras de contraste ainda na fase de paleta, e não no fim do projeto quando alguém roda um teste de acessibilidade. Aqui no Studio Seu eu costumo fixar uma faixa de luminosidade para texto sobre fundo claro e outra para texto sobre fundo escuro, e a partir dali a paleta nasce acessível.

HEX como saída, não como fonte

Eu sigo entregando HEX no manual, porque impressão, apresentação e ferramentas antigas pedem isso. Só que o HEX é gerado a partir do OKLCH, e não o contrário. A posição realista em 2026 é essa: OKLCH é o formato de autoria, HEX é o formato de compatibilidade.

O erro que eu já cometi

Vou ser honesto: no primeiro projeto em que migrei a paleta, exagerei no croma. As cores ficaram lindas no meu monitor P3 e sem graça na tela do cliente, que era sRGB. Aprendi a checar se o valor cabe na gama de destino antes de fechar o token, e a definir um fallback consciente em vez de deixar o navegador decidir por mim. Cor de marca não é o tom mais vibrante possível, é o tom que sobrevive à pior tela em que ele vai aparecer.

Perguntas frequentes

OKLCH substitui o HEX no manual de marca?

Não substitui, complementa. Eu registro os dois: OKLCH como valor de referência e HEX como equivalente para materiais impressos e ferramentas que ainda não leem o formato novo.

Preciso refazer a identidade da minha marca por causa disso?

Não. Na maioria dos casos eu converto a paleta existente para OKLCH, ajusto os degraus de luminosidade que estavam irregulares e mantenho a marca reconhecível. É afinação, não reinvenção.

Isso muda alguma coisa para quem faz vídeo?

Muda a conversa. Quando a paleta é descrita em termos de luminosidade e croma, fica bem mais fácil combinar o que sai da correção de cor com o que aparece no site, porque as duas equipes passam a falar da mesma grandeza.

Vale a pena se o site é pequeno?

Vale, e é até mais rápido. Em um site de poucas páginas, definir três tokens em OKLCH e derivar o resto leva menos tempo do que escolher quinze HEX no olho.

O que eu levo desse assunto

Cor sempre foi tratada como decisão de gosto, e em 2026 ela virou também uma decisão de sistema. Quando a paleta é escrita em um espaço que respeita a percepção humana, a marca fica consistente em tela grande, celular, vídeo e impresso, sem que ninguém precise ficar consertando tom a tom. É esse tipo de decisão silenciosa que faz um projeto parecer bem feito.

Se a sua marca tem uma paleta que nunca parece igual em dois lugares, provavelmente o problema não é o designer, é o formato em que a cor foi definida. Se quiser, me conte como está a sua paleta hoje e eu te digo o que eu faria com ela.