Couleur HEX vers classe Tailwind

Couleur HEX vers classe Tailwind: à quoi ça sert

Quand on utilise Tailwind CSS et qu’on reçoit la couleur de la marque en HEX, on veut savoir quelle couleur de la palette par défaut s’en approche le plus, pour ne pas remplir le code de valeurs entre crochets.

L’outil compare votre couleur aux 242 couleurs de la palette de Tailwind 3 (de slate à rose, tons 50 à 950, plus blanc et noir) en utilisant la distance dans l’espace OKLab, qui suit la perception de l’œil. Il affiche les cinq plus proches, avec la classe prête, et vous prévient quand aucune n’est assez proche.

Mode d’emploi

1. Collez la couleur en HEX ou rgb(), ou choisissez-la dans le sélecteur.
2. Choisissez le préfixe de la classe (bg, text, border…).
3. Copiez la classe de la couleur la plus proche ou la valeur exacte.

Quand l’utiliser

• Adapter la couleur de la marque à un projet Tailwind.
• Convertir une maquette Figma en classes.
• Décider s’il vaut la peine d’ajouter une nouvelle couleur au thème.

Questions fréquentes

Comment la couleur la plus proche est-elle choisie ?

Par la distance de couleur dans l’espace OKLab, qui suit la perception de l’œil humain mieux que la comparaison des nombres RGB. Plus la distance est petite, plus les couleurs se ressemblent.

Et si aucune ne ressemble ?

Utilisez la valeur exacte avec des crochets, comme bg-[#1f6feb], ou enregistrez la couleur de votre marque dans le thème (theme.extend.colors dans tailwind.config ou @theme dans Tailwind 4) avec un nom, comme brand.

La palette est-elle celle de Tailwind 3 ou 4 ?

La comparaison utilise les valeurs HEX de la palette par défaut de Tailwind 3. Tailwind 4 a défini les mêmes couleurs en OKLCH, avec des tons légèrement plus vifs, mais les noms (blue-600, red-500…) sont les mêmes.

Vraiment gratuit ?

Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.

Outils similaires