Couleurs Tailwind CSS : toute la palette par défaut

Couleurs Tailwind CSS

Couleurs Tailwind CSS : palette v4 complète, cliquez pour copier | We.Inc

Chaque couleur par défaut de Tailwind CSS v4, de 50 à 950, en échantillons à cliquer pour copier sous forme de classe, de variable CSS, de valeur OKLCH ou d'hex, plus comment ajouter et retirer des couleurs avec @theme.

Tailwind CSS v4 fournit une palette par défaut de familles de couleurs nommées, du rouge et du bleu aux neutres comme slate, zinc et stone, chacune en 11 nuances de 50 (la plus claire) à 950 (la plus foncée), plus le noir et le blanc. La version 4 définit chaque nuance en OKLCH sous forme de variable CSS comme --color-blue-500, que vous utilisez avec bg-blue-500.

Où une couleur de la palette apparaît dans Tailwind v4

Cliquez sur n'importe quel échantillon pour le copier dans le format voulu : la classe utilitaire, la variable CSS, la valeur OKLCH réellement utilisée par Tailwind, ou un hex approximatif pour les outils qui n'acceptent que l'hex. Filtrez par nom pour aller directement à une famille. Le tableau complet sous les échantillons liste chaque nuance telle que la définit theme.css.

Questions fréquentes

Pourquoi les couleurs de Tailwind v4 sont-elles en OKLCH plutôt qu'en hex ?

La version 4 définit sa palette en OKLCH, dont le canal L correspond à la luminosité perçue, ce qui permet d'espacer les nuances selon leur clarté apparente. Il atteint aussi des couleurs plus vives sur les écrans à large gamut. La fonction oklch() fonctionne dans les principaux navigateurs depuis mai 2023, donc les navigateurs lisent directement les valeurs.

Comment ajouter une couleur personnalisée dans Tailwind v4 ?

Déclarez une variable dans l'espace de noms --color- à l'intérieur de @theme dans votre CSS, par exemple --color-midnight: #121063. Tailwind génère alors bg-midnight, text-midnight et les autres. Aucune entrée dans tailwind.config.js n'est nécessaire.

Comment retirer les couleurs par défaut que je n'utilise pas ?

Définissez la famille à initial dans @theme, par exemple --color-lime-*: initial. Cela retire chaque nuance de lime des utilitaires et des variables générés.

Comment rendre une couleur semi-transparente ?

Ajoutez une barre oblique et une opacité à la classe : bg-sky-500/50 pour 50%, ou une valeur arbitraire comme bg-pink-500/[71.37%]. Dans votre propre CSS, la fonction --alpha() fait la même chose avec une variable.

Peut-on utiliser une couleur Tailwind dans du CSS classique ?

Oui. Chaque couleur de la palette est exposée sous forme de variable CSS, donc color: var(--color-blue-500) fonctionne dans toute feuille de style qui charge Tailwind.

Lire les numéros de nuance

Redéfinir une seule nuance

La valeur OKLCH de chaque nuance

Ce sont les valeurs du fichier theme.css de Tailwind. Le noir vaut #000 et le blanc #fff.

Palette par défaut de Tailwind CSS v4 en OKLCH

Personnaliser les couleurs avec @theme

Ajouter des couleurs de marque

Les variables de l'espace de noms --color- deviennent des utilitaires. Ici, bg-brand-500 et text-ink fonctionnent à côté des couleurs par défaut.

Retirer les familles inutilisées

Définir un espace de noms à initial le supprime. La première ligne retire une famille ; la seconde retirerait toutes les couleurs par défaut.

Panneau teinté avec texte assorti

Un fond pâle et une nuance de texte foncée de la même famille, plus une bordure plus foncée de deux crans que le fond.

Utiliser les variables de la palette dans votre propre CSS

Pratique pour les widgets tiers auxquels vous ne pouvez pas ajouter de classes.

Cliquez sur un échantillon pour le copier

Ce que copie un clic

Classe

Variable CSS

OKLCH

Hex (approximatif)

Préfixe utilitaire

Filtrer les couleurs

{v} copié

Rien n'a encore été copié.

Aucune famille de couleurs ne correspond à ce nom.

Commencer gratuitement · Sans carte bancaire

Voir aussi: Guides

Produit

Pour qui

Fonctionnalités

Ressources

Entreprise

Plan du site