Referência da paleta de cores do Tailwind CSS
As cores do Tailwind estão todas aqui, em uma grade pesquisável — os 242 valores em 22 famílias de cores, cada uma com 11 tons, do 50 (mais claro) ao 950 (mais escuro). Clique em qualquer amostra para copiar na hora o nome da classe ou o valor da cor, sem precisar voltar à documentação.
A paleta é dividida em 5 famílias neutras (Slate, Gray, Zinc, Neutral, Stone), para textos, fundos e bordas, mais 17 famílias com matiz, do Red ao Rose, para destaques e temas. Foi feita para desenvolvedores front-end e designers que querem uma forma rápida de navegar, consultar um código HEX e pegar o valor exato de que precisam.
Como usar
Navegue pela grade
Cada linha mostra o nome de uma família à esquerda e seus 11 tons, do mais claro (50) ao mais escuro (950). Passe o cursor sobre qualquer amostra para ver o número do tom e o valor HEX.
Busque e filtre
Digite o nome de uma família como blue ou um valor HEX como #3b82f6 para filtrar enquanto digita. Use o menu de filtro para mostrar somente Todas as cores, Cores com matiz ou Neutras.
Escolha um formato e copie
Escolha Nome da classe, HEX, RGB ou HSL no menu de formato e clique em qualquer amostra para copiar esse valor para a área de transferência.
Abra a visualização de detalhes
Dê dois cliques em uma amostra para abrir o modal de detalhes. Veja o nome da classe, o HEX, o RGB e o HSL de uma vez, copie qualquer um deles e pule para outros tons da mesma família.
Salve e exporte favoritos
Clique na estrela de qualquer amostra para adicioná-la aos favoritos. Abra o painel de favoritos e use Exportar CSS para copiar todos os favoritos como um conjunto de propriedades personalizadas CSS, prontas para colar na sua folha de estilos.
Recursos
Paleta de cores completa
Todas as 242 cores do Tailwind em uma grade — 22 famílias com 11 tons cada — dispostas para você comparar os tons de uma família de relance.
Vários formatos de cópia
Copie uma cor como Nome da classe (bg-blue-500), HEX, RGB ou HSL — escolha o formato no menu e clique para copiar.
Sistema de favoritos
Marque com estrela as cores que mais usa. Os favoritos ficam no armazenamento local do navegador, então permanecem entre sessões no mesmo dispositivo.
Exportar como variáveis CSS
Transforme seus favoritos em propriedades personalizadas CSS com um clique, prontas para colar em um bloco :root e montar a paleta do seu projeto.
Modal de detalhes da cor
Dê dois cliques em qualquer cor para ver tudo: nome da classe, HEX, RGB e HSL juntos, além de atalhos para todos os outros tons da família.
Busca inteligente
Encontre cores na hora pelo nome da família ou pelo valor HEX. A grade filtra em tempo real enquanto você digita, e um filtro de categoria limita a neutras ou cores com matiz.
Seus dados ficam privados
A paleta vem embutida no aplicativo e roda inteiramente no seu navegador. Sem requisições a servidores, favoritos salvos localmente e funciona offline após o primeiro carregamento.
Perguntas frequentes
Quantas cores e tons o Tailwind tem?
Esta ferramenta cobre 22 famílias de cores, cada uma com 11 tons, do 50 (mais claro) ao 950 (mais escuro) — 242 cores no total. Cinco famílias são neutras (Slate, Gray, Zinc, Neutral, Stone) e as outras 17 têm matiz, do Red ao Rose.
Qual o código HEX de bg-blue-500?
bg-blue-500 é #3b82f6. Para descobrir o HEX de qualquer outra cor, busque o nome da família ou passe o cursor sobre a amostra — o número do tom e o valor HEX aparecem ali mesmo, e o modal de detalhes lista HEX, RGB e HSL juntos.
Como copio o HEX ou o RGB de uma cor do Tailwind?
Defina o menu de formato como HEX ou RGB e clique em qualquer amostra para copiar esse valor. Você também pode dar dois cliques em uma amostra para abrir o modal de detalhes e copiar o nome da classe, o HEX, o RGB ou o HSL individualmente.
Como uso uma classe de cor como bg-, text- ou border-?
O formato de classe copia uma classe de fundo como bg-blue-500, pronta para colar no seu HTML com o Tailwind CSS. Para a cor do texto, troque o prefixo por text-blue-500, e para bordas use border-blue-500 — a família e o tom permanecem os mesmos.
Qual a diferença entre as cores neutras?
O Tailwind traz cinco famílias neutras com nuances sutis: Slate é um cinza frio com tendência azulada, Gray é um neutro equilibrado, Zinc é frio, mas um pouco mais quente que o Slate, Neutral não tem nenhum desvio de cor, e Stone é um cinza quente com um toque de marrom.
Posso usar essas cores sem o Tailwind CSS?
Sim. Copie o valor HEX, RGB ou HSL e use em qualquer arquivo CSS, ferramenta de design ou aplicativo — as cores funcionam por conta própria, sem o framework Tailwind.
Meus favoritos são salvos? Como faço para exportá-los?
Os favoritos ficam guardados no armazenamento local do navegador, então permanecem entre sessões no mesmo dispositivo e navegador; limpar os dados do navegador os remove. Abra o painel de favoritos e clique em Exportar CSS para copiar todos os favoritos como propriedades personalizadas CSS que você pode colar em uma folha de estilos.
Ainda não há comentários. Seja o primeiro a comentar!