Cores do Tailwind: como usar e ampliar a paleta

As cores do Tailwind são um conjunto de famílias nomeadas, de red a rose, mais um grupo de cinzas como slate, gray, zinc, neutral e stone, cada uma com onze tons numerados 50, de 100 a 900 de cem em cem, e 950. Você as aplica com utilitários como bg-blue-600, text-slate-900 e border-rose-300. No Tailwind v4, toda a paleta é definida em OKLCH como variáveis CSS, que você amplia ou substitui num bloco @theme, e não num arquivo de configuração em JavaScript.

Como a paleta padrão é organizada

Toda família segue a mesma escada. De 50 a 200 são tons claros para fundos e preenchimentos de hover, 300 e 400 são destaques suaves, 500 e 600 são o meio saturado, e de 700 a 950 servem para texto, bordas e superfícies escuras. Como cada família usa os mesmos passos, trocar blue por violet num componente geralmente funciona sem mais ajustes.

Escolha um cinza e fique com ele. Misturar texto gray-500 com bordas slate-200 dá um aspecto levemente sujo, difícil de nomear e fácil de evitar.

Como usar as cores do Tailwind na marcação

Existem utilitários de cor para quase toda propriedade que recebe uma cor: bg-*, text-*, border-*, ring-*, fill-*, stroke-*, decoration-*, shadow-*, accent-*, caret-* e as paradas de degradê from-*, via-* e to-*. Acrescente uma barra e um número para definir a opacidade.

<div class="rounded-xl bg-slate-900 p-6 text-slate-100">
  <p class="text-sm text-slate-400">Status</p>
  <p class="text-2xl font-semibold">All systems normal</p>
  <span class="mt-4 inline-flex rounded-full bg-emerald-500/15 px-3 py-1 text-emerald-300">
    Live
  </span>
</div>

<!-- One off values when nothing in the palette fits -->
<button class="bg-[#0b5c4a] text-[oklch(97%_0.02_160)]">Book a table</button>

Na v4, todo tom também é uma variável que você pode usar em CSS simples: color: var(--color-slate-400). Isso facilita estilizar widgets de terceiros, SVG ou um canvas com as mesmas cores dos seus utilitários.

Como adicionar cores personalizadas no Tailwind v4

Na v4 você configura o tema em CSS. Qualquer variável que comece com --color- dentro do @theme vira uma cor, com todos os utilitários gerados para ela. Nomeie as cores por função ou pela marca e dê a elas uma escada completa se for precisar de tons mais claros.

@import "tailwindcss";

@theme {
  /* A brand ramp on one hue, written in OKLCH */
  --color-ember-50: oklch(97% 0.02 45);
  --color-ember-100: oklch(94% 0.04 45);
  --color-ember-200: oklch(88% 0.07 45);
  --color-ember-300: oklch(80% 0.11 45);
  --color-ember-400: oklch(71% 0.15 45);
  --color-ember-500: oklch(63% 0.17 45);
  --color-ember-600: oklch(55% 0.16 45);
  --color-ember-700: oklch(47% 0.14 45);
  --color-ember-800: oklch(39% 0.11 45);
  --color-ember-900: oklch(31% 0.08 45);
  --color-ember-950: oklch(22% 0.05 45);

  /* Single role colours */
  --color-ink: oklch(18% 0.02 270);
  --color-paper: oklch(98% 0.01 85);
}

Montar a escala em OKLCH é o que faz isso funcionar. A luminosidade em OKLCH corresponde ao brilho que uma cor aparenta, então passos iguais parecem iguais, o que o HSL não garante. OKLCH explicado vai mais fundo, e o oklch.com é um bom lugar para testar valores.

Substituindo a paleta por completo

Para remover as cores padrão e ficar só com as suas, redefina antes o espaço de nomes com --color-*: initial; no topo do @theme. Utilitários como bg-blue-500 deixam de existir, o que é uma boa proteção num projeto com uma marca rígida.

Cores personalizadas no Tailwind v3

Projetos mais antigos ainda configuram as cores em JavaScript. Use extend para adicionar cores ao lado das padrão ou defina colors diretamente para substituí-las.

// tailwind.config.js (v3)
module.exports = {
  theme: {
    extend: {
      colors: {
        ember: {
          50: '#fff1ea',
          500: '#d95f19',
          900: '#502007',
        },
        ink: '#14121f',
      },
    },
  },
}

Contraste: quais tons são seguros para texto

Os números dos tons não são uma escala de contraste. Texto branco sobre blue-600 passa nos 4,5:1 que a WCAG pede para texto corrido, enquanto branco sobre blue-500 não passa. Confira o par real, usando as razões abaixo ou uma ferramenta da WebAIM, e leia contraste de cor e acessibilidade para ver as regras.

Faça a paleta ser sua

A paleta padrão é usada em um número enorme de sites, e é por isso que tantos produtos têm o mesmo botão indigo-600 e o mesmo fundo slate-50. Essa mesmice é a versão web de por que todo feed parece igual.

1. 1

   Escolha um matiz

   Parta da cor da sua marca e leia o matiz dela em OKLCH. Esquemas de cores para sites ajuda se você ainda não tem nenhum.

2. 2

   Monte a escala

   Mantenha o matiz, varie a luminosidade de cerca de 97% a 22% e reduza o croma nas duas pontas.

3. 3

   Nomeie também as funções

   Adicione --color-ink, --color-paper e parecidos, para os componentes dizerem para que serve cada cor.

4. 4

   Mantenha uma única fonte

   Trate o bloco @theme como seus tokens de design e reutilize os mesmos valores nos seus gráficos.

O último passo é onde as marcas costumam se perder: o site recebe a nova escala, enquanto posts de redes sociais e slides continuam com as cores do ano passado. Um kit de marca do Gradiently guarda as suas paletas junto com fontes e logos, então o Designer monta os posts com as mesmas cores do seu tema Tailwind, e um Mark dá à marca um visual em degradê que nenhum outro site compartilha.