Référence de la palette de couleurs CSS Tailwind

• Référence complète des couleurs Tailwind : parcourez les 22 familles de couleurs CSS Tailwind avec 242 échantillons de couleurs individuels. Chaque famille affiche son spectre complet, de la teinte 50 (la plus claire) à 950 (la plus foncée), ce qui facilite la comparaison et le choix de la teinte parfaite pour votre design.
• Recherche et filtre instantanés : recherchez par nom de famille de couleurs ou valeur HEX, ou filtrez par catégorie (gris neutres, chaud, vert, bleu, violet). La référence se met à jour instantanément au fur et à mesure que vous tapez, affichant uniquement les familles correspondantes avec leurs gammes de nuances complètes.
• 100 % privé – Pas de téléchargement : toutes les données de couleur sont intégrées à la page et traitées localement dans votre navigateur. Aucune donnée n'est jamais envoyée à un serveur - sans danger pour les projets clients et les systèmes de conception propriétaires.
• Gratuit et toujours disponible : accédez à la référence complète de la palette de couleurs CSS Tailwind à tout moment, sans inscription, sans abonnement et sans limite d'utilisation. Entièrement gratuit pour toujours, aucune publicité ne bloque l'interface.

• Développement CSS Tailwind : les développeurs de Tailwind utilisent la référence de la palette de couleurs pour trouver rapidement la valeur HEX de teinte exacte pour leurs classes utilitaires. Au lieu de mémoriser des codes hexadécimaux comme #3b82f6 pour le bleu-500, parcourez la palette visuelle et copiez la valeur en un seul clic.
• Transfert de la conception au développement : les concepteurs utilisent la référence de couleur Tailwind pour faire correspondre leurs conceptions Figma ou Sketch à la teinte Tailwind la plus proche. La palette visuelle permet d'identifier facilement la teinte à utiliser pour une mise en œuvre cohérente entre la conception et le code.
• Configuration du thème personnalisé : lors de l'extension du thème Tailwind par défaut, les développeurs utilisent la référence de couleur pour choisir des couleurs personnalisées qui s'harmonisent avec les nuances Tailwind existantes. Parcourez les familles associées pour trouver des couleurs qui correspondent naturellement à votre palette étendue.
• Documentation du système de conception : les ingénieurs du système de conception utilisent la référence de couleur comme recherche rapide pour documenter les jetons de conception basés sur Tailwind. La vue familiale organisée facilite la référence et la documentation des échelles de couleurs pour votre équipe.
• Vérification de l'accessibilité et du contraste : les spécialistes de l'accessibilité utilisent la référence de couleur Tailwind pour identifier les combinaisons de couleurs qui répondent aux exigences de contraste WCAG. La gamme complète de nuances permet de trouver facilement des variantes plus claires ou plus foncées qui maintiennent un contraste suffisant.
• Apprentissage et exploration des couleurs : les étudiants en design et les nouveaux utilisateurs de Tailwind utilisent la référence des couleurs pour comprendre le système de couleurs Tailwind. Découvrez comment chaque famille évolue du clair au foncé et découvrez quelles familles fonctionnent le mieux pour différents éléments de l'interface utilisateur.

La palette de couleurs CSS Tailwind est un ensemble de familles de couleurs soigneusement sélectionnées, conçues pour le développement Web moderne. Il comprend 22 familles de couleurs, chacune comportant 11 nuances allant de 50 (la plus claire) à 950 (la plus foncée), soit un total de 242 couleurs. La palette couvre tout le spectre, des gris froids et des primaires vibrants aux pastels subtils et aux foncés profonds, tous conçus pour fonctionner harmonieusement ensemble.

1. Parcourir par famille : chacune des 22 familles (ardoise, gris, rouge, bleu, etc.) est affichée sous forme de carte montrant sa gamme complète de nuances de 50 à 950. La description explique le caractère et les meilleurs cas d'utilisation de chaque famille de couleurs.
2. Rechercher ou filtrer : utilisez la barre de recherche pour rechercher des familles par nom ou par valeur HEX. Utilisez les filtres de catégorie (Gris neutres, Chaud, Vert, Bleu, Violet) pour affiner les familles de couleurs associées. Tous les filtrages sont mis à jour instantanément.
3. Copiez n'importe quelle couleur : passez la souris sur n'importe quel échantillon de nuance et cliquez pour copier sa valeur HEX dans votre presse-papiers. Vous pouvez également utiliser le bouton Copier HEX sous chaque colonne de nuances. Un toast de confirmation visuelle apparaît lorsqu'une couleur est copiée.

• Noms de famille : les couleurs sont regroupées en familles comme le bleu, le rouge, le gris et l'émeraude. Chaque famille représente une teinte distincte avec une saturation constante dans toutes ses nuances.
• Numéros de nuances : Chaque famille contient 11 nuances numérotées 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 et 950. La nuance 500 est généralement la couleur « de base », les nombres inférieurs étant des variantes plus claires (teintes) et les nombres plus élevés étant des variantes plus foncées (nuances).
• Syntaxe de classe utilitaire : dans Tailwind CSS, les couleurs sont utilisées comme classes utilitaires comme bg-blue-500, text-gray-900 ou border-emerald-300. Le numéro de teinte correspond directement au suffixe de classe.
• Personnalisation : Tailwind permet d'étendre ou de remplacer ces couleurs par défaut dans votre tailwind.config.js, vous permettant de conserver la même convention de dénomination avec les couleurs de votre marque.

Les nuances 50 à 200 fonctionnent mieux pour les couleurs d'arrière-plan, les états de survol subtils et les remplissages clairs des éléments de l'interface utilisateur. Ils fournissent suffisamment de couleurs pour être perceptibles sans surcharger le contenu. Utilisez-les pour les arrière-plans de cartes, les bandes de lignes de tableau et les effets de survol de navigation.

Les nuances 300 à 500 sont idéales pour les couleurs primaires, les boutons, les liens et les éléments d'interface utilisateur de poids moyen. La teinte 500 est la teinte par défaut pour la plupart des utilitaires de couleur Tailwind et offre le meilleur équilibre entre visibilité et polyvalence.

Les nuances 600 à 950 fonctionnent bien pour le texte, les bordures et les éléments à contraste élevé. Utilisez des nuances plus foncées pour un corps de texte lisible (généralement gris-700 à gris-900) et pour les éléments d'accent qui doivent se démarquer sur des arrière-plans plus clairs. La teinte 950 a été ajoutée dans Tailwind v3.3 pour des options encore plus sombres.