Cores UI: teste uma paleta do Tailwind numa interface real
Escolha uma família de cor do Tailwind e veja como fica em botões, gráficos, formulários, cartões e badges. Ajuste os tons principais, gere uma paleta aleatória e exporte o resultado.
Como usar a pré-visualização de cores
- 1
Escolha uma família
Escolha qualquer família de cor na barra superior. O endereço da página guarda a família escolhida, então você pode compartilhar o link.
- 2
Ajuste os tons
Mude o 600 (principal), o 500 (secundário) ou o 200 (suave) com o seletor, ou gere uma paleta aleatória. Toda a interface é atualizada na hora.
- 3
Exporte a paleta
Quando gostar, exporte a escala completa do 50 ao 950 para Tailwind v4, Tailwind v3, Figma ou CSS. Clique em qualquer tom da escala para copiá-lo.
Perguntas frequentes
Para ver uma paleta aplicada antes de levá-la ao seu projeto: como os tons claros e escuros funcionam juntos, se os botões se destacam o suficiente e se gráficos e formulários são bem legíveis.
O 600 é usado para ações e elementos de destaque, o 500 para elementos secundários e gráficos, o 100–200 para fundos e estados suaves, e o 700–800 para texto sobre fundos claros.
Sim. O endereço da página inclui a família escolhida, por exemplo ?family=yellow, e ao abrir o link ela é carregada diretamente.
Você pode exportar a escala completa como variáveis do Tailwind v4, configuração do Tailwind v3, estilos do Figma, variáveis CSS ou apenas os códigos HEX, RGB, HSL e OKLCH.