Design / Cor
Gerador de escala de cores do Tailwind
Transforme uma cor de marca em uma paleta completa do Tailwind CSS de 50 a 950, criada em OKLCH como as próprias cores do Tailwind, e copie-a como CSS de tema do Tailwind 4, configuração do Tailwind 3 ou variáveis CSS.
Gerador de escala de cores do Tailwind: Cada tonalidade usa a luminosidade, o croma e a leve variação de matiz presentes nas próprias paletas do Tailwind em cada etapa, medidos no espaço de cores OKLCH, e os desloca para que sua cor corresponda exatamente à tonalidade escolhida. Os tons de cinza seguem as famílias de cinza do Tailwind. As cores que o gamut sRGB não consegue exibir são adaptadas usando o método de mapeamento de gamut do CSS Color 4, como os navegadores fazem; a saída do Tailwind 4 mantém os valores em OKLCH, enquanto os outros formatos usam hexadecimal. Roda 100% localmente no seu navegador, sem enviar nenhum arquivo para o servidor.
- Categoria
- Ferramentas do dia a dia
- Execuções
- No seu navegador
- Custo
- Grátis · sem cadastro
- Disponibilidade
- Pronto para usar
Roda inteiramente no seu navegador
#f2f8ffoklch(97.6% 0.012 250.3)#dfecffoklch(93.9% 0.029 258.1)#bcd9ffoklch(87.6% 0.061 255.8)#8fbeffoklch(79.3% 0.106 256.6)#5e9cffoklch(69.6% 0.16 259.5)#3b82f6oklch(62.3% 0.188 259.8)#2668daoklch(54.2% 0.187 260.6)#1f57b6oklch(47.7% 0.163 260.6)#1f4997oklch(42.3% 0.137 261.4)#20417coklch(38.4% 0.109 261.4)#15274coklch(27.9% 0.073 263.2)CSS (@theme)
@theme {
--color-brand-50: oklch(97.6% 0.012 250.3);
--color-brand-100: oklch(93.9% 0.029 258.1);
--color-brand-200: oklch(87.6% 0.061 255.8);
--color-brand-300: oklch(79.3% 0.106 256.6);
--color-brand-400: oklch(69.6% 0.16 259.5);
--color-brand-500: oklch(62.3% 0.188 259.8);
--color-brand-600: oklch(54.2% 0.187 260.6);
--color-brand-700: oklch(47.7% 0.163 260.6);
--color-brand-800: oklch(42.3% 0.137 261.4);
--color-brand-900: oklch(38.4% 0.109 261.4);
--color-brand-950: oklch(27.9% 0.073 263.2);
}
As tonalidades acompanham as variações de luminosidade, croma e matiz das próprias paletas do Tailwind, medidas em OKLCH, portanto uma escala criada a partir do blue-500 do Tailwind fica a poucas diferenças perceptíveis da cor azul do Tailwind. As cores fora do intervalo sRGB são trazidas para dentro dele usando o método de mapeamento de gama do CSS Color 4.
Usando a escala
Um padrão comum usa 50–100 para fundos de páginas e cartões, 200–300 para bordas, 500–600 para botões e links, 700 para estados de foco e 800–950 para textos em fundos claros. Confira os pares de texto e fundo com o verificador de contraste de cores.
Para converter uma única cor entre hex, RGB, HSL e OKLCH, use o conversor de cores; para começar a partir de uma foto, use o extrator de paleta de cores.
Tailwind 4 e OKLCH
O Tailwind CSS 4 define suas cores em OKLCH, que pode descrever cores além do sRGB em telas com ampla gama de cores. A saída do Tailwind 4 aqui permanece dentro do sRGB, portanto as cores têm a mesma aparência em todas as telas.
Como usar
- Escolha sua cor ou cole o código hexadecimal dela.
- Escolha qual tonalidade ela deve representar, geralmente 500, ou deixe o gerador posicioná-la.
- Copie o código para Tailwind 4, Tailwind 3 ou variáveis CSS simples.
Privacidade e limitações
Tudo é gerado no seu navegador.
Ferramentas relacionadas
Perguntas frequentes
Por que OKLCH?
Passos iguais de luminosidade no OKLCH parecem passos iguais aos olhos, em todos os matizes. Assim, uma escala amarela e uma escala azul criadas da mesma forma têm o mesmo contraste, algo que o HSL não consegue fazer.
Qual tonalidade minha cor de marca deve representar?
Geralmente 500 ou 600, onde o Tailwind mantém suas cores mais intensas. Uma cor muito clara, como um tom pastel, se encaixa melhor em 200 ou 300; escolha Automático para posicioná-la de acordo com sua luminosidade.
O texto ficará legível sobre essas tonalidades?
Normalmente, o texto branco precisa de 600 ou mais escuro, e o texto escuro, de 400 ou mais claro, mas verifique cada combinação com um verificador de contraste.
Ferramenta grátis · no seu navegador execuções · não precisa de conta