Outil couleur pratique

Générateur de palette de marque

Créez une palette de marque depuis un logo ou une couleur primaire et exportez variables CSS et tokens.

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

Ce que donne cette page

  • Associez la couleur de marque aux rôles primary, accent, neutral et semantic.
  • Vérifiez le contraste WCAG du texte sur la couleur de marque.
  • Exportez des variables utilisables sans renommer chaque couleur.

Utile pour

  • Systèmes de marque
  • Landing startup
  • Guides de style

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 dans une palette de marque ?

Un système de marque utilisable demande une couleur primaire, une ou deux secondaires, un accent pour les appels à l'action et une échelle neutre de cinq à neuf paliers. Au-delà, les couleurs deviennent décoratives et les états des composants sont plus difficiles à garder cohérents.

La couleur de marque peut-elle servir pour le texte ?

Rarement. La plupart des couleurs de marque saturées restent sous le ratio de 4.5:1 exigé pour le texte courant sur blanc. Gardez un neutre sombre pour les longs textes et réservez la couleur de marque aux titres, boutons, liens et accents, où 3:1 suffit pour le grand texte.