Referência da paleta de cores CSS do Tailwind

• Referência completa de cores do Tailwind: navegue por todas as 22 famílias de cores CSS do Tailwind com 242 amostras de cores individuais. Cada família exibe todo o seu espectro, do tom 50 (mais claro) ao 950 (mais escuro), facilitando a comparação e a escolha do tom perfeito para o seu design.
• Pesquisa e filtro instantâneos: pesquise por nome de família de cores ou valor HEX, ou filtre por categoria (cinza neutro, quente, verde, azul, roxo). A referência é atualizada instantaneamente conforme você digita, mostrando apenas as famílias correspondentes com suas faixas completas de tonalidades.
• 100% privado - sem upload: todos os dados de cores são integrados à página e processados ​​localmente em seu navegador. Nenhum dado é enviado para qualquer servidor - seguro para projetos de clientes e sistemas de design proprietários.
• Gratuito e sempre disponível: acesse a referência completa da paleta de cores CSS do Tailwind a qualquer momento, sem inscrição, sem assinatura e sem limites de uso. Totalmente gratuito para sempre, sem anúncios bloqueando a interface.

• Desenvolvimento CSS do Tailwind: Os desenvolvedores do Tailwind usam a referência da paleta de cores para encontrar rapidamente o valor HEX exato da tonalidade para suas classes de utilitários. Em vez de memorizar códigos hexadecimais como #3b82f6 para blue-500, navegue na paleta visual e copie o valor com um clique.
• Transferência de design para desenvolvimento: os designers usam a referência de cores do Tailwind para combinar seus designs Figma ou Sketch com a tonalidade mais próxima do Tailwind. A paleta visual facilita a identificação de qual tonalidade usar para uma implementação consistente entre design e código.
• Configuração de tema personalizado: ao estender o tema padrão do Tailwind, os desenvolvedores usam a referência de cores para escolher cores personalizadas que se harmonizam com os tons existentes do Tailwind. Navegue pelas famílias relacionadas para encontrar cores que se ajustem naturalmente à sua paleta estendida.
• Documentação do sistema de design: os engenheiros do sistema de design usam a referência de cores como uma pesquisa rápida para documentar tokens de design baseados no Tailwind. A visualização familiar organizada facilita a referência e a documentação de escalas de cores para sua equipe.
• Verificação de acessibilidade e contraste: Os especialistas em acessibilidade usam a referência de cores do Tailwind para identificar combinações de cores que atendem aos requisitos de contraste das WCAG. A gama completa de tonalidades facilita a localização de variantes mais claras ou mais escuras que mantêm contraste suficiente.
• Aprendizagem e exploração de cores: estudantes de design e novos usuários do Tailwind usam a referência de cores para entender o sistema de cores do Tailwind. Explore como cada família varia do claro ao escuro e saiba quais famílias funcionam melhor para diferentes elementos da IU.

A paleta de cores Tailwind CSS é um conjunto cuidadosamente selecionado de famílias de cores projetadas para o desenvolvimento web moderno. Inclui 22 famílias de cores, cada uma com 11 tonalidades que variam de 50 (mais claro) a 950 (mais escuro) – um total de 242 cores. A paleta cobre todo o espectro, desde tons de cinza frios e primários vibrantes até tons pastéis sutis e tons escuros profundos, todos projetados para funcionarem harmoniosamente juntos.

1. Navegar por família: Cada uma das 22 famílias (ardósia, cinza, vermelho, azul, etc.) é exibida como um cartão mostrando sua faixa completa de tonalidades de 50 a 950. A descrição explica o caráter e os melhores casos de uso para cada família de cores.
2. Pesquisar ou filtrar: Use a barra de pesquisa para encontrar famílias por nome ou valor HEX. Use os filtros de categoria (cinza neutro, quente, verde, azul, roxo) para restringir famílias de cores relacionadas. Toda a filtragem é atualizada instantaneamente.
3. Copie qualquer cor: passe o mouse sobre qualquer amostra de tonalidade e clique para copiar seu valor HEX para a área de transferência. Você também pode usar o botão Copiar HEX abaixo de cada coluna de tonalidade. Um brinde de confirmação visual aparece quando uma cor é copiada.

• Nomes de família: as cores são agrupadas em famílias como azul, vermelho, cinza e esmeralda. Cada família representa uma tonalidade distinta com saturação consistente em todas as tonalidades.
• Números de tonalidade: Cada família contém 11 tonalidades numeradas 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 e 950. A tonalidade 500 é normalmente a cor “base”, com números mais baixos sendo variantes mais claras (tons) e números mais altos sendo variantes mais escuras (tonalidades).
• Sintaxe da classe utilitária: no Tailwind CSS, as cores são usadas como classes utilitárias como bg-blue-500, text-gray-900 ou border-emerald-300. O número da tonalidade corresponde diretamente ao sufixo da classe.
• Personalização: Tailwind permite estender ou substituir essas cores padrão em seu tailwind.config.js, permitindo que você mantenha a mesma convenção de nomenclatura com as cores de sua marca.

Os tons 50-200 funcionam melhor para cores de fundo, estados sutis de foco e preenchimentos leves de elementos da interface do usuário. Eles fornecem cor suficiente para serem perceptíveis sem conteúdo excessivo. Use-os para planos de fundo de cartões, distribuição de linhas da tabela e efeitos de foco de navegação.

Os tons 300-500 são ideais para cores primárias, botões, links e elementos de interface de usuário de peso médio. A tonalidade 500 é o padrão para a maioria dos utilitários de cores Tailwind e oferece o melhor equilíbrio entre visibilidade e versatilidade.

Os tons 600-950 funcionam bem para texto, bordas e elementos de alto contraste. Use tons mais escuros para texto legível (geralmente cinza-700 a cinza-900) e para elementos de destaque que precisam se destacar em fundos mais claros. A tonalidade 950 foi adicionada no Tailwind v3.3 para opções ainda mais escuras.