Transformez une seule couleur de marque en un système de design complet avec 50 à 950 échelles de nuances, des jetons sémantiques pour les modes clair et sombre, et des associations de contraste conformes à l'accessibilité. Exportez en tant que propriétés personnalisées CSS, configuration Tailwind ou jetons de design pour une utilisation immédiate en production.
Générez des échelles de 50 à 950 pour chaque couleur de votre palette de marque. Chaque nuance est perceptuellement uniforme et testée pour des pas de luminosité cohérents.
Génère automatiquement des jetons de couleur sémantiques qui fonctionnent à la fois en mode clair et sombre. Les couleurs de surface, de texte et d'accent sont mappées pour les deux thèmes.
Chaque association de couleurs est vérifiée par rapport aux ratios de contraste WCAG AA. Vous verrez quelles combinaisons fonctionnent pour le texte, l'interface utilisateur et les éléments décoratifs.
Exportez l'intégralité de votre système de couleurs en tant que propriétés personnalisées CSS, configuration Tailwind CSS, carte SCSS, jetons JSON ou Guide de style partageable.
Les jetons sémantiques associent les couleurs à leur fonction — comme 'background', 'text-primary', 'border', 'error' — plutôt qu'à des valeurs spécifiques. Cela facilite l'échange de thèmes (clair/sombre) ou le changement de marque sans toucher au code des composants.
Nous utilisons l'espace colorimétrique OKLCH pour des paliers de luminosité perceptuellement uniformes. À partir de votre couleur de marque, nous calculons 10 nuances qui semblent régulièrement espacées à l'œil humain, contrairement aux simples ajustements de luminosité HSL.
Commencez par votre couleur principale. Le générateur crée un système complet autour d'elle. Vous pouvez ajuster les couleurs secondaires et d'accentuation dans le système généré.
Oui. La configuration Tailwind exportée utilise le format de propriété personnalisée CSS compatible avec Tailwind v3 (tailwind.config.js) et v4 (@theme inline).