Como a escala é montada

A maioria dos geradores de escala interpola luminosidade em HSL. Funciona até você olhar as pontas: a matiz escorrega e a saturação desaba, e aí o 50 e o 950 deixam de parecer da mesma cor que você digitou.

O Atomic Colors compõe em vez de interpolar. Cada passo é a sua cor base sobre branco ou preto, com opacidade decrescente — a mesma coisa que a sua ferramenta de design faz quando você baixa a opacidade de uma camada.

A escala, literalmente

Nesta parte não há ajuste de curva nem conversão de espaço de cor. A escala padrão tem onze passos, e cada um é uma única composição alfa — o que você vê abaixo é a saída real do motor para um azul:

8%50
24%100
40%200
56%300
80%400
100%500sua cor
80%600
56%700
40%800
24%900
8%950
Cada passo é a base sobre branco ou preto, na opacidade indicada.#3b82f6

A composição alfa move a cor em linha reta na direção do branco ou do preto dentro do espaço RGB, então a escala inteira fica na mesma família de matiz. E como o 500 volta sem nenhuma alteração, o hex que você digitou está sempre na escala — o que parece óbvio até você conferir outros geradores e descobrir que não é.

A escala é configurável. Se 8% deixa o seu 50 claro demais, ou se os tons médios se amontoam numa cor tão escura quanto um azul-marinho, dá para mover cada parada — e o export acompanha.

O que a composição custa

Compor na direção do branco e do preto puros é previsível, mas não é perceptualmente uniforme. Duas cores com a mesma opacidade nominal não são lidas como igualmente claras se uma for amarela e a outra azul — o amarelo já parte de muito mais luminância.

A troca é deliberada: você ganha uma escala que nunca sai da família de matiz e sempre contém o seu hex exato, em troca de passos que não são perfeitamente regulares em claridade percebida. Se o seu design system precisa mais de passos perceptualmente uniformes do que do hex original, um gerador baseado em LCH serve melhor.

Depois vêm as cores semânticas

A escala é a metade fácil. O problema difícil é propor cores de success, warning, error, info, discovery e neutral que funcionem ao lado da sua cor de marca e continuem distinguíveis para quem não enxerga cor do mesmo jeito que você.

Elas não saem de uma lista fixa. São derivadas da sua base, ancoradas na família de matiz a que cada significado pertence, e então ranqueadas por quanto se mantêm distantes sob simulação de daltonismo. Uma candidata que parece ótima na visão tricromática mas colide sob deuteranopia é descartada.

O limiar é uma distância CIEDE2000 de 11, medida contra todas as cores já reservadas — inclusive a sua. Se você quer o raciocínio por trás desse número e do resto do motor, a página de metodologia destrincha.

Testar com a sua cor