Convertisseur de couleurs
Convertissez des couleurs entre les formats HEX, RGB, HSL et trouvez la classe Tailwind CSS la plus proche instantanément.
indigo-500
Classe de couleur Tailwind la plus proche
Convertir des couleurs entre HEX, RGB, HSL et Tailwind instantanément
Jongler entre les formats de couleur est une friction permanente lors de la création d'interfaces. Le convertisseur de couleurs de Zolkit gère HEX, RGB et HSL dans les deux sens et trouve même la classe de couleur Tailwind CSS la plus proche — pour passer d'un code hex de votre outil de design à une classe utilitaire en une seule étape.
Trois formats à la fois
Modifiez n'importe quel format — HEX, RGB ou HSL — et tous les autres se mettent à jour instantanément. Changez un seul chiffre et chaque représentation reste synchronisée.
Correspondance Tailwind
Trouve automatiquement la classe de couleur Tailwind v3 la plus proche parmi la palette complète de 22 familles en utilisant la distance euclidienne dans l'espace RGB.
Nuancier en direct
Un grand sélecteur de couleurs vous donne un aperçu visuel immédiat de la couleur sélectionnée à mesure que vous ajustez les valeurs.
Copier n'importe quel format
Copie en un clic pour chaque carte de format — copiez la chaîne HEX, la fonction rgb(), la fonction hsl() ou le nom de la classe Tailwind.
100 % Privé
Tous les calculs de couleur s'effectuent localement dans votre navigateur. Aucune donnée n'est envoyée à un serveur.
Gratuit pour toujours
Sans compte, sans limite, sans restriction. La conversion de couleurs est toujours gratuite.
Comment convertir des couleurs
- 1
Cliquez sur le sélecteur de couleurs ou saisissez une valeur dans n'importe quel champ de format (HEX, RGB ou HSL).
- 2
Tous les autres champs de format se mettent à jour automatiquement. La carte Tailwind affiche la classe utilitaire correspondante la plus proche.
- 3
Cliquez sur le bouton Copier de n'importe quelle carte pour copier ce format dans votre presse-papier.
Questions fréquentes
Quels formats de couleur cet outil prend-il en charge ?
HEX (6 chiffres, ex. #3b82f6), RGB (0–255 par canal), HSL (teinte 0–360°, saturation et luminosité 0–100 %) et les noms de classes Tailwind CSS. Vous pouvez modifier n'importe quel format et les autres se mettent à jour immédiatement.
Comment fonctionne la correspondance des couleurs Tailwind ?
L'outil compare votre couleur à l'ensemble des ~242 couleurs de la palette Tailwind v3 (22 familles de couleurs × 11 nuances chacune) en utilisant la distance euclidienne dans l'espace RGB. La correspondance la plus proche est renvoyée sous forme de nom de classe utilitaire, ex. « blue-500 ».
La correspondance Tailwind sera-t-elle toujours exacte ?
Pas toujours. Si votre couleur est exactement une couleur Tailwind, la correspondance est parfaite. Pour les couleurs arbitraires, l'outil renvoie le voisin le plus proche, qui peut ne pas être visuellement identique. Le nuancier à côté du nom de la classe vous permet de comparer.
Quelle version de Tailwind la palette utilise-t-elle ?
La table de correspondance utilise la palette par défaut de Tailwind CSS v3, qui comprend les 22 familles de couleurs (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) sur 11 nuances (50 à 950).
Puis-je saisir directement une valeur HSL ?
Oui. Cliquez dans l'un des trois champs numériques HSL (H, S, L) et saisissez une valeur. La teinte est de 0 à 360 degrés, la saturation et la luminosité de 0 à 100 %. Les champs HEX et RGB se mettront à jour au fur et à mesure de la saisie.
Cet outil fonctionne-t-il hors ligne ?
Oui, une fois la page chargée. Tous les calculs de conversion et la table de correspondance Tailwind sont intégrés en JavaScript — aucune requête réseau n'est effectuée lors de la conversion des couleurs.