# Cores do Tailwind: como usar e ampliar a paleta
[Canonical HTML page](https://gradiently.design/pt-br/guide/tailwind-colors)
A paleta padrão é um bom ponto de partida e um acabamento fraco, porque milhares de sites a compartilham. Veja como as cores do Tailwind funcionam na v4 e como adicionar as suas sem quebrar nada.
## The short version
- As cores do Tailwind são famílias nomeadas, como blue, violet e slate, cada uma com tons de 50, o mais claro, a 950, o mais escuro.
- No Tailwind v4, toda cor é uma variável CSS, como `--color-blue-500`, definida em OKLCH, e você adiciona ou substitui cores dentro de um bloco `@theme` no seu CSS.
- Qualquer variável que você chamar de `--color-algo` no `@theme` vira um conjunto completo de utilitários, incluindo `bg-algo`, `text-algo` e `border-algo`.
- 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, então confira as combinações de texto e fundo em vez de supor que 500 sobre branco é legível.
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.
- 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 da v3. Os valores da v4 são escritos em OKLCH e são um pouco mais vivos em telas de gama ampla, mas a escada é a mesma.
| Grupo | Famílias | Uso típico |
| --- | --- | --- |
| Cinzas | 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 | Links, ações principais |
| Roxos e rosas | violet, purple, fuchsia, pink, rose | Destaques, marcas criativas |
As famílias padrão agrupadas por temperatura. Slate e zinc puxam para o frio, stone puxa para o quente, neutral não tem nenhum tom.
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.
```html
Status
All systems normal
Live
```
Um cartão escuro com uma família de cinza e um destaque a 15% de opacidade. Valores arbitrários entre colchetes cobrem a rara exceção.
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.
```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.
- 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 escala ember acima, convertida para hex. Manter o matiz em 45 e variar a luminosidade deixa todos os tons reconhecivelmente da mesma cor.
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](https://gradiently.design/pt-br/guide/oklch-explained) vai mais fundo, e o [oklch.com](https://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.
```js
// tailwind.config.js (v3)
module.exports = {
theme: {
extend: {
colors: {
ember: {
50: '#fff1ea',
500: '#d95f19',
900: '#502007',
},
ink: '#14121f',
},
},
},
}
```
O jeito da v3. Quando você atualizar, isso passa para o `@theme` como `--color-ember-500` e assim por diante.
## 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](https://webaim.org/resources/contrastchecker/), e leia [contraste de cor e acessibilidade](https://gradiently.design/pt-br/guide/color-contrast-accessibility) para ver as regras.
| Texto sobre fundo | Contraste | Texto corrido |
| --- | --- | --- |
| 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 | Não passa |
| 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 |
Razões calculadas a partir dos valores hex da v3. Calcule de novo para as suas cores exatas da v4, que diferem um pouco.
## 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](https://gradiently.design/pt-br/guide/why-every-feed-looks-the-same).
### Parece com qualquer outro site
- Indigo ou azul padrão como cor da marca
- Várias famílias de cinza misturadas
- Cor de destaque usada em tudo
- Cores do tema claro reaproveitadas no modo escuro
### Parece com você
- Uma escala própria no seu matiz
- Um cinza, tingido na direção do matiz da marca
- Destaque reservado para ações e um realce
- Um conjunto escuro escolhido à parte, veja [degradês para modo escuro](https://gradiently.design/pt-br/guide/dark-mode-gradients)
1. **Escolha um matiz** Parta da cor da sua marca e leia o matiz dela em OKLCH. [Esquemas de cores para sites](https://gradiently.design/pt-br/guide/website-color-scheme) ajuda se você ainda não tem nenhum.
2. **Monte a escala** Mantenha o matiz, varie a luminosidade de cerca de 97% a 22% e reduza o croma nas duas pontas.
3. **Nomeie também as funções** Adicione `--color-ink`, `--color-paper` e parecidos, para os componentes dizerem para que serve cada cor.
4. **Mantenha uma única fonte** Trate o bloco `@theme` como seus [tokens de design](https://gradiently.design/pt-br/guide/design-tokens) 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.
## FAQ
### Quais cores existem no Tailwind por padrão?
Famílias de red, orange, amber e yellow, passando por verdes, azuis, roxos e rosas até rose, mais cinzas como slate, gray, zinc, neutral e stone. Cada uma tem os tons 50, de 100 a 900 e 950, além de preto e branco.
### Como adicionar cores personalizadas no Tailwind v4?
Defina variáveis como `--color-brand-500` dentro de um bloco `@theme` no seu 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 padrão é definida em OKLCH, e você pode escrever as suas próprias cores em OKLCH, hex, RGB ou qualquer outro formato de cor CSS.
### Como usar uma cor do Tailwind em CSS simples?
Na v4, use a variável diretamente, por exemplo `var(--color-slate-400)`. Na v3, use a função `theme()`, como `theme(colors.slate.400)`.
### Quais tons do Tailwind são acessíveis para texto?
Depende do par. Sobre branco, gray-500 e mais escuros passam para texto corrido, e texto branco passa sobre blue-600, mas não sobre blue-500, então confira sempre a combinação específica.