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 implémentation et documentation.

#E24B4A

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

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 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.
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.Palette de couleurs accessibleConcevez des palettes qui gardent le texte lisible et compatibles WCAG.Générateur de palette de marqueCréez une palette de marque depuis un logo ou une couleur primaire et exportez variables CSS et tokens.Générateur palette graphiquesGénérez des couleurs distinctes pour dashboards et dataviz, avec contrôle contraste et daltonisme.Simulateur daltonisme couleurPrévisualisez palettes pour deuteranopie, protanopie et tritanopie afin de repérer les combinaisons risquées.Convertisseur couleur HEX, RGB, HSL et OKLCHConvertissez les couleurs entre HEX, RGB, HSL et OKLCH avec des valeurs prêtes pour CSS et documentation.Générateur harmonie couleurGénérez harmonies complémentaires, analogues, triadiques, split, tétradiques et monochromatiques.Générateur de palettes de couleursGénérez des palettes harmonieuses depuis une couleur de base avec des règles complémentaires, analogues, triadiques et monochromatiques.Générateur de nuances couleurGénérez une échelle 50-950 depuis une couleur de base pour surfaces UI, bordures, hover et dark mode.Générateur palette dark modeCréez des palettes dark mode avec texte lisible, surfaces muted, bordures et accents accessibles.Générateur de design tokensCréez des design tokens couleur depuis une palette et exportez CSS variables, SCSS maps, JSON et Tailwind.Générateur thème shadcnMappez une palette vers des variables CSS type shadcn pour background, foreground, primary, muted, accent et destructive.Générateur de schéma couleur webCréez un schéma couleur web avec couleurs primaires, neutres et accents pour hero, boutons, cartes et formulaires.


Comment créer une palette accessible
Partez d'une couleur de marque, choisissez une harmonie, vérifiez le contraste et exportez les tokens.
Complémentaire ou analogue ?
La palette complémentaire utilise des couleurs opposées sur la roue et donne un contraste fort. L'analogue utilise des teintes voisines, plus douce, adaptée aux interfaces denses.
Pourquoi le contraste compte-t-il ?
Un texte peu contrasté est joli en maquette et illisible sur l'écran de ceux qui s'en servent. Pour le texte courant, visez au minimum WCAG AA, soit 4,5:1.
Compatible avec Tailwind ?
Oui. L'export Tailwind produit l'échelle de la couleur primaire de 50 à 950, plus la couleur d'accent quand elle existe.
Les images sont-elles envoyées ?
Non. L'extraction des couleurs utilise canvas dans votre navigateur. Aucun fichier ne quitte l'appareil.