# Cores do Tailwind: como usar e estender a paleta

[Canonical HTML page](https://gradiently.design/pt-pt/guide/tailwind-colors)

A paleta predefinida é um bom ponto de partida e um mau ponto de chegada, porque milhares de sites a partilham. Eis como funcionam as cores do Tailwind na v4 e como juntar as tuas sem estragar nada.

## The short version

- As cores do Tailwind são famílias com nome, como blue, violet e slate, cada uma com tons de 50, o mais claro, a 950, o mais escuro.
- No Tailwind v4 cada cor é uma variável CSS como `--color-blue-500`, definida em OKLCH, e juntas ou substituis cores dentro de um bloco `@theme` no teu CSS.
- Qualquer variável a que chames `--color-algumacoisa` em `@theme` passa a ser um conjunto completo de utilitários, incluindo `bg-algumacoisa`, `text-algumacoisa` e `border-algumacoisa`.
- O modificador de opacidade, como em `bg-sky-500/50`, também funciona com cores personalizadas, porque a v4 mistura a transparência com `color-mix()`.
- O contraste depende do par, não do número do tom, por isso verifica as combinações de texto e fundo em vez de assumires que 500 sobre branco se lê bem.

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.

- blue-100: #dbeafe
- blue-200: #bfdbfe
- blue-300: #93c5fd
- blue-400: #60a5fa
- blue-500: #3b82f6
- blue-600: #2563eb
- blue-700: #1d4ed8
- blue-800: #1e40af
- blue-900: #1e3a8a
- blue-950: #172554

A família blue em hex sRGB, da paleta v3. Os valores da v4 estão escritos em OKLCH e são um pouco mais vivos em ecrãs de gama alargada, mas a escada é a mesma.

| Grupo | Famílias | Uso típico |
| --- | --- | --- |
| Cinzentos | slate, gray, zinc, neutral, stone | Texto, bordas, superfícies |
| Quentes | red, orange, amber, yellow | Alertas, avisos, energia |
| Verdes | lime, green, emerald, teal | Sucesso, natureza, calma |
| Azuis | cyan, sky, blue, indigo | Ligações, ações principais |
| Roxos e rosas | violet, purple, fuchsia, pink, rose | Acentos, marcas criativas |

As famílias predefinidas agrupadas por temperatura. Slate e zinc tendem para o frio, stone para o quente, neutral não tem qualquer tom.

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.

```html
<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>
```

Um cartão escuro com uma só família de cinzento mais um acento a 15% de opacidade. Os valores arbitrários entre parênteses retos cobrem a exceção rara.

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.

```css
@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);
}
```

Agora `bg-ember-500`, `text-ink`, `border-ember-200/60` e `from-ember-400` existem todos.

- ember-50: #fff1ea
- ember-200: #ffcab2
- ember-300: #f9a782
- ember-400: #ec7f4b
- ember-500: #d95f19
- ember-600: #b94a00
- ember-700: #973900
- ember-900: #502007
- ember-950: #2d1205

A rampa ember acima, convertida em hex. Manter o matiz em 45 e variar a luminosidade mantém todos os tons reconhecivelmente da mesma cor.

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](https://gradiently.design/pt-pt/guide/oklch-explained) vai mais fundo, e [oklch.com](https://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.

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

A forma da v3. Quando atualizares, isto passa para `@theme` como `--color-ember-500` e assim por diante.

## 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](https://webaim.org/resources/contrastchecker/), e lê [contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) para ver as regras.

| Texto sobre fundo | Contraste | Texto corrente |
| --- | --- | --- |
| slate-900 sobre branco | 17,85:1 | Passa |
| gray-500 sobre branco | 4,83:1 | Passa por pouco |
| gray-400 sobre branco | 2,54:1 | Falha |
| branco sobre blue-600 | 5,17:1 | Passa |
| branco sobre blue-500 | 3,68:1 | Só texto grande |
| slate-400 sobre slate-900 | 6,96:1 | Passa |

Rácios calculados a partir dos valores hex da v3. Volta a calculá-los para as tuas cores exatas da v4, que diferem ligeiramente.

## 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](https://gradiently.design/pt-pt/guide/why-every-feed-looks-the-same).

### Parece todos os outros sites

- Índigo ou azul predefinido como cor da marca
- Várias famílias de cinzento misturadas
- Cor de acento usada em tudo
- Cores do tema claro reutilizadas no modo escuro

### Parece-se contigo

- Uma rampa personalizada no teu matiz
- Um cinzento, com tom da cor da marca
- Acento reservado para ações e um destaque
- Um conjunto escuro escolhido à parte, vê [gradientes para modo escuro](https://gradiently.design/pt-pt/guide/dark-mode-gradients)

1. **Escolhe um matiz** Parte da cor da tua marca e lê o respetivo matiz em OKLCH. [Esquemas de cores para sites](https://gradiently.design/pt-pt/guide/website-color-scheme) ajuda se ainda não tens nenhum.
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. **Dá nomes por função** Junta `--color-ink`, `--color-paper` e semelhantes, para os componentes dizerem para que serve uma cor.
4. **Mantém uma só fonte** Trata o bloco `@theme` como os teus [design tokens](https://gradiently.design/pt-pt/guide/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.

## FAQ

### Que cores existem por defeito no Tailwind?

Famílias de red, orange, amber e yellow, passando por verdes, azuis, roxos e rosas, até rose, mais cinzentos como slate, gray, zinc, neutral e stone. Cada uma tem tons 50, de 100 a 900 e 950, além de preto e branco.

### Como junto cores personalizadas no Tailwind v4?

Define variáveis como `--color-brand-500` dentro de um bloco `@theme` no teu CSS. O Tailwind gera `bg-brand-500`, `text-brand-500` e todos os outros utilitários de cor a partir dela.

### O Tailwind usa OKLCH?

Sim. Desde a v4, a paleta predefinida é definida em OKLCH, e podes escrever as tuas cores em OKLCH, hex, RGB ou qualquer outro formato de cor CSS.

### Como uso uma cor do Tailwind em CSS simples?

Na v4 usa diretamente a variável, por exemplo `var(--color-slate-400)`. Na v3 usa a função `theme()`, como `theme(colors.slate.400)`.

### Que tons do Tailwind são acessíveis para texto?

Depende do par. Sobre branco, gray-500 e mais escuros passam para texto corrente, e texto branco passa sobre blue-600 mas não sobre blue-500, por isso verifica sempre a combinação concreta.