O que é uma escala de cor?

Uma escala de cor é um conjunto ordenado de tons de um mesmo matiz, numerado por convenção de 50 a 900, construído para que os passos sejam perceptualmente uniformes e certas combinações atendam a razões de contraste conhecidas. Permite escolher cores por função e passo em vez de valores hexadecimais arbitrários.

A convenção de numeração

A maioria dos sistemas numera escalas de 50 (o mais claro) a 900 ou 950 (o mais escuro), em passos de 100. A convenção vem do Material Design e foi reforçada pelo Tailwind, e hoje é comum o bastante para valer a pena seguir.

--blue-50:  #EFF6FF
--blue-100: #DBEAFE
...
--blue-500: #3B82F6
...
--blue-900: #1E3A8A

O valor de uma convenção compartilhada é que "use blue-600 na borda" significa a mesma coisa para uma designer, um dev e um assistente de IA.

O que faz uma escala ser boa

Uniformidade perceptiva. Os passos devem parecer igualmente espaçados. Interpolar em sRGB não consegue isso: produz escalas que se amontoam no meio e ficam barrentas em certos matizes. Trabalhar num espaço perceptualmente uniforme como OKLCH dá resultados bem melhores.

Contraste previsível. Numa escala bem construída, certas combinações são confiáveis: o passo 600 ou acima sobre o passo 50 sustenta AA para texto corrido, o 500 serve para texto grande. Quando essas relações valem, as pessoas param de conferir contraste à mão nas combinações rotineiras.

Matiz consistente. Ajustar luminosidade de forma ingênua desloca o matiz nos extremos. Azuis derivam para o roxo ao escurecer; amarelos vão para o verde. Manter o matiz percebido estável ao longo da escala exige correção deliberada.

Quantos passos

Dez (de 50 a 900) é o padrão comum e serve para a maioria dos produtos. Alguns sistemas usam onze, acrescentando 950 para temas escuros que precisam de algo abaixo de 900.

Menos de sete tende a deixar buracos onde alguém precisa de um tom que não existe, que é exatamente onde a deriva começa.

Quais escalas um sistema precisa

  • Uma escala primária para a cor da marca
  • Uma escala neutra ou de cinzas, usada mais do que todas as outras somadas
  • Escalas semânticas para sucesso, aviso, erro e informação
  • Opcionalmente uma escala secundária ou de destaque

A escala neutra merece mais atenção, já que é onde a maior parte da interface de fato vive. Um leve matiz nos cinzas, quente ou frio, costuma ser o que distingue uma interface pensada de uma interface padrão.

Onde o Flash DSM entra

Sistemas gerados incluem escalas completas para cores primárias, secundárias, neutras e semânticas, produzidas num espaço perceptualmente uniforme, com variantes clara e escura e contraste conferido nas combinações.