Cores do Tailwind CSS: a paleta padrão completa

Cores do Tailwind CSS

Cores do Tailwind CSS: paleta v4 completa, clique para copiar | We.Inc

Todas as cores padrão do Tailwind CSS v4, de 50 a 950, em amostras que você clica para copiar como classe, variável CSS, valor OKLCH ou hex, e como adicionar e remover cores com @theme.

O Tailwind CSS v4 traz uma paleta padrão de famílias de cores com nome, do vermelho e azul aos neutros como slate, zinc e stone, cada uma em 11 tons de 50 (o mais claro) a 950 (o mais escuro), além de preto e branco. A versão 4 define cada tom em OKLCH como uma variável CSS, por exemplo --color-blue-500, que você usa como bg-blue-500.

Onde uma cor da paleta aparece no Tailwind v4

Clique em qualquer amostra para copiá-la no formato de que precisa: a classe utilitária, a variável CSS, o valor OKLCH que o Tailwind realmente usa ou um hex aproximado para ferramentas que só aceitam hex. Filtre pelo nome para ir direto a uma família. A tabela completa de valores abaixo das amostras lista cada tom como o theme.css o define.

Perguntas frequentes

Por que as cores do Tailwind v4 estão em OKLCH e não em hex?

A versão 4 define a paleta em OKLCH, cujo canal L é a luminosidade percebida, então os tons podem ser espaçados pelo quanto parecem claros. Ele também alcança cores mais vivas em telas de gama ampla. A função oklch() funciona nos principais navegadores desde maio de 2023, então os navegadores leem os valores diretamente.

Como adiciono uma cor personalizada no Tailwind v4?

Declare uma variável no namespace --color- dentro de @theme no seu CSS, por exemplo --color-midnight: #121063. O Tailwind então gera bg-midnight, text-midnight e o resto. Não é preciso nenhuma entrada no tailwind.config.js.

Como removo cores padrão que não uso?

Defina a família como initial dentro de @theme, por exemplo --color-lime-*: initial. Isso remove todos os tons de lime das utilities e variáveis geradas.

Como deixo uma cor semitransparente?

Adicione uma barra e uma opacidade à classe: bg-sky-500/50 para 50%, ou um valor arbitrário como bg-pink-500/[71.37%]. No seu próprio CSS, a função --alpha() faz o mesmo com uma variável.

Posso usar uma cor do Tailwind em CSS puro?

Sim. Cada cor da paleta é exposta como uma variável CSS, então color: var(--color-blue-500) funciona em qualquer folha de estilo que carregue o Tailwind.

Como ler os números dos tons

Sobrescrevendo um único tom

O valor OKLCH de cada tom

Estes são os valores do theme.css do Tailwind. Preto é #000 e branco é #fff.

Paleta padrão do Tailwind CSS v4 em OKLCH

Personalizando cores com @theme

Adicione cores da marca

Variáveis no namespace --color- viram utilities. Aqui bg-brand-500 e text-ink passam a funcionar junto com os padrões.

Remova famílias que você nunca usa

Definir um namespace como initial o remove. A primeira linha remove uma família; a segunda removeria todas as cores padrão.

Painel tingido com texto combinando

Um fundo claro e um tom de texto escuro da mesma família, mais uma borda dois degraus mais escura que o fundo.

Use as variáveis da paleta no seu próprio CSS

Útil para widgets de terceiros aos quais você não consegue adicionar classes.

Clique em uma amostra para copiar

O que um clique copia

Classe

Variável CSS

OKLCH

Hex (aproximado)

Prefixo utilitário

Filtrar cores

{v} copiado

Nada copiado ainda.

Nenhuma família de cores corresponde a esse nome.

Comece grátis · Sem cartão de crédito

Relacionados: Guias

Produto

Para quem é

Recursos

Recursos

Empresa

Mapa do site