Como usar: Gerador de cores do Tailwind
- Digite a cor da sua marca no formato HEX, RGB, HSL ou OKLCH.
- Dá um nome à paleta (por exemplo,
brand) — ela se tornabg-brand-500e amigos. - Mantém a opção “passo mais próximo” para que a cor exata caia no tom que corresponda à sua luminosidade, ou define-a para 500.
- Escolha um formato de exportação e copie-o na sua configuração do Tailwind, CSS ou SCSS.
O que é uma escala de cores de 50 a 950?
Sistemas de design como o Tailwind CSS descrevem cada cor como uma rampa de tons: 50 é um tom quase branco para fundos, 500 é a cor principal e 900–950 são tons mais escuros para texto e modo escuro. Ter toda a escala te permite estilizar estados de hover e ativos, bordas, emblemas e temas escuros de forma consistente — em vez de ter que adivinhar uma versão mais clara ou mais escura toda vez.
Como esse gerador cria a escala
- Sua cor é convertida para OKLCH, um espaço de cores perceptualmente uniforme, de modo que cada passo representa um salto visual uniforme.
- Cada etapa tem uma luminosidade-alvo baseada na paleta do Tailwind v4 (≈97% para 50 até ≈26% para 950). Sua cor é colocada na etapa mais próxima, e as metas vizinhas se ajustam levemente para que a rampa flua suavemente por ela.
- A cromaticidade (intensidade da cor) atinge o pico em torno de 500–600 e diminui gradualmente em ambas as extremidades, como nas paletas ajustadas manualmente, para que os tons claros não pareçam neon e os tons escuros não fiquem turvos.
- Qualquer tom fora da gama sRGB é mapeado reduzindo-se a cromaticidade, enquanto se mantêm o matiz e a luminosidade.
Como usar a paleta
O Tailwind v4 lê as cores do CSS: cole o @theme bloco na sua folha de estilos principal e classes como bg-brand-100 aparecem. O Tailwind v3 usa theme.extend.colors em tailwind.config.js. As variáveis CSS e as exportações SCSS funcionam em qualquer projeto — inclusive no Webflow, onde você pode criar variáveis de cor correspondentes no painel Variáveis.
Dicas de acessibilidade
Como regra geral, texto sobre fundo branco precisa de um tom escuro o suficiente para atingir 4,5:1 (geralmente 600 ou mais escuro), e texto sobre fundos escuros costuma funcionar a partir de 300 ou mais claro. A dica abaixo de cada amostra te orienta; verifique pares específicos com o Contrast Checker ou o APCA Contrast Checker.
Também pesquisado como: paleta tailwind, gerador de sombras, gerador de tonalidades, escala de cores, cores do sistema de design, paleta da marca, 50-900.
Ferramentas que combinam com: Gerador de cores do Tailwind
- Extrator de Paleta de Cores de Imagem — Descubra a paleta de cores de qualquer imagem: uma foto, logo, captura de tela ou design.
- Mixer de Cores — Escolha duas cores e a quantidade de passos para obter cores de transição misturadas uniformemente — perfeitas para gradientes, bordas, gráficos e estados de hover.
- CSS Variables para Tailwind — Transforme suas variáveis de cor em :root em um tema do Tailwind com uma única colagem — Tailwind v3 com tailwind.config.js ou v4 com @theme, usando valores literais ou referências var().
- Conversor OKLCH — Explore o espaço de cor OKLCH, perceptualmente uniforme, com controles deslizantes em tempo real, veja se a cor cabe no sRGB e copie os fallbacks HEX, RGB e HSL correspondentes.