Feuille de Triche des Couleurs Tailwind
Parcourez chaque couleur par défaut de Tailwind CSS (ardoise → rose, 50 → 900) et copiez n'importe quel hex d'un simple clic.
Réponse rapide: Feuille de Triche des Couleurs Tailwind : parcourez toutes les couleurs par défaut de Tailwind CSS (slate → rose, 50 → 900) et copiez n’importe quel code hexadécimal en un clic. Fonctionne entièrement dans votre navigateur, gratuitement et sans inscription.
Dernière mise à jour
Bon à savoir
Tailwind's default palette is deliberately perceptual: each named ramp runs from 50 (near-white) to 950 (near-black), and the numbers are tuned so that a step of 100 feels like roughly the same jump in lightness across every hue. That is why slate-200 and blue-200 read as the same weight even though the underlying hex values are unrelated — handy when you are building a UI that stays balanced as you swap accent colors.
A practical convention that saves a lot of back-and-forth: pick your text and background from opposite ends of the same or a neighboring ramp. Body text on slate-900 over a slate-50 card almost always clears WCAG AA, whereas mid-tones like 400 on 300 rarely do. When you are unsure, copy the two hex values here and drop them into our contrast checker before committing them to a design system.
The class label next to every swatch is the copy target you actually want: knowing a shade is emerald-500 lets you type the utility directly (bg-emerald-500, text-emerald-500) instead of pasting a raw hex and losing Tailwind's dark-mode and opacity modifiers. Reach for the hex only when you are working outside Tailwind — an email template, an SVG fill, or a native app style sheet.
One caveat: this is the stock v3/v4 default theme. If your project overrides theme.colors or uses the older v2 ramp (which stopped at 900), the names will match but the hex values may not. Treat the cheatsheet as the baseline, then verify against your own tailwind.config when a color looks off.
Questions fréquentes
- Le cheatsheet est-il gratuit?
- Oui — gratuit sans inscription.
- De quelle version de Tailwind sont-ils issus?
- Palette par défaut de Tailwind v3 — la version encore en usage actif partout.
- Puis-je copier plus que le hex?
- L'étiquette inclut le nom de la classe Tailwind (par exemple, blue-500) afin que vous sachiez exactement quelle utilité produit cette couleur.
- Sont-ils les mêmes que v4?
- Tailwind v4 conserve la même palette par défaut. Les thèmes personnalisés ne sont pas représentés ici.
- Des éléments sont-ils téléchargés?
- Non — chaque palette est intégrée dans la page.