Pular para o conteúdo
nearnull

Gerador de Paleta para Tailwind

Transforme uma cor em uma escala completa do Tailwind CSS de 50 a 950, pronta para colar como @theme da v4, config da v3 ou variáveis CSS. Funciona totalmente no seu navegador: nada é enviado a nenhum servidor.

Opções

Usado como bg-brand-500, text-brand-700...

Saída
Escala
50
100
200
300
400
500
600
700
800
900
950

Sua cor é mantida exata em 600, o passo cuja luminosidade mais combina com ela.

@theme {
  --color-brand-50: #f1f5fe;
  --color-brand-100: #dfe8fc;
  --color-brand-200: #c3d4f9;
  --color-brand-300: #99b6f6;
  --color-brand-400: #6b95f1;
  --color-brand-500: #457aee;
  --color-brand-600: #2563eb;
  --color-brand-700: #1555e2;
  --color-brand-800: #1147bc;
  --color-brand-900: #0e3a9b;
  --color-brand-950: #092563;
}

O que é uma escala de cores do Tailwind?

O Tailwind CSS define cada cor como uma escala de onze passos, de 50 (quase branco) a 950 (quase preto), e utilitários como bg-blue-100 ou text-blue-700 escolhem um passo. Uma cor de marca própria precisa dos mesmos onze passos para se encaixar. Este gerador posiciona sua cor no passo cuja luminosidade corresponde a ela, assim ela é mantida exata, e monta os passos mais claros e mais escuros seguindo a mesma curva de luminosidade da paleta do Tailwind, preservando o matiz e a saturação. Ele escreve o resultado para o @theme do Tailwind v4, um arquivo de config da v3 ou variáveis CSS.

Exemplos

Registrando a escala gerada e usando-a:

Tailwind v4
@import "tailwindcss";

@theme {
  --color-brand-500: #457aee;
  --color-brand-600: #2563eb;
}
Tailwind v3
// tailwind.config.js
theme: { extend: { colors: { brand: { 500: "#457aee", 600: "#2563eb" } } } }
HTML
<button class="bg-brand-600 text-white hover:bg-brand-700">
  Save
</button>
CSS
.button {
  background: var(--brand-600);
  border-color: var(--brand-700);
}

Casos de uso

Adicionar uma cor de marca ao Tailwind

Transforme o único valor HEX de um guia de estilo em uma escala completa, assim bg-brand-50 a bg-brand-950 funcionam como qualquer cor nativa.

Estados de hover, focus e desabilitado

Use passos vizinhos para os estados de interação, como 600 para um botão e 700 no hover, sem escolher cada tom manualmente.

Modo escuro

Troque passos claros e escuros entre temas, por exemplo fundos 50 com texto 900 no modo claro e o inverso no modo escuro.

Design tokens fora do Tailwind

Exporte a escala como variáveis CSS para usar a mesma convenção de 50 a 950 em qualquer folha de estilos ou biblioteca de componentes.

Perguntas frequentes

Em qual passo minha cor fica?
Naquele cuja luminosidade de referência é a mais próxima da sua cor. Um azul médio como #2563eb fica em 600, um tom pálido em 100 ou 200, um azul-marinho profundo em 900. Esse passo é a sua cor exata; os outros são gerados em volta.
Vai coincidir exatamente com as cores do Tailwind?
Não exatamente. A paleta do Tailwind foi ajustada à mão, passo a passo. Este gerador segue a curva de luminosidade do azul do Tailwind, que fica muito próxima para a maioria dos matizes, mas espere pequenas diferenças de saturação.
Qual a diferença entre a saída v4 e a v3?
O Tailwind v4 é configurado em CSS: as cores são variáveis --color-* dentro de @theme. O Tailwind v3 lê as cores do tailwind.config.js. As duas geram as mesmas classes utilitárias, como bg-brand-500.
Os passos gerados são acessíveis?
A escala não é verificada quanto ao contraste. Como regra geral, texto de 700 para cima sobre fundos 50 ou brancos costuma passar na WCAG AA, mas verifique os pares exatos com o Verificador de Contraste.
Meus dados são enviados a algum servidor?
Não. A escala e o código são gerados no seu navegador com JavaScript puro. Nada é transmitido ou armazenado.

Ferramentas relacionadas

Conversor de Cores (HEX, RGB, HSL, CMYK)Verificador de Contraste de Cores (WCAG AA / AAA)Gerador de Tonalidades (Tints e Shades)Gerador de Gradiente CSSGerador de Paleta de Cores (Harmonias)Seletor de Cor de Imagem