Transformez une couleur en système design utilisable.
Choisissez une couleur de base, générez des palettes UI harmonieuses, vérifiez le contraste WCAG, extrayez des couleurs d'images et exportez des tokens prêts pour la production.
Palette générée
Cliquez sur une couleur pour copier son HEX. L'échelle de nuances sert aux boutons, états, cartes et surfaces UI.
Échelle de nuances
Inspecteur de couleur
Affichez la couleur de base dans des formats pratiques. Copiez HEX, RGB, HSL et OKLCH pour implémentation et documentation.
Aperçu de vision des couleurs
Simulations approximatives de déficiences courantes de vision des couleurs. Ce sont des aperçus design, pas un diagnostic médical.
Vérificateur de contraste WCAG
AA exige 4.5:1 pour le texte normal et 3:1 pour le grand texte. AAA exige 7:1.
Vérification manuelle
Meilleures combinaisons
Vérifications automatiques avec blanc, noir et couleurs de palette.
Exporter les tokens
Copiez variables CSS, configuration Tailwind, SCSS, tokens JSON et cartes SVG/PNG téléchargeables.
Télécharger la carte palette
Exportez une carte 1200x630 partageable en PNG ou SVG pour docs, réseaux et planches de marque.
Générée localement dans le navigateur.
Extraire les couleurs d'une image
Déposez un PNG, JPG ou WebP. L'image est traitée localement dans votre navigateur.
Générateur de dégradé
Créez des dégradés CSS depuis la palette actuelle.
Aperçu UI
Un petit mockup d'interface pour vérifier que la palette fonctionne en contexte réel.
Checklist production
Une courte checklist pour utiliser la palette sur un vrai site.
- Utilisez la nuance 500 comme couleur de marque principale et 600/700 pour hover et états actifs.
- Utilisez les nuances 50/100 pour les surfaces, pas des couleurs saturées derrière les paragraphes.
- Vérifiez le texte courant à 4.5:1 minimum avant publication.
- Testez les états UI importants: hover, désactivé, succès, avertissement et erreur.
- Gardez un seul accent fort pour conserver la cohérence visuelle.
Outils et guides couleur
Pages dédiées au contraste, palettes Tailwind, variables CSS, extraction d'images et dégradés.
Comment créer une palette accessible
Partez d'une couleur de marque, choisissez une harmonie, vérifiez le contraste et exportez les tokens.