Saltar para o conteúdo

Cores do Tailwind CSS: paleta completa v4 e v3

Todas as cores do Tailwind CSS, do 50 ao 950, com seus valores oficiais em OKLCH (v4) e HEX (v3). Clique num tom para copiar a classe, a variável CSS ou o código.

Ver cores UI
Versão
Copiar como

Novos no Tailwind v4: Mauve, Olive, Mist e Taupe, quatro cinzas com matiz.

Valores de cada cor

Escolha uma cor para ver seus onze tons com a classe, OKLCH, HEX, RGB e a cor de texto que melhor contrasta.

Blue · Tailwind v4

TomClasseOKLCHHEXRGBTexto
50Aa19.3:1
100Aa17.2:1
200Aa14.8:1
300Aa11.6:1
400Aa8.0:1
500Aa5.6:1
600Aa5.2:1
700Aa6.8:1
800Aa8.8:1
900Aa10.4:1
950Aa14.8:1

O Tailwind v4 define suas cores em OKLCH e algumas ficam fora da faixa sRGB. O HEX é a cor sRGB mais próxima.

O que é a paleta de cores do Tailwind CSS

O Tailwind CSS inclui uma paleta de cores predefinida, organizada em famílias com nome (Slate, Red, Blue…) e onze tons por família, do 50 (o mais claro) ao 950 (o mais escuro). Essa numeração virou um padrão usado por muitas outras bibliotecas.

Cada cor é usada com classes como bg-blue-500 ou text-red-700. Na tabela acima, você pode copiar o nome da classe, a variável CSS ou o código em HEX, RGB, HSL ou OKLCH.

Que tom usar para cada coisa

Não há regras fixas, mas a maioria das interfaces feitas com Tailwind segue um padrão parecido dentro de cada família:

50–100
Fundos. Superfícies suaves, cartões e áreas em destaque.
200–300
Bordas. Separadores, bordas de campos e estados desativados.
500–600
Ação. Botões, links e elementos ativos. O 600 costuma contrastar melhor com texto branco.
700–900
Texto. Títulos e texto sobre fundos claros da mesma família.
950
Modo escuro. Fundos escuros com um toque de cor em vez de preto puro.

Tailwind v3 e v4: o que muda nas cores

A numeração e os nomes são os mesmos, mas os valores não: a v4 recalibrou toda a paleta. Por isso esta página mostra separadamente os valores oficiais de cada versão.

blue-500 = oklch(62.3% 0.214 259.815)

Tailwind v4

  • Cores definidas em OKLCH, com passos de claridade mais uniformes.
  • Tons mais vivos, pensados para telas de gama ampla (Display P3).
  • Cada cor existe como variável CSS: var(--color-blue-500).
  • Quatro novos cinzas com matiz: Mauve, Olive, Mist e Taupe.

blue-500 = #3b82f6

Tailwind v3

  • Cores definidas em HEX (sRGB).
  • 22 famílias: 5 cinzas e 17 cores.
  • Usadas com classes ou com a função theme('colors.blue.500').
  • Continua sendo a versão de muitos projetos existentes.

Como usar as cores do Tailwind no seu CSS

Além das classes, você pode usar qualquer cor da paleta no seu próprio CSS. Na v4 são variáveis CSS normais; na v3 o acesso é pela função theme().

Tailwind v4

@import "tailwindcss";

.card {
  background: var(--color-blue-50);
  border: 1px solid var(--color-blue-200);
  color: var(--color-blue-900);
}

@theme {
  --color-brand-500: oklch(62.3% 0.214 259.815);
}

Tailwind v3

.card {
  background: theme('colors.blue.50');
  border: 1px solid theme('colors.blue.200');
  color: theme('colors.blue.900');
}

Para adicionar uma cor própria na v4, declare-a em @theme com o prefixo --color- e você terá as classes automaticamente (bg-brand-500, text-brand-500…).

Perguntas frequentes

Os nomes e a numeração são iguais, mas a v4 recalibrou a paleta em OKLCH: os tons são um pouco mais vivos e os passos de claridade, mais uniformes. Por isso o HEX de blue-500 não é o mesmo nas duas versões. A v4 também adiciona quatro novos cinzas: Mauve, Olive, Mist e Taupe.

É a escala padrão do Tailwind: o 50 é o tom mais claro (quase branco) e o 950 o mais escuro (quase preto), com passos intermediários pensados para cobrir fundos, textos, bordas e estados de forma consistente em toda uma interface.

No Tailwind v4, cada cor está disponível como variável CSS, por exemplo var(--color-blue-500). Na v3, usa-se a função theme('colors.blue.500') dentro dos seus arquivos CSS.

O Tailwind v4 define as cores em OKLCH, e algumas ficam fora da faixa sRGB que um código HEX pode representar. Nesses casos mostramos o HEX mais próximo; se o seu projeto aceita OKLCH, use esse valor para obter a cor exata.

A coluna «Texto» de cada cor indica se contrasta melhor o branco ou o preto, com a razão. Como referência, o texto normal precisa de pelo menos 4,5:1; você pode verificar qualquer combinação no verificador de contraste.

OKLCH é um espaço de cor em que a luminosidade é calculada de forma perceptual: duas cores com o mesmo valor de claridade parecem igualmente claras ao olho humano. Isso resulta em escalas de cor mais uniformes que as baseadas em RGB tradicional.