Transformez une couleur en systeme design utilisable.
Choisissez une couleur de base, genereez des palettes UI harmonieuses, verifiez le contraste WCAG, extrayez des couleurs d'images et exportez des tokens prets pour la production.
Palette generee
Cliquez sur une couleur pour copier son HEX. L'echelle de nuances sert aux boutons, etats, cartes et surfaces UI.
Echelle de nuances
Inspecteur de couleur
Affichez la couleur de base dans des formats pratiques. Copiez HEX, RGB, HSL et OKLCH pour implementation et documentation.
Apercu de vision des couleurs
Simulations approximatives de deficiences courantes de vision des couleurs. Ce sont des apercus design, pas un diagnostic medical.
Verificateur de contraste WCAG
AA exige 4.5:1 pour le texte normal et 3:1 pour le grand texte. AAA exige 7:1.
Verification manuelle
Meilleures combinaisons
Verifications automatiques avec blanc, noir et couleurs de palette.
Exporter les tokens
Copiez variables CSS, configuration Tailwind, SCSS, tokens JSON et cartes SVG/PNG telechargeables.
Telecharger la carte palette
Exportez une carte 1200x630 partageable en PNG ou SVG pour docs, reseaux et brand boards.
Generee localement dans le navigateur.
Extraire les couleurs d'une image
Deposez un PNG, JPG ou WebP. L'image est traitee localement dans votre navigateur.
Generateur de degrade
Creez des degrades CSS depuis la palette actuelle.
Apercu UI
Un petit mockup d'interface pour verifier que la palette fonctionne en contexte reel.
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 etats actifs.
- Utilisez les nuances 50/100 pour les surfaces, pas des couleurs saturees derriere les paragraphes.
- Verifiez le texte courant a 4.5:1 minimum avant publication.
- Testez les etats UI importants: hover, desactive, succes, avertissement et erreur.
- Gardez un seul accent fort pour conserver la coherence visuelle.
Outils et guides couleur
Pages dediees au contraste, palettes Tailwind, variables CSS, extraction d'images et degrades.
Comment creer une palette accessible
Partez d'une couleur de marque, choisissez une harmonie, verifiez le contraste et exportez les tokens.