Générateur d'échelle de couleurs de Tailwind CSS

Générateur d'échelle de couleurs de Tailwind CSS

Collez une seule couleur hexadécimale et obtenez instantanément une palette complète de 50 à 950 au style Tailwind, avec des étapes perçues de manière égale. L'échelle est construite dans l'espace de couleur OKLCH, donc chaque arrêt semble une progression de luminosité égale à l'œil humain — pas simplement une chute linéaire en RGB ou HSL.

Copiez directement le résultat dans votre tailwind.config.js, insérez-le comme propriétés CSS personnalisées ou variables SCSS, ou exportez-le au format JSON pour votre pipeline de tokens de conception.

Comment utiliser

1. Sélectionnez une couleur de base avec le sélecteur de couleur, ou collez une valeur hexadécimale comme #464aff.
2. Donnez un nom à la palette (par exemple primary, brand, ou accent) — cela devient la clé de l'objet dans le code exporté.
3. Choisir Tailwind v4 (OKLCH) pour le CSS moderne oklch() ou Tailwind v3 (hex) pour une sortie en hexadécimal classique.
4. Activez ou désactivez l'arrêt 950, puis déplacez le curseur de chroma vers le haut ou vers le bas pour augmenter ou réduire la saturation.
5. Sélectionnez le format d'exportation — configuration de Tailwind, propriétés CSS personnalisées, variables SCSS ou JSON — puis copiez ou téléchargez le code généré.
6. Cliquez sur n'importe quelle couleur dans la prévisualisation pour copier sa valeur hexadécimale dans le presse-papier.

Caractéristiques

• Mathématiques perceptuelles OKLCH – Interpoler la luminosité et la chroma dans l'espace de couleur OKLCH afin que chaque étape de la gamme de 50 à 950 semble une progression égale à l'œil humain.
• Échelle complète de 50 à 950 – Génère la palette complète de 11 étapes, avec l'option de supprimer l'arrêt 950 si vous n'avez besoin que des 10 classiques.
• Prévisualisation en temps réel – Aperçu de toutes les teintes d'un coup d'œil, cliquez sur n'importe quelle couleur pour copier sa valeur hexadécimale, et ajustez immédiatement l'échelle en tapant.
• Vérificateur de contraste WCAG – Chaque étape est évaluée sur des fonds blancs et noirs avec des badges de passage AA ou AAA.
• Multiples cibles d'exportation – Sortie au format tailwind.config.js, :root variables CSS, variables SCSS ou tokens de conception simples.
• Contrôle de l'augmentation de la chroma – Un seul curseur échelle la saturation sur toutes les étapes, permettant ainsi d'augmenter la luminosité ou de réduire la palette sans modifier le ton.
• Sécurité du gamut – La chroma est automatiquement limitée à chaque niveau de luminosité afin que les valeurs hexadécimales générées soient toujours affichées dans sRGB.