# Combinaisons de couleurs de logo qui marchent, avec codes [Canonical HTML page](https://gradiently.design/fr/guide/color-combinations-for-logos) Un logo doit survivre à une favicon, à une photocopie grise et à un en-tête en mode sombre. Ces duos et trios sont choisis pour cela, avec des codes et des contrastes que vous pouvez vérifier vous-même. ## The short version - La plupart des logos solides utilisent une ou deux couleurs, car chaque couleur de plus rend le symbole plus difficile à reproduire en petit, à l’impression et sur des fonds variés. - Un bon logo bicolore associe une couleur sombre à une couleur claire ou vive, pour que les formes restent distinctes même quand les couleurs sont difficiles à distinguer. - Deux couleurs de luminosité proche, comme un rouge moyen et un bleu moyen, semblent vibrer là où elles se touchent et perdent leur contour imprimées en gris. - Chaque logo doit aussi fonctionner en une seule couleur, en noir et en blanc, avant d’ajouter la moindre couleur. - Les couleurs d’un logo n’ont pas à être toute la palette de la marque : le symbole peut rester simple pendant que les fonds autour portent la couleur plus riche. Les **combinaisons de couleurs de logo** qui marchent le mieux associent une couleur sombre à une couleur claire ou vive, comme le marine et l’or, le vert forêt et la crème, ou l’anthracite et le citron vert. La différence de luminosité garde les formes lisibles à la taille d’une favicon et en niveaux de gris, tandis que la différence de teinte donne sa personnalité au symbole. Voici dix duos testés et trois trios avec codes hex et ratios de contraste, puis une façon rapide de vérifier n’importe quelle combinaison vous-même. ## Pourquoi les logos utilisent si peu de couleurs Un logo est la chose la plus reproduite qu’une entreprise possède. Il apparaît en icône de navigateur de 16 pixels, brodé sur une chemise, estampé sur un gobelet de café et imprimé en une couleur sur un ticket de caisse. Chaque couleur ajoutée est une chose de plus qui peut mal tourner à l’un de ces endroits. C’est pourquoi tant de symboles célèbres sont d’une seule couleur, et la plupart des autres de deux. Commencez en noir. Si la forme fonctionne en noir sur blanc et en blanc sur noir, la couleur ne peut qu’aider. Sinon, aucune combinaison ne la sauvera. [Les bases du design de logo](https://gradiently.design/fr/guide/logo-design-basics) traite de la forme ; cet article suppose la forme arrêtée. ## Dix combinaisons de logo en deux couleurs - Marine et or: `linear-gradient(90deg, #14213d 0%, #14213d 55%, #fca311 55%, #fca311 100%)` - Forêt et crème: `linear-gradient(90deg, #1b4332 0%, #1b4332 55%, #f1e9da 55%, #f1e9da 100%)` - Anthracite et citron vert: `linear-gradient(90deg, #2d2d2d 0%, #2d2d2d 55%, #c6f432 55%, #c6f432 100%)` - Prune et rose pâle: `linear-gradient(90deg, #4a1942 0%, #4a1942 55%, #f7c8d0 55%, #f7c8d0 100%)` - Bordeaux et sable: `linear-gradient(90deg, #6b0f1a 0%, #6b0f1a 55%, #e9d8a6 55%, #e9d8a6 100%)` - Encre et orange: `linear-gradient(90deg, #1c1917 0%, #1c1917 55%, #f97316 55%, #f97316 100%)` - Violet et menthe: `linear-gradient(90deg, #5b21b6 0%, #5b21b6 55%, #a7f3d0 55%, #a7f3d0 100%)` - Cobalt et blanc: `linear-gradient(90deg, #1d4ed8 0%, #1d4ed8 55%, #ffffff 55%, #ffffff 100%)` - Noir et rouge vif: `linear-gradient(90deg, #111111 0%, #111111 55%, #e63946 55%, #e63946 100%)` - Bleu canard et corail: `linear-gradient(90deg, #0f766e 0%, #0f766e 55%, #ff7f6e 55%, #ff7f6e 100%)` Dix duos présentés en coupes nettes, comme ils se rencontrent dans un symbole. Cliquez sur un échantillon pour copier son code. | Duo | Codes | Contraste | Ambiance | | --- | --- | --- | --- | | Marine et or | `#14213d` `#fca311` | 7,9:1 | Établi, confiant, un peu classique | | Forêt et crème | `#1b4332` `#f1e9da` | 9,2:1 | Naturel, artisanal, calme | | Anthracite et citron vert | `#2d2d2d` `#c6f432` | 10,7:1 | Énergique, sportif, technique | | Prune et rose pâle | `#4a1942` `#f7c8d0` | 9,4:1 | Chaleureux, beauté, boutique | | Bordeaux et sable | `#6b0f1a` `#e9d8a6` | 8,7:1 | Héritage, vin, hôtellerie | | Encre et orange | `#1c1917` `#f97316` | 6,2:1 | Pratique, amical, métiers et outils | | Violet et menthe | `#5b21b6` `#a7f3d0` | 7,0:1 | Moderne, ludique, logiciel | | Cobalt et blanc | `#1d4ed8` `#ffffff` | 6,7:1 | Clair, fiable, numérique | | Noir et rouge vif | `#111111` `#e63946` | 4,5:1 | Audacieux, urgent, éditorial | | Bleu canard et corail | `#0f766e` `#ff7f6e` | 2,2:1 | Vivant, mais seulement en formes qui se touchent, jamais du texte sur du texte | Ratios de contraste WCAG entre chaque duo. Au-dessus de 4,5:1, une couleur peut servir de lettrage sur l’autre ; les duos plus bas doivent se placer côte à côte en formes. Remarquez que le bleu canard et le corail font exception. Les deux couleurs ont une luminosité proche, donc des lettres corail sur un badge bleu canard seraient difficiles à lire et deviendraient une seule tache grise à l’impression en noir et blanc. Le duo fonctionne quand même quand les couleurs sont des formes séparées, comme un symbole bleu canard à côté d’un logotype corail, chacun sur un fond blanc ou sombre. Les chiffres viennent de la formule WCAG expliquée dans [contraste des couleurs et accessibilité](https://gradiently.design/fr/guide/color-contrast-accessibility). ## Combinaisons de logo en trois couleurs Trois couleurs conviennent aux symboles faits de pièces séparées : un symbole en tuiles, un logotype avec un point coloré, un ensemble de formes pour une marque d’enfants. Ancrez le trio avec une couleur sombre, puis choisissez-en deux nettement différentes en teinte. Les répartir autour du cercle, comme dans [les couleurs triadiques](https://gradiently.design/fr/guide/triadic-colors), évite qu’elles se fassent concurrence. - Mer profonde: #003049 - Coquelicot: #d62828 - Moutarde: #fcbf49 Primaire, version adulte. Un bleu sombre ancre un rouge et un jaune qui crieraient sinon. Bien pour les écoles, le sport et les jouets destinés aux parents. - Bleu ardoise: #264653 - Safran: #e9c46a - Corail brûlé: #e76f51 Chaleur côtière. Le bleu ardoise porte le logotype ; le safran et le corail brûlé remplissent les formes du symbole. - Nuit: #10002b - Magenta: #f72585 - Cyan: #4cc9f0 Numérique et fort. Le magenta et le cyan rayonnent contre une ancre presque noire, pour les symboles de musique, de jeu et de vie nocturne. ## Combinaisons de couleurs de logo à éviter ### À éviter - Rouge moyen et bleu moyen qui se touchent : ils semblent vibrer - Rouge pur et vert pur ensemble : difficile pour beaucoup de daltoniens - Jaune ou pastels pâles sur blanc : le symbole disparaît - Quatre couleurs ou plus de poids égal - Un dégradé comme seule version du logo ### À la place - Rendre l’une des deux bien plus sombre - Les séparer par la luminosité, pas seulement par la teinte - Mettre les couleurs pâles sur fond sombre, ou les cerner - Une couleur dominante, une ou deux de soutien - Une version à plat d’abord, le dégradé en variante Les logos en dégradé sont un cas particulier. Ils peuvent être superbes en grand, mais ils font des bandes à l’impression et se brouillent en petit. Gardez une version à plat en une ou deux couleurs et traitez le dégradé comme une variante ; [les logos en dégradé](https://gradiently.design/fr/guide/gradient-logo) explique comment construire les deux. ## Comment tester une combinaison de couleurs de logo 1. **Imprimez-le en niveaux de gris** Convertissez le logo en gris. Si les deux couleurs deviennent le même gris, le duo manque de différence de luminosité. 2. **Réduisez-le à 16 pixels** Regardez-le comme une icône d’onglet de navigateur. Les parties fines en couleur pâle disparaissent en premier. 3. **Inversez-le** Placez le logo sur votre couleur de marque la plus sombre et sur du blanc. Notez quelle couleur doit être remplacée dans chaque cas. 4. **Vérifiez le daltonisme** Passez-le dans un simulateur de daltonisme. Les duos rouge et vert se confondent souvent pour les personnes ayant les types de daltonisme les plus courants. 5. **Posez-le sur un vrai fond** Un logo repose rarement sur du blanc uni dans la vraie vie. Testez-le sur une photo, un dégradé et un fil chargé. Un design carré avec le mot Harbour placé sur un dégradé, des parties des lettres s’y fondant Un logotype posé en plein sur un fond vivant peut perdre une partie de ses lettres. Le même design carré où le fond est plus calme derrière le mot Harbour, si bien que chaque lettre se lit Le même logotype avec un fond qui s’apaise et s’assombrit derrière lui. Ce dernier test est celui où beaucoup de logos peinent. [Poser un logo sur un fond dégradé](https://gradiently.design/fr/guide/logo-on-gradient-background) détaille les techniques. Dans Gradiently, un Mark sait où se placent les mots et le logo : sa zone la plus calme passe derrière eux et l’encre Auto choisit clair ou sombre par ligne dans la palette propre au Mark, si bien qu’un logo simple en deux couleurs peut reposer sur un arrière-plan riche sans boîte derrière. ## Gardez le logo simple et laissez la marque être riche Le logo n’a pas à porter toutes les couleurs de votre marque. Beaucoup de marques gardent le symbole en une ou deux couleurs et mettent la profondeur dans leurs arrière-plans, leurs photos et leur typographie. Si vous choisissez ensuite la palette plus large, [les idées de couleurs de marque](https://gradiently.design/fr/guide/brand-color-ideas) en propose 30 pour démarrer, et [les célèbres logos en dégradé](https://gradiently.design/fr/guide/famous-gradient-logos) montre comment des marques établies équilibrent un symbole simple et une couleur expressive. ## FAQ ### Quelle est la meilleure combinaison de couleurs pour un logo ? Il n’y a pas de meilleur duo unique, mais une couleur sombre avec une couleur claire ou vive, comme le marine et l’or ou la forêt et la crème, fonctionne presque partout parce que les formes restent distinctes. ### Combien de couleurs un logo doit-il avoir ? Une ou deux pour la plupart des logos. Trois peuvent fonctionner pour des symboles faits de pièces séparées, mais chaque couleur de plus complique l’impression et les petites tailles. ### Quelles couleurs ne pas utiliser ensemble dans un logo ? Évitez les couleurs de même luminosité qui se touchent, comme le rouge moyen et le bleu moyen, et ne comptez pas sur le rouge contre le vert, que beaucoup de daltoniens ne distinguent pas. ### Un logo doit-il fonctionner en noir et blanc ? Oui. Un logo doit fonctionner en une couleur, en noir et en blanc, avant d’ajouter la couleur, car il sera imprimé et estampé en couleurs uniques. ### Un logo peut-il être un dégradé ? Oui, mais gardez une version à plat pour les petites tailles, la broderie et l’impression en une couleur, et utilisez le dégradé là où il a de la place.