Cores do Tailwind: como usar e estender a paleta

As cores do Tailwind são um conjunto de famílias com nome, de red a rose, mais um conjunto de cinzentos como slate, gray, zinc, neutral e stone, cada uma com onze tons numerados 50, de 100 a 900 de cem em cem, e 950. Aplicas as cores 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 estendes ou substituis num bloco @theme em vez de um ficheiro de configuração JavaScript.

Como está organizada a paleta predefinida

Todas as famílias seguem a mesma escada. De 50 a 200 são tons claros para fundos e preenchimentos de hover, 300 e 400 são acentos 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 degraus, trocar blue por violet num componente costuma funcionar sem mais.

Escolhe um cinzento e fica com ele. Misturar texto gray-500 com bordas slate-200 dá um ar ligeiramente sujo, difícil de nomear e fácil de evitar.

Usar as cores do Tailwind no teu código

Existem utilitários de cor para quase todas as propriedades que aceitam uma cor: bg-*, text-*, border-*, ring-*, fill-*, stroke-*, decoration-*, shadow-*, accent-*, caret-* e as paragens de gradiente from-*, via-* e to-*. Junta 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, cada tom é também uma variável que podes usar em CSS simples: color: var(--color-slate-400). Isto facilita estilizar widgets de terceiros, SVG ou um canvas com as mesmas cores dos teus utilitários.

Juntar cores personalizadas no Tailwind v4

Na v4 configuras o tema em CSS. Qualquer variável que comece por --color- dentro de @theme passa a ser uma cor, com todos os utilitários gerados para ela. Dá nomes às cores por função ou pela marca e dá-lhes uma escada completa se precisares de tons 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);
}

Construir a rampa em OKLCH é a razão pela qual isto funciona. A luminosidade em OKLCH corresponde ao brilho que uma cor parece ter, por isso degraus iguais parecem iguais, o que o HSL não garante. OKLCH explicado vai mais fundo, e oklch.com é um bom sítio para experimentar valores.

Substituir a paleta por inteiro

Para remover as predefinições e ficar só com as tuas cores, repõe primeiro o espaço de nomes com --color-*: initial; no topo de @theme. Os utilitários como bg-blue-500 deixam então de existir, o que é uma boa proteção num projeto com uma marca rigorosa.

Cores personalizadas no Tailwind v3

Os projetos mais antigos ainda configuram as cores em JavaScript. Usa extend para juntar cores a par das predefinidas, ou define colors diretamente para as substituir.

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

Contraste: que 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 os 4,5:1 que a WCAG pede para texto corrente, enquanto branco sobre blue-500 não passa. Verifica o par real, com os rácios abaixo ou uma ferramenta da WebAIM, e lê contraste de cor e acessibilidade para ver as regras.

Faz a paleta ser tua

A paleta predefinida é usada num número enorme de sites, e é por isso que tantos produtos partilham o mesmo botão indigo-600 e o mesmo fundo slate-50. Essa uniformidade é a versão web de porque é que todos os feeds parecem iguais.

1. 1

   Escolhe um matiz

   Parte da cor da tua marca e lê o respetivo matiz em OKLCH. Esquemas de cores para sites ajuda se ainda não tens nenhum.

2. 2

   Constrói a rampa

   Mantém o matiz, varia a luminosidade de cerca de 97% a 22% e baixa o croma nas duas pontas.

3. 3

   Dá nomes por função

   Junta --color-ink, --color-paper e semelhantes, para os componentes dizerem para que serve uma cor.

4. 4

   Mantém uma só fonte

   Trata o bloco @theme como os teus design tokens e reutiliza os mesmos valores nos teus gráficos.

O último passo é onde as marcas costumam desviar-se: o site recebe a nova rampa, enquanto os posts e os slides ficam com as cores do ano passado. Um kit de marca do Gradiently guarda as tuas paletas junto com os tipos de letra e os logótipos, por isso o Designer compõe os posts nas mesmas cores do teu tema Tailwind, e um Mark dá à marca um visual de gradiente que nenhum outro site partilha.