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.
Dérive une échelle sombre d’une échelle claire en la reflétant : le pas 50 devient 950, 100 devient 900, et ainsi de suite. C’est la seule dérivation qui conserve le *contrat* des noms de jetons, si bien qu’un couple qui passait le WCAG en mode clair passe avec le même rapport en mode sombre, et qu’un composant écrit contre l’échelle n’a besoin d’aucun changement. C’est la même page que l’échelle de teintes et de nuances, ouverte sur l’onglet sombre.
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
Sombre
50
100
200
300
400
500
600
700
800
900
950
Pourquoi refléter : le contraste d’un couple de jetons est préservé
- 50 sur 900 : clair 8,93 · sombre 12,73
- 100 sur 800 : clair 6,68 · sombre 7,19
- 200 sur 950 : clair 11,16 · sombre 7,19
Les noms de jetons gardent leur sens, donc un composant écrit sur la gamme n’a rien à changer.
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
Une seule couleur. L’échelle claire est construite d’abord et la sombre en est dérivée, si bien que les deux sortent de la même graine au lieu d’être entretenues séparément.
Choisissez la stratégie
Le reflet est le défaut et celui qui a l’argument de contraste derrière lui. Le décalage vers le sombre descend plutôt chaque pas de trois positions, ce qui conserve l’ordre pour qu’un dégradé du clair au sombre ne s’inverse pas, au prix des pas les plus sombres. Refléter et atténuer, c’est le reflet avec le chroma tiré plus bas.
Atténuez le chroma pour les grands aplats
Une couleur saturée sur une surface sombre irradie et vibre, et l’effet empire à mesure que la surface grandit. Baisser le chroma est le choix prudent ; laissez-le près de 100 % si l’échelle ne sert qu’à de petits accents et au texte.
Lisez le panneau de preuve
Avec le reflet activé, il imprime le rapport WCAG de trois couples de jetons dans les deux modes, côte à côte. C’est l’affirmation vérifiée devant vous plutôt qu’assénée.
Exportez les deux échelles d’un coup
Les formes CSS émettent l’échelle claire dans `:root` et la sombre dans un bloc `prefers-color-scheme: dark`, donc tout le thème tient en un seul collage.
Questions fréquentes
Puis-je coller la palette claire que j’ai déjà ?
Pas comme ensemble. Cette page prend une couleur et construit les deux échelles à partir d’elle, donc une palette existante aux pas réglés à la main ne survivra pas à être donnée une couleur à la fois — vous obtiendriez onze pas réguliers, pas vos onze. Là où la palette existante compte plus que la régularité, convertissez-la jeton par jeton et vérifiez chaque couple dans le vérificateur de contraste.
Le reflet préserve-t-il exactement le contraste ?
De près, pas exactement. L’échelle est symétrique en luminosité OKLCH, et le contraste WCAG est calculé sur la luminance relative, qui n’en est pas une fonction linéaire : les rapports sortent donc proches les uns des autres plutôt qu’identiques. Le panneau de preuve imprime les deux nombres pour que vous voyiez l’écart sur votre couleur au lieu de prendre l’affirmation pour argent comptant.
Dois-je prendre du noir pur comme fond sombre ?
En général non. Le noir pur contre un texte clair maximise le contraste, et sur un écran LCD le halo que cela produit rend les petits corps plus difficiles à lire, pas plus faciles. C’est pour cela que la bande sombre est prévisualisée ici sur un gris très foncé. Un téléphone OLED est le seul cas où le vrai noir apporte quelque chose de réel, en consommation.
Pourquoi est-ce une page distincte de l’échelle de teintes et de nuances ?
Elle ne l’est pas : c’est le même outil avec l’onglet sombre déjà ouvert, parce que « fais-moi une palette sombre » et « fais-moi une échelle de 50 à 950 » arrivent comme deux questions différentes, de gens différents. Tout ce qui est sur une page est sur l’autre.
À alimenter depuis
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.
É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.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
É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.
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.
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.
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.
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.