Bhinish Dhiman· Atualizado 5 de outubro de 2026
Como criar uma escala de cores personalizada no Tailwind que passe no contraste
Traduzido do original em inglês. Ler o original
Defina uma cor base e um nome, confira as prévias clara e escura e copie o bloco @theme do Tailwind v4 ou a config do v3. Na escala padrão #0066ff, os passos de 600 a 950 aguentam texto de corpo sobre branco (o 600 com 5.68:1) e os de 50 a 500 sobre preto, enquanto o 500 chega só a 3.96:1 sobre branco. A falha mais comum é a borda de campo no 300: 1.86:1 sobre branco, onde é preciso 3:1.
Adicionar uma cor da marca ao Tailwind é rápido. Saber em quais dos onze passos dá para colocar texto é a parte que costuma ser pulada, e é por isso que um 500 vibrante tantas vezes acaba como texto de corpo. A ferramenta Tailwind colours monta a escala, mostra uma prévia dela nos componentes que as pessoas realmente publicam e coloca uma razão medida abaixo de cada um.
Uma escala de cores do Tailwind é uma escala de onze passos registrada sob um único nome, para que existam utilitários como bg-brand-500 e text-brand-700. No Tailwind v4, ela é declarada em CSS, dentro de um bloco @theme, e não numa config em JavaScript, e a própria paleta padrão da v4 é escrita em OKLCH.
Criando a escala
- Defina a cor base. Digite um código hex em Base colour (cor base). A ferramenta abre com #0066ff.
- Defina o nome. O que você digitar em Name (nome) vira o meio de cada utilitário, então “brand” gera
bg-brand-500. - Leia a escala. São os passos de 50 a 950, cada um com seu hex; “yours” (a sua) marca o passo mais próximo da sua cor base.
- Alterne entre Light e Dark. Use o seletor Light/Dark (claro/escuro) à direita dos controles, ou a tecla D. As prévias são redesenhadas no outro tema.
- Leia a linha abaixo de cada prévia. Cada uma traz a razão medida, o que está sendo medido e o limite. Um quadrado preenchido significa que passa; um vazio significa que não passa.
- Escolha a saída e copie. Tailwind v4, Tailwind v3 ou CSS vars, depois Copy (copiar). Copy scale na barra inferior (ou a tecla C) faz o mesmo.
- Cole. Na v4, acrescente o bloco
@themeao arquivo CSS que importa o Tailwind. Na v3, coloque a entrada nomeada dentro detheme.extend.colorsna sua config, o que mantém a paleta padrão do Tailwind ao lado dela.
Use o seletor de saída, e não o Export da barra inferior, cuja saída para Tailwind numera os passos de 1 a 11 em vez de 50 a 950.
Como fica cada saída
A saída v4 escreve cada passo em OKLCH, com a luminosidade com uma casa decimal, o croma com três e o matiz com uma:
@theme {
--color-brand-50: oklch(…);
/* … nine more … */
--color-brand-950: oklch(…);
}A saída v3 é uma entrada colors em hex sob um comentário // tailwind.config.js. CSS vars gera de --brand-50 a --brand-950 num bloco :root, sem o prefixo --color-, então, na v4, ela define variáveis, mas não gera utilitários. Use essa saída quando a escala precisar chegar a código fora do Tailwind.
Quais passos aguentam texto
Estes são os valores que a ferramenta mostra para a base padrão, #0066ff, medidos pelo mesmo código que desenha as prévias. O seu matiz vai alterá-los um pouco; o padrão se mantém.
| Passo | Hex | Sobre branco | Sobre preto | Texto de corpo (4.5:1) sobre |
|---|---|---|---|---|
| 50 | #f1f6ff | 1.08:1 | 19.36:1 | Preto |
| 100 | #e0ebff | 1.20:1 | 17.49:1 | Preto |
| 200 | #c1d8ff | 1.44:1 | 14.53:1 | Preto |
| 300 | #99bfff | 1.86:1 | 11.25:1 | Preto |
| 400 | #659dff | 2.68:1 | 7.82:1 | Preto |
| 500 | #2d79ff | 3.96:1 | 5.29:1 | Preto; sobre branco, só texto grande |
| 600 | #005ce8 | 5.68:1 | 3.69:1 | Branco; sobre preto, só texto grande |
| 700 | #0048b9 | 7.99:1 | 2.62:1 | Branco |
| 800 | #00358d | 11.08:1 | 1.89:1 | Branco |
| 900 | #012464 | 14.60:1 | 1.43:1 | Branco |
| 950 | #011540 | 17.75:1 | 1.18:1 | Branco |
O 500 e o 600 são os dois passos que funcionam numa direção só, e nada na escala aguenta texto de corpo sobre os dois fundos. É por isso que um 500 vibrante usado como texto de corpo numa página branca reprova.
O que as prévias medem
Cada prévia testa uma combinação diferente, e o tema escuro não é simplesmente o claro invertido. As prévias claras ficam em painéis brancos sobre uma página no passo 50; as escuras ficam em painéis no passo 900 sobre o passo 950.
| Linha da prévia | Par no tema claro | Par no tema escuro | Exige | #0066ff, claro / escuro |
|---|---|---|---|---|
| primary label (rótulo primário) | Branco ou preto, o que for mais forte, sobre 600 | O mesmo, sobre 500 | 4.5:1 | 5.68 / 5.29 |
| secondary label (rótulo secundário) | 800 sobre 100 | 100 sobre 800 | 4.5:1 | 9.23 / 9.23 |
| subtle badge, 11px (selo discreto) | 700 sobre 100 | 200 sobre 800 | 4.5:1 | 6.65 / 7.67 |
| input border (borda de campo) | 300 sobre branco | 700 sobre 900 | 3:1 | 1.86 / 1.82 |
| alert body text (texto de alerta) | 700 sobre 50 | 300 sobre 900 | 4.5:1 | 7.37 / 7.82 |
| table header (cabeçalho de tabela) | 600 sobre 50 | 300 sobre 900 | 4.5:1 | 5.23 / 7.82 |
| series on surface (série sobre superfície) | 600 sobre branco | 600 sobre 900 | 3:1 | 5.68 / 2.57 |
A borda e o gráfico no modo escuro
Duas linhas dessa tabela reprovam, e nenhuma delas é um par de texto.
Contraste não textual é o requisito do WCAG, critério de sucesso 1.4.11, que exige que as partes de uma interface necessárias para identificar um controle, como a borda de um campo ou um anel de foco, cheguem a 3:1 contra o que está ao lado delas. A prévia do campo desenha a borda no 300 sobre branco: 1.86:1. Mesmo o 400 só chega a 2.68:1. Se é a borda que mostra que o campo existe, use o 500 ou mais escuro num painel branco.
O tema escuro repete o problema de forma espelhada. Uma borda 700 num painel 900 dá 1.82:1, e uma série de gráfico em 600 nesse painel dá 2.57:1, ambas abaixo de 3:1. Num painel 900, o 500 é o primeiro passo que passa, com 3.67:1.
Então, quando você escrever componentes com a nova escala, bordas e cores de gráfico merecem o mesmo escrutínio que o texto, e, no modo escuro, pedem um passo mais claro do que o hábito do tema claro sugere.
Fazendo à mão
O Tailwind não gera uma escala a partir de uma cor; você escreve as onze linhas por conta própria. É fácil de fazer e fácil de errar exatamente do jeito que as tabelas acima mostram, então, se for fazer à mão, teste a borda no 300 e o rótulo no 600 no verificador de contraste antes de publicar qualquer coisa. A ferramenta guarda a base e o nome depois do # no endereço, parte que o navegador não envia ao servidor, então a cor em que você está trabalhando fica na sua máquina.
Abra o Tailwind colours, defina a sua base e leia a linha da borda de campo antes de qualquer outra coisa. Se você quer tokens de papel, como uma cor de texto e uma cor de borda escolhidas por medição, o gerador de escalas e tokens monta os mesmos onze passos e os atribui. Para entender por que o OKLCH substituiu o HSL nesse tipo de trabalho, veja OKLCH para designers.