Design / Couleur
Générateur d’échelle de couleurs Tailwind
Transformez une couleur de marque en palette CSS Tailwind complète, de 50 à 950, créée en OKLCH comme les couleurs de Tailwind, puis copiez-la au format CSS de thème Tailwind 4, configuration Tailwind 3 ou variables CSS.
Générateur d’échelle de couleurs Tailwind: Chaque nuance reprend la luminosité, la chroma et la légère évolution de teinte propres aux palettes de Tailwind à cette étape, mesurées dans l’espace colorimétrique OKLCH, puis les décale pour que votre couleur corresponde exactement à la nuance choisie. Les gris suivent plutôt les gammes de gris de Tailwind. Les couleurs que le gamut sRGB ne peut pas afficher sont adaptées avec la méthode de mappage de gamut de CSS Color 4, comme le font les navigateurs ; la sortie Tailwind 4 conserve les valeurs OKLCH, tandis que les autres formats utilisent des codes hexadécimaux. Fonctionne 100 % localement dans votre navigateur, sans aucun téléversement de fichier vers le serveur.
- Catégorie
- Outils du quotidien
- Exécutions
- Dans votre navigateur
- Coût
- Gratuit · sans inscription
- Disponibilité
- Prêt à l'emploi
Fonctionne entièrement dans votre navigateur
#f2f8ffoklch(97.6% 0.012 250.3)#dfecffoklch(93.9% 0.029 258.1)#bcd9ffoklch(87.6% 0.061 255.8)#8fbeffoklch(79.3% 0.106 256.6)#5e9cffoklch(69.6% 0.16 259.5)#3b82f6oklch(62.3% 0.188 259.8)#2668daoklch(54.2% 0.187 260.6)#1f57b6oklch(47.7% 0.163 260.6)#1f4997oklch(42.3% 0.137 261.4)#20417coklch(38.4% 0.109 261.4)#15274coklch(27.9% 0.073 263.2)CSS (@theme)
@theme {
--color-brand-50: oklch(97.6% 0.012 250.3);
--color-brand-100: oklch(93.9% 0.029 258.1);
--color-brand-200: oklch(87.6% 0.061 255.8);
--color-brand-300: oklch(79.3% 0.106 256.6);
--color-brand-400: oklch(69.6% 0.16 259.5);
--color-brand-500: oklch(62.3% 0.188 259.8);
--color-brand-600: oklch(54.2% 0.187 260.6);
--color-brand-700: oklch(47.7% 0.163 260.6);
--color-brand-800: oklch(42.3% 0.137 261.4);
--color-brand-900: oklch(38.4% 0.109 261.4);
--color-brand-950: oklch(27.9% 0.073 263.2);
}
Les nuances suivent les variations de clarté, de chroma et de teinte des propres palettes de Tailwind, mesurées en OKLCH. Ainsi, une échelle créée à partir du blue-500 de Tailwind ne diffère du bleu de Tailwind que de quelques différences juste perceptibles. Les couleurs hors de la plage sRGB sont ramenées dans celle-ci avec la méthode de mappage de gamut de CSS Color 4.
Utiliser l’échelle
Une organisation courante utilise 50–100 pour les arrière-plans des pages et des cartes, 200–300 pour les bordures, 500–600 pour les boutons et les liens, 700 pour les états au survol et 800–950 pour le texte sur des arrière-plans clairs. Vérifiez les associations de texte et d’arrière-plan avec le vérificateur de contraste des couleurs.
Pour convertir une couleur entre les formats hexadécimal, RGB, HSL et OKLCH, utilisez le convertisseur de couleurs ; pour partir d’une photo, utilisez l’extracteur de palette de couleurs.
Tailwind 4 et OKLCH
Tailwind CSS 4 définit ses couleurs en OKLCH, qui permet de décrire des couleurs dépassant l’espace sRGB sur les écrans à large gamut. La sortie Tailwind 4 générée ici reste dans l’espace sRGB, de sorte que les couleurs s’affichent de la même façon sur tous les écrans.
Comment l'utiliser
- Choisissez votre couleur ou collez son code hexadécimal.
- Choisissez la nuance qu’elle doit représenter, généralement 500, ou laissez le générateur la déterminer.
- Copiez le code pour Tailwind 4, Tailwind 3 ou de simples variables CSS.
Confidentialité et limitations
Tout est généré dans votre navigateur.
Outils associés
Questions fréquentes
Pourquoi utiliser OKLCH ?
Des écarts identiques de luminosité en OKLCH semblent identiques à l’œil, quelle que soit la teinte. Ainsi, une échelle jaune et une échelle bleue créées de la même manière offrent un contraste comparable, ce que HSL ne permet pas.
Quelle nuance choisir pour ma couleur de marque ?
Généralement 500 ou 600, là où Tailwind conserve ses couleurs les plus intenses. Une couleur très claire, comme un pastel, convient mieux en 200 ou 300 ; choisissez Automatique pour la positionner selon sa luminosité.
Le texte sera-t-il lisible sur ces nuances ?
En général, un texte blanc nécessite une nuance 600 ou plus foncée, tandis qu’un texte sombre convient à une nuance 400 ou plus claire. Vérifiez toutefois chaque combinaison avec un outil de contrôle du contraste.
Outil gratuit · dans votre navigateur exécutions · aucun compte requis