Couleur Tailwind la plus proche
Nearest Tailwind Colour
Trouve l’entrée de la palette Tailwind la plus proche d’une couleur donnée et affiche la distance perceptuelle.
Trouve l’entrée de la palette Tailwind la plus proche d’une couleur que vous avez, mesurée en ΔE dans OKLab plutôt qu’en distance RGB. Il répond aussi à la question différente et souvent plus utile de la famille à laquelle votre couleur appartient.
Votre couleur
Comment cela se mesure
La distance est le ΔE dans OKLab, pas la distance euclidienne en RGB. En RGB, le bleu marine et le bleu pur sont à 128 l’un de l’autre, et deux gris moyens séparés de seize ressortent quatre fois plus proches — pour un écart bien plus visible. OKLab a été bâti pour que la distance en ligne droite approche la différence perçue, et c’est exactement la question posée ici.
- ≤ 0,001 — Identique — c’est la couleur Tailwind.
- ≤ 0,02 — Sous le seuil de différence perceptible. Un remplacement sans risque.
- ≤ 0,05 — Visiblement différente côte à côte, assez proche isolément.
- ≤ 0,1 — Un écart qui se voit. Bon pour un fond, pas pour une marque.
- > 0,1 — Une autre couleur. Tailwind n’a rien de proche : étendez plutôt le thème.
Palette lue depuis le Tailwind 4.3.3 installé, et vérifiée contre lui par un test à chaque exécution.
Correspondance la plus proche
indigo-600
#4f39f6Visiblement différente côte à côte, assez proche isolément.
ΔE OKLab
0,0319
Valeur Tailwind
oklch(51.1% 0.262 276.966)
Les suivantes
- indigo-700
#432dd7ΔE 0,0545 - blue-700
#1447e6ΔE 0,0580 - blue-600
#155dfcΔE 0,0698 - indigo-500
#6260ffΔE 0,0745 - violet-700
#7008e7ΔE 0,0810 - violet-600
#7f22feΔE 0,0925 - violet-800
#5d0ec0ΔE 0,1010
Familles les plus proches
- indigomeilleur palier 600ΔE 0,0319
- bluemeilleur palier 700ΔE 0,0580
- violetmeilleur palier 700ΔE 0,0810
- purplemeilleur palier 700ΔE 0,1132
- skymeilleur palier 700ΔE 0,1415
Une autre question que « la couleur la plus proche », et souvent la plus utile : à quelle famille appartient votre couleur de marque, notée sur son meilleur palier.
Si rien ici n’est assez proche, la réponse est d’étendre le thème plutôt que d’accepter la plus proche : produisez une gamme complète de 50 à 950 à partir de votre couleur et collez-la dans @theme.
Comment s’en servir
Entrez votre couleur
En général un hexadécimal de marque que quelqu’un vous a envoyé. Le jeton le plus proche, son hexadécimal et le ΔE apparaissent aussitôt.
Ignorez les neutres si vous cherchez une teinte
slate, gray, zinc, neutral et stone remportent toute requête proche du gris, ce qui est correct et rarement la réponse que vous vouliez.
Lisez la liste des familles
Chaque famille notée sur son meilleur échelon. « Votre couleur de marque est un indigo » est plus actionnable que « l’échantillon le plus proche est indigo-600 ».
Questions fréquentes
Pourquoi le ΔE plutôt que la distance RGB ?
Parce que la distance RGB ne correspond pas à ce que vous voyez. Elle place le bleu marine et le bleu pur à 128 l’un de l’autre, tout en jugeant deux gris moyens distants de seize quatre fois plus proches — pour une différence bien plus visible. OKLab a été construit pour que la distance en ligne droite approche la différence perçue.
Qu’est-ce qu’un bon ΔE ?
En dessous d’environ 0,02 dans OKLab, c’est en pratique la même couleur ; jusqu’à 0,05, c’est une correspondance que personne ne contestera ; au-delà de 0,1, vous choisissez une autre couleur et il faut le dire à voix haute. Les seuils sont indiqués sur la page.
Pourquoi une entrée est-elle marquée comme hors sRGB ?
Parce que Tailwind définit désormais sa palette en OKLCH, et que certaines entrées tombent hors de ce que le sRGB sait montrer. L’hexadécimal est une approximation ramenée dans le gamut ; utiliser la valeur `oklch()` conserve la saturation supplémentaire sur un écran P3.
Rien n’est assez proche. Et maintenant ?
Étendez le thème plutôt que d’accepter le plus proche. Générez une échelle complète de 50 à 950 à partir de votre couleur et collez-la dans `@theme` : une couleur de marque approchée par l’échantillon standard le plus proche cesse d’être la couleur de la marque.
À alimenter depuis
Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.
Échelle de teintes et de nuances
Tint & Shade Scale
Produit une échelle de luminosité de 50 à 950 à partir d’une seule couleur, à pas perceptuellement réguliers, prête à servir de jetons de design.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.
Vérificateur de contraste
Contrast Checker
Note un couple texte et fond selon WCAG 2 et APCA et propose la couleur conforme la plus proche.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.
Échelle de teintes et de nuances
Tint & Shade Scale
Produit une échelle de luminosité de 50 à 950 à partir d’une seule couleur, à pas perceptuellement réguliers, prête à servir de jetons de design.
Extracteur de jetons CSS
CSS Token Extractor
Extrait couleurs, espacements, rayons et polices d’une feuille de style et propose un jeu de propriétés personnalisées.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.
Vérificateur de contraste
Contrast Checker
Note un couple texte et fond selon WCAG 2 et APCA et propose la couleur conforme la plus proche.
Générateur de palette
Palette Generator
Construit une palette harmonieuse à partir d’une couleur de base, selon les règles complémentaire, triadique et analogue.