Générateur de charte graphique
Construisez votre identité visuelle
Une charte graphique cohérente est le fondement de toute identité visuelle professionnelle. Elle garantit que vos couleurs, typographies et éléments visuels sont harmonieux, cohérents et accessibles sur tous vos supports — site web, réseaux sociaux, documents imprimés. Pourtant, créer une charte graphique semble souvent réservé aux designers professionnels. Ce générateur de charte graphique vous guide en 9 étapes interactives : choix et personnalisation de votre palette de couleurs (avec vérification automatique des contrastes WCAG), sélection de vos typographies depuis une bibliothèque de 40+ polices professionnelles, génération de couleurs sémantiques (couleur de succès, erreur, avertissement…), création d’une palette monochrome, aperçu mockup live sur un site fictif, et export de vos ressources en CSS variables, tokens JSON compatibles Figma et rapport PDF complet. Un outil unique en son genre, gratuit et sans inscription, qui permet à tout entrepreneur de se doter d’une identité visuelle professionnelle solide et cohérente.
— ou —
Logo, photo de produit, moodboard… Formats : JPG, PNG, WEBP, SVG
— ou —
— ou —
- Couleur principale : la plus présente, représente l’identité de la marque (titres, logo, CTA).
- Couleur secondaire : complément ou contraste, utilisée pour les accents et les sous-titres.
- Couleur d’accent : petites touches pour attirer l’attention (boutons, icônes, liens).
- Couleur neutre / fond : blanc cassé, gris clair, beige — pour les fonds et les zones de texte.
- Couleur sombre : pour les textes principaux. Évitez le noir pur (#000000), préférez un noir doux (#171717, #1a1a2e…).
- Une palette de 3 à 5 couleurs est généralement suffisante. Au-delà, le risque de cacophonie visuelle augmente.
- HEX (#RRGGBB) : format universel pour le web et les logiciels de design. Le plus utilisé.
- RGB (r, g, b) : rouge, vert, bleu — chaque canal de 0 à 255. Standard pour les écrans.
- HSL (h°, s%, l%) : teinte (hue), saturation, luminosité. Intuitif pour les designers, idéal pour générer des variantes.
- HSB/HSV : teinte, saturation, luminosité (différent du HSL). Utilisé dans Photoshop, Illustrator.
- CMYK (c%, m%, y%, k%) : cyan, magenta, jaune, noir. Format print. ⚠️ Conversion approximative — demandez à votre imprimeur le profil ICC exact.
- CSS Custom Property : variable CSS prête à coller dans votre feuille de style.
Note : Les associations culturelles sont des tendances générales, non des règles absolues. Elles varient selon le contexte, l’époque et les sous-cultures.
Harmonies générées automatiquement à partir de votre palette. Cliquez sur un swatch pour copier le code HEX.
- Complémentaire : deux couleurs opposées sur le cercle chromatique (180°). Fort contraste, dynamique.
- Analogues : trois couleurs voisines (±30°). Harmonie douce et naturelle.
- Triadique : trois couleurs à 120° d’écart. Équilibrée et vibrante.
- Split-complémentaire : une couleur + les deux voisines de sa complémentaire. Contraste moins brutal que le complémentaire.
- Tétradique : quatre couleurs à 90° d’écart. Riche mais à manier avec précaution.
- Monochromatique : variantes d’une même teinte (tintes, tons, nuances). Élégant et cohérent.
Pour chaque couleur : 5 teintes claires (mélange avec blanc) + la couleur originale + 5 nuances sombres (mélange avec noir). Survolez pour voir le code HEX.
Tableau de contrastes entre toutes les paires de couleurs de votre palette. Référentiel : WCAG 2.1 & RGAA 4.1.
Choisissez parmi +40 polices pour les titres et le corps de texte. Prévisualisez le rendu en direct et exportez le CSS prêt à l’emploi.
- Contraste titre/corps : associez une police Serif pour les titres avec une Sans-serif pour le corps (ou vice-versa) pour créer du contraste visuel.
- Lisibilité avant tout : la police de corps doit être parfaitement lisible à petite taille (12-16px). Évitez les polices décoratives pour les longs textes.
- Cohérence de ton : Playfair Display / Cormorant = luxe, élégance. Montserrat / Poppins = moderne, dynamique. Merriweather / Lora = sérieux, institutionnel.
- Maximum 2 polices : une pour les titres, une pour le corps. Une troisième peut être ajoutée pour les légendes ou accents.
Le PDF généré contient : la palette principale avec tous les codes couleurs, la signification des couleurs, les variantes (teintes/nuances), le tableau de contrastes WCAG et des notes d’utilisation. Format A4 — prêt à transmettre à un graphiste.
