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
- Image Color Palette Extractor — Find the color palette of any image — a photo, logo, screenshot or design.
- Color Mixer — Pick two colors and a number of steps to get evenly blended transition colors — perfect for gradients, borders, charts and hover states.
- CSS Variables to Tailwind — Turn your :root color variables into a Tailwind theme in one paste — Tailwind v3 tailwind.config.js or v4 @theme, with literal values or var() references.
- OKLCH Color Converter — Explore the perceptually uniform OKLCH color space with live sliders, see whether a color fits in sRGB, and copy matching HEX, RGB and HSL fallbacks.