Bhinish Dhiman
Como transformar uma cor da marca em design tokens, de 50 a 950
Traduzido do original em inglês. Ler o original
Digite a cor da marca no gerador de escalas e dê um nome de token à escala. Ele monta onze níveis, de 50 a 950, em metas fixas de luminosidade OKLCH, usando o matiz e o croma da sua cor, e depois mede cada nível contra o branco e o preto para escolher as funções de texto, texto grande, borda e superfície em cada tema. Copy roles entrega essas funções como propriedades personalizadas de CSS, com um bloco para o tema escuro; o painel de código entrega os níveis puros.
O método por trás de uma escala de tokens (manter o matiz, percorrer a luminosidade e atribuir funções aos níveis por medição) está explicado em Como criar uma paleta acessível a partir de uma única cor da marca. Este guia é a metade mecânica: o que o gerador de escalas e tokens faz com o hex que você fornece, onde o resultado costuma surpreender e como tirar dele dois tipos de token sem misturá-los.
Um design token é um valor nomeado que os componentes referenciam no lugar de uma cor crua. A ferramenta entrega dois tipos. Um token de nível, como --brand-600, nomeia uma posição na escala. Um token de função, como --brand-text, nomeia uma tarefa e, em cada tema, aponta para o nível que cumpre essa tarefa.
Montando a escala e as funções
- Digite a cor da marca. Escreva-a no campo “Brand colour” (cor da marca) ou use a amostra ao lado. O campo aceita um código hex e também valores rgb(), hsl() ou oklch().
- Dê nome à escala. “Token name” (nome do token) começa como brand. O nome é convertido para minúsculas, e tudo o que não for letra, dígito ou hífen vira hífen, então “Ocean Blue” gera
--ocean-blue-500. - Leia a faixa. São onze amostras, de 50 a 950. A marcada como “yours” (a sua) é o nível cuja luminosidade-alvo está mais perto da luminosidade da sua cor.
- Leia os cartões Light theme e Dark theme (tema claro e tema escuro). Cada um lista quatro funções, com o nível escolhido, para que serve a função e a taxa de contraste medida.
- Clique em Copy roles na barra inferior. Isso copia os tokens de função dos dois temas como propriedades personalizadas de CSS.
- Copie os níveis no painel de código. Escolha CSS, Tailwind ou JSON acima dele e clique em Copy.
- Clique em Share se alguém do desenvolvimento precisar da mesma escala. O link leva a cor e o nome do token, então reconstrói exatamente esta escala.
As onze metas são fixas
A ferramenta tira só duas coisas da sua cor: o matiz e o croma. A luminosidade vem de uma tabela fixa, igual para todas as marcas, e o croma é ajustado em cada nível para que as pontas clara e escura continuem exibíveis. Onde um nível ainda não consegue manter esse croma na tela, ele é reduzido mais um pouco, sem mexer no matiz nem na luminosidade.
| Nível | Luminosidade OKLCH | Parcela do seu croma |
|---|---|---|
| 50 | 0.972 | 14% |
| 100 | 0.938 | 26% |
| 200 | 0.878 | 46% |
| 300 | 0.800 | 68% |
| 400 | 0.702 | 88% |
| 500 | 0.608 | 100% |
| 600 | 0.524 | 96% |
| 700 | 0.442 | 84% |
| 800 | 0.362 | 68% |
| 900 | 0.286 | 50% |
| 950 | 0.212 | 36% |
O espaçamento não é uniforme. Ele é mais apertado na ponta clara, onde 0.034 separa o 50 do 100, contra 0.098 entre o 300 e o 400, então os tons mais claros ficam bem mais próximos entre si do que os tons médios.
O seu hex exato não está na escala
Esta é a surpresa. Como a luminosidade vem da tabela, a sua cor só aparece na escala se a luminosidade dela coincidir com uma meta. Caso contrário, o nível marcado como “yours” é um vizinho construído na luminosidade-alvo, muitas vezes com outra parcela do seu croma.
A ferramenta abre com #2563eb, que tem luminosidade OKLCH de 54.6%. A meta mais próxima é a do 600, em 0.524 (a 0.022 de distância, contra 0.062 do 500), então o 600 fica marcado como “yours” e o botão da barra mostra “Base is 600” (a base é 600). Esse nível é construído em 0.524 com 96% do croma, então fica perto de #2563eb, mas não é #2563eb.
Clicar nesse botão substitui a cor que você digitou pelo valor que a escala calculou para esse nível. Faça isso só se a intenção for adotar a versão da escala como cor da marca. Se o hex da marca precisa aparecer exato no código, mantenha-o como um token próprio ao lado da escala, em vez de editar um nível.
Como uma função escolhe o nível
Cada função tem um requisito, e a ferramenta percorre a escala a partir da ponta da superfície até que um nível o cumpra. No cartão claro, o percurso começa no 50 e segue em direção ao 950, medindo cada nível contra o branco; no cartão escuro, começa no 950 e segue em direção ao 50, medindo contra o preto. O primeiro nível que passa é o escolhido, ou seja, o nível menos extremo que ainda atende.
| Função | Para que serve, segundo a ferramenta | Exige | Tema claro | Tema escuro |
|---|---|---|---|---|
| text | Texto corrido sobre o fundo da página | 4.5:1 | Primeiro nível a partir do 50 que atinge isso sobre branco | Primeiro nível a partir do 950 que atinge isso sobre preto |
| text-large | Títulos de 24px ou mais | 3:1 | Igual ao de cima, com 3:1 | Igual ao de cima, com 3:1 |
| border | Bordas de campos e outros controles que precisam ser localizados | 3:1 | Igual ao de cima, com 3:1 | Igual ao de cima, com 3:1 |
| surface | Blocos de fundo tingidos | Nada | Nível 50 | Nível 950 |
Daí decorrem duas coisas. Text-large e border têm o mesmo limite e a mesma busca, então sempre caem no mesmo nível. E a função de borda cai num nível mais escuro do que muita gente espera. Numa escala neutra, em que a luminosidade OKLCH é a raiz cúbica da luminância relativa, o nível 500 dá 1.05 ÷ (0.608³ + 0.05) ≈ 3.8:1 sobre branco, e o nível 400 dá 1.05 ÷ (0.702³ + 0.05) ≈ 2.7:1. Então uma borda que mostra onde está um campo, e por isso precisa de 3:1, fica no 500 ou mais escuro sobre branco. Um divisor puramente decorativo não tem requisito e pode ser tão claro quanto você quiser.
Se nenhum nível de uma escala atingisse a taxa exigida por uma função, Copy roles escreveria essa linha como um comentário avisando disso, em vez de omitir a função sem dizer nada.
Ligando os tokens de função aos tokens de nível
Copy roles escreve valores hex: um bloco :root para o tema claro e um segundo bloco dentro de uma media query prefers-color-scheme: dark. O painel de código escreve os tokens de nível: CSS gera de --brand-50 a --brand-950, Tailwind gera um objeto colors em hex para uma configuração em JavaScript, e JSON aninha os onze níveis sob o nome do token.
Para manter os dois sincronizados quando a cor da marca mudar, cole os tokens de nível e depois aponte cada função para o nível indicado no cartão, em vez de para um hex copiado:
:root {
--brand-text: var(--brand-600); /* the step the Light theme card chose */
}Se o seu site troca de tema com uma classe ou um atributo, e não pela configuração do sistema, mova o bloco escuro para esse seletor.
Para os níveis, use o painel de código, e não o botão Export da barra inferior. Export é compartilhado entre as ferramentas de cor e nomeia as cores pela posição, de brand-1 a brand-11, não pelo nível.
Outras formas de fazer isso
Não há um método nativo no macOS, no Windows nem no iPhone para montar uma escala de tokens, nem uma via de linha de comando entre as que estes guias recomendam. À mão, o método do guia anterior funciona com qualquer seletor de cor que mostre OKLCH e um verificador de contraste para medir cada nível contra cada fundo.
Conferindo que nada é enviado
Não há arquivo envolvido, e a cor e o nome do token ficam depois do # na barra de endereço, parte que os navegadores não enviam ao servidor. Com o DevTools aberto no painel Network (rede), mude a cor da marca algumas vezes e observe: nada do que sai leva essa cor.
Abra o gerador de escalas e tokens com o hex da sua marca e leia os dois cartões de funções antes das amostras. Se você trabalha com Tailwind v4, a ferramenta Tailwind colours monta os mesmos onze níveis e os exporta como um bloco @theme.