Outil gratuit dans le navigateur - aucun envoi - aucun compte

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.

Ouvrir l'outil
EnglishItalianoEspañolFrançaisDeutsch

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 implementation et documentation.

#E24B4A

Aperçu de vision des couleurs

Simulations approximatives de deficiences courantes de vision des couleurs. Ce sont des apercus design, pas un diagnostic medical.

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

Ratio
--
Texte d'interface lisible

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 brand boards.
Générée localement dans le navigateur.


Extraire les couleurs d'une image
Deposez un PNG, JPG ou WebP. L'image est traitee 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 saturees derriere les paragraphes.
  • Vérifiez le texte courant a 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 coherence visuelle.


Outils et guides couleur
Pages dédiées au contraste, palettes Tailwind, variables CSS, extraction d'images et dégradés.
Vérificateur de contraste WCAGVérifiez si le texte et l'arrière-plan respectent les ratios WCAG AA et AAA.Générateur de couleurs TailwindCréez une échelle Tailwind 50-950 depuis une couleur de marque.Générateur de variables couleur CSSGénérez des custom properties CSS et tokens design depuis une palette.Extracteur de couleurs d'imageExtrayez les couleurs dominantes des images localement dans le navigateur.Générateur de dégradés CSSCréez des dégradés CSS linéaires, radiaux et coniques depuis une palette.


Comment créer une palette accessible
Partez d'une couleur de marque, choisissez une harmonie, vérifiez le contraste et exportez les tokens.