Outil couleur pratique

Générateur de schéma couleur web

Créez un schéma couleur web avec couleurs primaires, neutres et accents pour hero, boutons, cartes et formulaires.

Ouvrir dans l’outil principalRetour à l’outil
EnglishItalianoEspañolFrançaisDeutsch

Ce que donne cette page

  • Transformez une couleur de marque en palette complète pour site web.
  • Équilibrez CTA, surfaces calmes et texte lisible.
  • Utilisez l échelle de tons pour fonds, bordures, hover et cartes.

Utile pour

  • Landing pages
  • Sites marketing
  • Home SaaS

Comment l’utiliser

Générateur paletteCréez des palettes accessibles, vérifiez le contraste WCAG, extrayez des couleurs d'images et exportez CSS, Tailwind, SCSS, JSON, SVG et PNG.Contrôle WCAGVérifiez le contraste entre texte et arrière-plan selon WCAG AA et AAA, testez des paires réelles et choisissez des couleurs lisibles.Extracteur imageExtrayez les couleurs dominantes des images PNG, JPG ou WebP dans le navigateur et créez des palettes exportables.
Puis-je utiliser cela avec le générateur principal?

Oui. Commencez ici, ouvrez l’outil Chromoforge avec la même couleur de base et exportez la palette.

Combien de couleurs faut-il pour le schéma d'un site ?

Une primaire, un accent, une échelle neutre pour les surfaces, bordures et textes, et quatre couleurs sémantiques pour succès, avertissement, erreur et information. Cela suffit à couvrir tous les états qu'un site vitrine ou une application web aura à afficher.

Qu'est-ce que la règle 60-30-10 ?

Elle répartit la mise en page par surface : environ 60% pour un neutre dominant, 30% pour une surface secondaire ou couleur d'appui, 10% pour l'accent qui porte les appels à l'action. C'est un guide de proportion, pas une règle d'accessibilité : chaque paire de texte doit toujours être vérifiée selon WCAG.