Cores do Tailwind CSS

Esta ferramenta usa a paleta de cores oficial do Tailwind CSS v4, que inclui todas as 22 famílias de cores com 11 tons cada (de 50 a 950). Isso garante que você está trabalhando com os valores de cores mais atuais e precisos do framework Tailwind.

O Tailwind fornece 5 famílias de cores neutras com diferenças sutis, mas importantes, em tom e temperatura:

• Slate: Cinza frio com um leve tom azulado - moderno e nítido
• Gray: Cinza neutro puro - equilibrado e versátil
• Zinc: Cinza frio, ligeiramente mais quente que Slate - sensação contemporânea
• Neutral: Neutro verdadeiro sem matiz de cor - perfeitamente equilibrado
• Stone: Cinza quente com um leve tom marrom - orgânico e natural

Escolha com base na temperatura geral e estética do seu design. Cinzas frios (Slate, Zinc) funcionam bem com azuis e designs modernos, enquanto cinzas quentes (Stone) complementam tons terrosos.

O formato de nome de classe (por exemplo, bg-blue-500) está pronto para usar diretamente no seu HTML com Tailwind CSS. Basta adicioná-lo ao atributo class do seu elemento:

<div class="bg-blue-500 text-white p-4">
  Hello World
</div>

Prefixos comuns:

• bg- para cores de fundo
• text- para cores de texto
• border- para cores de borda
• ring- para cores de anel

Com certeza! Copie os valores HEX, RGB ou HSL para usar em qualquer arquivo CSS, ferramenta de design ou aplicativo. As cores funcionam independentemente do framework Tailwind.

.my-button {
  background-color: #3b82f6;
  color: #ffffff;
  border: 2px solid rgb(59, 130, 246);
}

Essas cores também são perfeitas para ferramentas de design como Figma, Adobe XD, Sketch ou qualquer aplicativo que aceite formatos de cores padrão.

Sim! Os favoritos são salvos no localStorage do seu navegador. Eles persistirão entre as sessões no mesmo dispositivo e navegador, então você pode fechar a aba e voltar mais tarde para encontrar seus favoritos intactos.

Exportar sua paleta de cores personalizada é simples:

1. Adicione cores aos seus favoritos clicando no ícone de estrela
2. Abra o painel de favoritos
3. Clique no botão "Exportar CSS"
4. Cole as propriedades personalizadas CSS copiadas na sua folha de estilo

:root {
  --color-blue-500: #3b82f6;
  --color-emerald-600: #059669;
  --color-slate-700: #334155;
}

Você pode então usar essas variáveis em todo o seu CSS: background-color: var(--color-blue-500);