É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.
Construit une échelle de 50 à 950 à partir d’une couleur, telle qu’un système de design la veut. Les cibles de luminosité sont la moyenne des familles chromatiques de Tailwind elles-mêmes, mesurées depuis le paquet installé plutôt que choisies à la main, si bien que le résultat tombe là où votre œil attend déjà chaque pas. Un curseur déplace le résultat entre cette courbe familière et une courbe régulièrement espacée.
Couleur de base
Sa teinte et son chroma sèment la gamme ; sa luminosité décide quel palier porte la marque de celui que vous avez choisi.
Gamme
Les cibles de luminosité sont la moyenne des familles chromatiques de Tailwind elles-mêmes, mesurées dans le paquet installé plutôt que choisies ici.
Mode sombre
Le palier 50 devient le 950, le 100 devient le 900, et ainsi de suite. Les noms de jetons gardent leur sens — 500 reste le ton moyen — et un composant écrit sur la gamme n’a rien à changer.
Clair
50
P3
100
P3
200
P3
300
P3
400
P3
500
P3
600
700
800
900
950
Export
Vous cherchez un jeu de teintes plutôt que la gamme d’une seule ? Le générateur de palette construit des harmonies. Pour trouver le jeton Tailwind le plus proche de l’une d’elles, la recherche de la couleur la plus proche la mesure en ΔE.
Comment s’en servir
Entrez la couleur de base
Sa teinte et son chroma amorcent l’échelle. Sa luminosité décide quel pas reçoit l’anneau autour de lui — le pas le plus proche de la couleur que vous avez apportée.
Décidez à quel point vous voulez la courbe familière
À 100 %, les pas se placent là où Tailwind les met, ce que toute l’équipe a déjà en tête. À 0, l’échelle est une droite de 0,97 à 0,25 — plus régulièrement espacée, et moins familière. Il n’y a pas de bonne réponse ; coller à un produit existant est la raison habituelle de rester à 100 %.
Ajoutez une dérive de teinte si l’extrémité sombre paraît fausse
Les vraies familles dérivent : le rouge de Tailwind va de 17° au pas 50 à 26° au pas 950, parce qu’un rouge sombre se lit mieux légèrement plus chaud. Quelques degrés suffisent en général ; le curseur va jusqu’à 40 dans chaque sens.
Décidez si vous restez dans le sRGB
Activé, chaque pas est une couleur que n’importe quel écran sait montrer et l’hexadécimal est exact. Désactivé, les pas médians d’une teinte saturée gardent leur chroma, un écran P3 les montre, et l’hexadécimal devient une approximation — les pas qui débordent sont marqués.
Exportez en variables, en thème Tailwind ou en JSON
Le préfixe est le vôtre. La forme JSON porte aussi les ancres de luminosité, ce qui est utile si quelque chose en aval doit reconstruire la même échelle.
Questions fréquentes
Mon hexadécimal de marque n’apparaît nulle part dans l’échelle. Est-ce un bug ?
Non, et c’est le comportement honnête. L’échelle est bâtie à partir de cibles de luminosité, elle n’est pas enfilée sur votre couleur : à moins que celle-ci ne tombe exactement sur l’une des onze cibles, elle n’apparaîtra pas telle quelle. Le pas cerclé est le plus proche. Si l’hexadécimal exact doit y figurer, employez-le directement pour ce jeton-là et laissez l’échelle fournir le reste.
Est-ce que ce sont des couleurs Tailwind ?
Non. Ce qui vient de Tailwind, c’est la *forme* de la courbe : les onze valeurs de luminosité, moyennées sur ses familles chromatiques. La teinte et le chroma sont les vôtres. Pour trouver quel jeton Tailwind est le plus proche d’une couleur que vous avez, la recherche de couleur la plus proche mesure cela en ΔE.
« Perceptuellement régulier » veut-il dire que chaque pas diffère d’autant ?
Seulement à 0 % d’ancrage. À 100 %, l’échelle suit délibérément la courbe de Tailwind, qui n’est pas régulièrement espacée : elle resserre l’extrémité claire pour qu’il y ait assez de teintes de fond utilisables. Ce qu’OKLCH apporte dans les deux cas, c’est que les nombres veulent dire quelque chose perceptuellement, si bien que deux familles construites ainsi avancent du même pas.
Les pas passent-ils le WCAG les uns contre les autres ?
Cette page ne vérifie pas cela, au-delà du panneau de preuve de l’onglet mode sombre. Des pas de luminosité égaux ne sont pas des pas de contraste égaux, parce que le contraste WCAG est calculé sur la luminance relative et que la luminosité OKLCH n’en est pas une fonction linéaire. Portez le couple que vous comptez vraiment employer au vérificateur de contraste.
À alimenter depuis
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.
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.
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.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
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.
Palette pour le mode sombre
Dark Mode Palette
Construit une rampe de 50 à 950 depuis une couleur et la reflète en version sombre, pour que chaque paire de jetons conserve son contraste.
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.
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.
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.
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.