Générateur de couleurs Tailwind

Transformez une couleur de marque en une échelle de nuances Tailwind complète 50-950 en OKLCH, avec contraste WCAG par nuance, directement dans votre navigateur.

Le générateur de couleurs Tailwind s'exécute entièrement dans votre navigateur. La couleur de marque que vous saisissez et les nuances générées sont calculées sur votre appareil et ne sont jamais téléversées vers ArrayKit.

Ouvrir le convertisseur de couleurs CSS

À propos de Générateur de couleurs Tailwind

Le générateur de couleurs Tailwind transforme une seule couleur de marque en une échelle de nuances complète 50, 100, 200 … 900, 950 que vous pouvez déposer directement dans tailwind.config. Au lieu de deviner les valeurs HEX, il interpole la luminosité en OKLCH — un espace perceptuellement uniforme — pour que chaque pas paraisse également espacé, et il ajuste votre saisie sur le pas le plus proche pour que la palette contienne réellement votre couleur de marque exacte. Chaque échantillon affiche son HEX ainsi que le rapport de contraste WCAG contre le noir et contre le blanc, pour que vous voyiez d'un coup d'œil quelles nuances sont sûres pour du texte. Copiez toute l'échelle sous forme de bloc theme.colors ou de propriétés personnalisées CSS. Collez n'importe quelle couleur CSS — HEX, rgb(), hsl() ou une couleur nommée comme rebeccapurple. Tout est calculé sur votre appareil ; les couleurs que vous saisissez ne quittent jamais le navigateur.

Fonctionnalités

Comment utiliser Générateur de couleurs Tailwind

  1. Saisissez ou choisissez votre couleur de marque (HEX, rgb(), hsl() ou un nom)
  2. Définissez un nom de couleur — il devient la clé, par ex. brand ou accent
  3. Lisez les badges de contraste WCAG par nuance pour repérer les pas sûrs pour du texte
  4. Basculez entre la sortie tailwind.config et les variables CSS
  5. Copiez le bloc, ou cliquez sur un seul échantillon pour récupérer son HEX

Exemple

Entrée

#7c3aed  (name: brand)

Sortie

colors: { brand: { 50: '#faf5ff', 500: '#7c3aed', 950: '#2e1065' } }

Un HEX violet se déploie en une échelle 50-950 espacée en OKLCH indexée sous brand.

Erreurs courantes et dépannage

Foire aux questions

Comment le générateur de couleurs Tailwind construit-il l'échelle 50-950 ?
Il convertit votre couleur en OKLCH, conserve la teinte, fait varier la luminosité sur les onze pas Tailwind, et réduit la chroma vers les extrêmes. OKLCH est perceptuellement uniforme, donc chaque pas paraît également espacé au lieu de se regrouper dans les tons moyens comme le font les rampes HSL simples.
Pourquoi ma couleur de marque tombe-t-elle sur 400 ou 600 au lieu de 500 ?
Le générateur ajuste votre saisie sur le pas dont la luminosité cible est la plus proche et y préserve votre couleur exacte. Une couleur de marque plus claire s'ancre près de 300-400 et une plus sombre près de 600-700, pour que l'échelle contienne toujours la couleur que vous avez tapée.
Que signifient les nombres de contraste sur chaque échantillon ?
Ce sont les rapports de contraste WCAG 2.x de cette nuance contre le noir pur et le blanc pur. Un badge vert vaut au moins 4,5:1 (AA pour le texte normal) et l'ambre au moins 3:1 (AA pour le grand texte ou l'UI). Utilisez-les pour choisir les associations texte et fond.
Puis-je coller rgb(), hsl() ou une couleur nommée au lieu de HEX ?
Oui. Toute chaîne de couleur CSS fonctionne — #7c3aed, rgb(124 58 237), hsl(262 83% 58%), ou un nom comme rebeccapurple. L'outil l'analyse, la convertit en OKLCH et construit l'échelle de la même façon.
Comment utiliser la sortie dans mon projet ?
Copiez le bloc tailwind.config dans theme.extend.colors et référencez des classes comme bg-brand-500 ou text-brand-800. Ou copiez la version en variables CSS et utilisez var(--brand-500) partout en CSS simple. Renommez la clé en changeant le champ du nom de couleur.
Les couleurs que je saisis sont-elles envoyées quelque part ?
Non. Toute l'échelle — l'analyse, les calculs OKLCH, les rapports de contraste et les deux formats de sortie — est calculée dans votre navigateur. La couleur de marque que vous tapez ou choisissez ne quitte jamais votre appareil et n'est pas téléversée vers ArrayKit.

Outils associés

Tous les outils ArrayKit