Trouve l’inspiration pour tes associations de couleurs avec des combinaisons élégantes et des exemples

/

illustration article association de couleurs

Cet article prend environ 15 minutes à lire.

J Je te propose de nourrir ton inspiration avec 63 combinaisons classées par couleurs et 129 exemples de designs qui exploitent parfaitement les couleurs.

Nous verrons ensuite une approche concrète de la théorie des couleurs pour réaliser tes palettes personnalisées.

Découvre des idées classiques et d’autres plus audacieuses et innovantes.

Je te propose des idées de palettes de couleurs et des exemples en partant d’une couleur dominante.

Les combinaisons qui vont bien avec le JAUNE

bandeau site jaune

Le jaune dans le design

Le jaune attire l’attention et s’utilise à petites doses dans ses teintes les plus soutenues. Il fatigue rapidement l’œil en grande quantité.

Les jaunes pastel évoquent la douceur et fonctionnent bien pour les jeunes enfants sans être connotés comme le bleu et le rose.

Le jaune est apaisé par le marron, le noir, le blanc ou les teintes crème.

Les associations de couleurs

Le jaune ensoleille le bleu.

palette

L’or se révèle avec le rose.

palette

Le rouge framboise écrasée s’harmonise facilement avec le jaune.

palette

Le violet contraste élégamment avec le jaune.

palette

Contre-indication

Le jaune teinté de noir donne souvent des résultats peu flatteurs.
Les jaunes et verts intenses vibrent à proximité.

Exemple d’utilisations

Le jaune ponctue et dynamise une page sobre.

pages jaunes extrait

Cela coule de source pour La Poste.

la poste

Un encadré qui contraste et anime la page.

artefactgroup

Le jaune de cette newsletter est tempéré par l’usage du blanc et le gris du visuel.

karcher

Le jaune assombri fonctionne bien avec le gris anthracite.

mixd

Le bleu foncé contraste élégamment avec une teinte qui vire vers l’orange.

corona

Un jaune légèrement délavé s’accorde avec un gris perle pour une création élégante.

enekia

Le jaune très clair procure un aspect vintage.

kettle

Un bas de page intégralement jaune.

raggededge

Le jaune est complexe à utiliser en texte sur fond blanc et demande une police épaisse et de belle taille.

souylcycle

Une palette de teintes avec la couleur ORANGE

bandeau site orange

L’orange dans le design

La couleur orange invite à l’action ce qui la prédispose aux boutons.

En grande quantité, sa visibilité éclipse les autres contenus.

Les associations de couleurs

Le violet apporte une note intéressante avec l’orange, surtout dans les teintes proches du gris.

palette

Le bleu pacifie l’orange avec un beau contraste.

palette

L’orange le plus vif s’assagit avec les gris.

palette

L’orange associé au noir penche vers le luxe.

palette

Contre-indication

Les années 70 ne sont jamais loin si la couleur orange est associée au jaune et au marron.

Exemples de créations

Une création très vive avec plusieurs teintes d’orange.

easyjet extrait

Un orange vif en petites touches et une version assagie.

alibaba

L’orange souligne les éléments importants de la page.

angieslist

Pourquoi ne pas envisager une teinte pèche ?

rizonapp

Les touches d’orange sont valorisées par les grandes surfaces de blanc et de gris.

penguin

Un orange noirci contraste efficacement avec le noir et le bleu foncé.

Cerveza Burrita

Une teinte d’orange très originale.

lucifer and co

Une belle mise en avant de cette citation.

archer-group

Un festival de couleur osé, mais qui fonctionne.

eight o clock

Hermès fait figure d’exception avec l’utilisation de l’orange dans l’univers du luxe.

hermès

Une présentation qui ne manque pas d’attirer l’œil.

north2

Une atmosphère douce.

soupagency

Gris et orange, classique mais efficace.

supra

Un orange très pâle juxtaposé avec la version pure.

uzuz

Un message clair : contactez-nous.

suntrust

Les plus belles associations de couleurs du ROUGE

bandeau site rouge

Le rouge dans le design

Le rouge stimule et s’utilise avec parcimonie.

Les rouges lumineux communiquent l’énergie. Les bordeaux sont plus raffinés et élégants.

Les associations de couleurs

Le rouge s’équilibre avec le marron, le gris, le beige ou le blanc.

palette

Les bleus grisés tempèrent le rouge tout en offrant un contraste intéressant.

palette

Le noir s’avère compliqué à manier en complément du rouge, mais fonctionne avec les teintes plus sombres.

palette

Le jaune n’est pas à exclure en évitant les couleurs de même intensité.

palette

Une touche de rouge, un orangé corail et un gris/violet assurent une création originale.

palette

Contre-indication

L’écologie ou les métiers qui réclament de la rigueur ne sont pas compatibles avec le côté sanglant et orienté action du rouge.

Mieux vaut réserver la combinaison du rouge et du vert à la période de Noël.

Exemples de designs réussis

Le rouge peut se faire sage quand il veut.

firstborn

Une teinte de rouge framboise pour un fast-food qui change de la teinte pure habituelle.

five guys

Un rouge très élégant combiné avec du gris.

gorillacoffee
fontyou

La totale rouge.

kitkat

Cette teinte autorise de grands aplats sans agresser l’œil.

superception

Des petites touches pour une efficacité renforcée.

qualtrics

Jamais trop de rouge chez Coca.

coca cola

Classique : le rouge réservé au menu et au bouton.

dineamic

Efficace et élégant : oui, c’est possible.

luppesmelles

Quelle couleur complémentaire pour le ROSE ?

bandeau site rose

Le rose dans le design

Le rose contraste avec des teintes neutres et sombres.

Les associations de couleurs

Le rose perd rapidement de son attrait en grande quantité.

palette

Le bleu contraste agréablement avec les roses assombris ou pastels.

palette

Le rose peut être sérieux en présence de gris foncé et de noir.

palette

Le rose et le jaune ne présentent pas toujours un grand intérêt mais je trouve cette palette attractive.

palette

Le rose et le noir forment une combinaison intéressante surtout avec les roses clairs.

palette

Le vert et le rose donnent des résultats étonnants, surtout dans des teintes pastel.

palette

Le violet foncé s’harmonise aisément avec le rose mais vibre dans les teintes vives.

palette

Contre-indication

La surutilisation du rose vire rapidement au kitch.

Exemples

Un rose neutre qui ne manque pas d’attrait.

duckduckgo


Le rose en version fluo.

fruitRouge extrait

Il fallait oser ce dégradé rose et jaune.

asana

Un rose très sage avec les pastels.

emberjs

Un rose agressif.

reduc privileges

Le rose couplé avec cette création multicolore me perturbe. Et toi ?

quizup

Original la juxtaposition du rose et du blanc en conservant une couleur de texte identique.

alessandro risso

Enfin du rose assumé en version féminine sans pourtant trop en faire.

laura busche

Un rose qui attire le regard.

method home

Je n’aurais jamais envisagé ce dégradé rose en gris.

minglabs

Oui, mais non…

publicartfund

Le rose raffiné et masculin ?

squares conference

Le visuel en superposition apporte de la nuance.

mailchimp

Le blanc aide à faire passer cette grande quantité de rose.

wufoo

Des palettes inspirantes avec le VIOLET

bandeau site violet

Le violet dans le design

Le violet sombre (aubergine) porte bien le concept de luxe et d’exclusivité.

Les teintes claires sont plus printanières et romantiques.

Cette couleur fonctionne bien en couleur secondaire.

Les associations de couleurs

Avec le gris, le violet produit une ambiance sophistiquée mais pas follement joyeuse.

palette-violet-gris

Les jaunes et beiges sont agréables mais ternes.

palette

Le noir apporte un aspect gothique contrarié par l’orange dans cet exemple.

palette

Le vert et le violet sont les meilleurs ennemis avec de magnifiques clashs.

palette

Contre-indication

Le violet peut être apaisant et relaxant, ce qui en fait généralement un mauvais choix pour attirer l’attention. Les violets foncés et profonds sont incompatibles avec les produits discounts.

Exemples de créations

Le violet sombre ne se prend pas forcément au sérieux.

carbonmade

Le message : nous sommes sérieux mais sympas.

crowneplaza

Une création électrisante.

highfive

Violet et rose sans tomber dans la caricature.

lyft

Une combinaison efficace de rose et de bleu.

boursorama

Le violet séducteur.

campaign monitor

Un dégradé sobre.

rb

Les icônes ressortent parfaitement sur le blanc.

scribd

Le gris teinté de violet met en valeur une version intense de la couleur.

huge

Ces 2 teintes juxtaposées font très « enfant modèle ».

iupac

Une teinte proche du rose.

solidgiant

Du violet et du bleu sans être froid.

site spotify

Le motif apporte beaucoup au dégradé.

tesora

Une teinte proche du bleu.

viber

Les coloris complémentaires du BLEU

bandeau site bleu

Le bleu dans le design

La nuance de bleu impacte fortement la perception. Le bleu pastel et le bleu navy ont des effets quasiment opposés.

Il est préférable d’éviter le bleu pur qui est très (trop) utilisé.

Les associations de couleurs

Le turquoise et les bleus clairs s’équilibrent parfaitement avec le marron.

palette

Le bleu est égocentrique et apprécie sa propre compagnie.

palette

Avec du blanc toutes les excentricités sont pardonnées.

palette

Avec le gris, le bleu se veut sérieux et axé entreprise même avec un orange vif en complément.

palette

L’orange est un bon partenaire de jeu du bleu avec dynamisme bienvenu.

palette

Le noir s’intègre difficilement dans une palette bleue, mais s’accorde parfaitement avec les teintes les plus dynamiques.

palette

Le vert est un compagnon paisible du bleu.

palette

Le jaune s’associe naturellement au bleu.

palette

Contre-indication

En trop grande quantité le bleu, en particulier les teintes les plus sombres, génère un aspect froid et distant qui peut être répulsif.

En monochrome, le bleu est trop calme, voire d’un ennui profond.
Les métiers de la restauration ou les achats d’impulsion ne s’accordent pas avec l’aspect calme du bleu.

La combinaison du bleu et de rouge purs fatigue immédiatement l’œil.

Exemples concrets d’utilisation

Un dégradé très sage.

ifremer extrait

Une petite touche d’orange pour égayer un bleu sombre.

bitly

Un bleu attractif et lumineux.

boords

Une utilisation classique sans excentricité.

philips

Le bleu et le gris ne communiquent pas une franche impression d’énergie.

plaxo

Le message : sérieux à 100%.

protonmail

Un petit aspect rock.

bert

Sage mais pas trop.

contently

Une création apaisante avec le vert.

happy in my skin

Le bleu féminin.

kings of leon

Le bleu tempère l’aspect chargé du visuel.

made by field work

Un bleu en parfait accord avec le blanc.

meddeva

Le bleu clair se conjugue sans fausse note avec le rose.

obaku

L’orange secoue ce bleu très académique.

orangina

Le bleu reste une valeur refuge pour les graphistes.

unbounce

Un bleu vert très doux.

whatsapp

Les couleurs qui s’harmonisent avec le VERT

bandeau site vert

Le vert dans le design

Le vert permet d’associer sa marque à l’écologie. Le marron renforce l’aspect nature et environnement.

L’effet relaxant du vert tempère des sujets anxiogènes.

Les verts clairs transmettent l’énergie. Les verts olive proches des teintes naturelles symbolisent le végétal. Le vert fonctionne bien en palette monochrome.

Les associations de couleurs

Le vert, par ses teintes variées, se suffit à lui-même.

palette

Le rose s’associe naturellement avec le vert.

palette

Le marron, autre couleur associée à la nature, est une combinaison à envisager pour des activités traditionnelles.

palette

Le jaune illumine le vert.

palette

Le gris conforte l’aspect calme du vert.

palette

Le bleu et le vert doivent contraster pour ressortir visuellement.

palette

Contre-indication

Le vert se prête moins au luxe et aux nouvelles technologies.

Les verts et violets de même intensité vibrent.

Exemples de graphismes

Une ambiance apaisante.

agricool au design vert

Le gris ne parvient pas à le contenir ce vert tout sauf zen.

RED extrait

3 couleurs froides qui ne congèlent pas.

duolingo

Un vert teinté de noir.

haveanicedayonline

Une création vivante composée quasi exclusivement de vert.

cash

Très sage (trop ?)

feedly

Un vert dynamique.

kik

Une association de vert et de gris ne transpire pas la bonne humeur.

mongodb

Non, cela peut fonctionner.

ning

Le vert tendre en version punk. Décoiffant !

after shock

Le vert ami de la nature (si tu ne t’attardes pas trop sur les visuels).

agrauxine

Le vert tranquille.

twentythree

Les teintes à associer au BLANC

bandeau site blanc

Le blanc dans le design

Le blanc se conjugue avec l’ensemble des couleurs. Il met en valeur les autres éléments.

Le blanc assure la lisibilité d’un texte. Il est conseillé de ne pas utiliser du blanc pur mais une nuance très légèrement teintée.

Les associations de couleurs

Tu remarqueras que je n’utilise que très rarement le blanc 100 % dans ces propositions.

Le blanc se fait très sage avec le bleu.

palette

Le gris n’apporte pas de relief au blanc. Seule une troisième couleur sauvera la création.

palette

Le blanc valorise le jaune.

palette

Le marron est un choix à envisager avec le blanc pour contrebalancer des visuels puissants.

palette

Le noir et le blanc 100 % remplacés par des teintes plus subtiles.

palette

Le blanc laisse un espace d’expression à 2 teintes proches comme ces oranges rouille.

palette

Le rouge s’exprime pleinement en présence du blanc.

palette

L’éclat du vert s’atténue avec le blanc.

palette

Les violets grisés perdent leur effet déprime au contact du blanc.

palette

Contre-indication

Absolument aucune. À consommer sans modération.

Exemples de visuels

Le blanc laisse s’exprimer les visuels.

apple extrait

Ce n’est pas techniquement du blanc mais l’on ressent l’effet purifiant.

nest

Le rouge n’en est que plus vivant.

qualtrics

Peut-être un poil trop blanc.

freckled

Le produit rien que le produit.

gin drouin

Un contraste maximal avec le noir sans pour autant être rasoir.

ilovetypography

La souplesse du blanc autorise une liberté au niveau du design.

monsieur caillou

Épuré à l’extrême. Le vélo en version divine.

nua bikes

Des touches subtiles de couleurs que seul le blanc autorise.

white corner creative

Des photos en noir et blanc contrastées pour ressortir avec un aplat blanc.

vice

Le blanc allège les visuels chargés.

whatsapp

Les coloris qui s’assemblent avec le GRIS

bandeau site gris

Le gris dans le design

Le gris apporte de la subtilité en remplacement des noirs ou des blancs à 100 % dans les créations.

Il est d’une grande utilité pour les fonds des sites et délimite des espaces sans surcharger visuellement.

Les associations de couleurs

Le gris fonctionne avec quasiment toutes les couleurs, en particulier avec les plus vives.

Les gris foncés plus masculins équilibrent les rouges profonds et les jaunes éclatants.

palette

Les gris clairs forment des ambiances douces et féminines avec les pastels : roses, verts et bleus pâles, lavande…

palette

Le marron prend des airs rassurants en présence du gris.

palette gris marron orange 2

Le rose est un bon complément du gris pour quitter l’univers des enfants sans pour autant couper les ponts.

palette

Le rouge s’assagit en présence du gris.

palette

Le vert ajoute une notion de nature au gris connoté béton.

palette

Les gris clairs mettent en valeur le violet (surtout ceux bleutés).

palette

Contre-indication

Les rares exceptions à la flexibilité du gris sont la juxtaposition de gris foncé avec les bleus et verts soutenus.

Les marques destinées aux enfants ne bénéficient pas des valeurs adultes du gris.

Exemples de réalisations

Sérieux, discipline et rigueur. Le premier qui plaisante, c’est la porte.

bombardier

Le vert humanise le gris foncé.

hootsuite

Orange et gris une histoire d’amour.

jawbone

Les contrastes forts ne le rendent que plus désirable.

zoom

Sage et attractif.

agency forty

Minimaliste et reposant.

buildinamsterdam

Un effet intrigant.

leonardo di caprio

Le visuel clair brille sur le fond foncé.

onlycoin

Le contraste est vivifiant. L’image du bas vole littéralement l’attention.

salewa

Les éléments en orange ressortent bien à petites doses.

storyful

Une impression de sérénité avec un filtre gris chaud.

viadeo

L’impression de sécurité est parfaitement exprimée.

volvo cars

Le gris apporte toute sa force au visuel.

snaga job

Des palettes élégantes avec le NOIR

bandeau site noir

Le noir dans le design

Le noir prend du relief en présence de couleurs chaudes ou claires.

Les associations de couleurs

Le noir et le jaune flashy détonnent.

palette

Les gris manquent de relief en présence de noir.

palette

Le marron tempère le noir. Une couleur lumineuse est bienvenue pour dynamiser.

palette

Le rose perd sa connotation enfantine en présence de noir.

palette

Contre-indication

Le noir oppresse en grande quantité et empêche les créations de respirer.

Le noir couplé au bleu foncé plombent facilement l’ambiance. Le noir et le rouge profond ne font pas toujours bon ménage avec un aspect film de vampires. Le noir n’offre pas assez de contraste avec le violet foncé et vibre rapidement en présence de violet clair.

Exemples d’associations

Pour moi, noir + rouge = danger.

netflix

Le vert « venimeux » explose sur fond noir.

razerzone

Le noir apporte une touche de raffinement au rose fluo.

6tematik

Rêve ou cauchemar ?

dreaming with jeff

Le noir et blanc de cette marque de snowboards est en complet décalage avec le secteur.

eneavor snowboards
eneavor snowboards

Effet polar garanti.

sagmeisterwalsh

Les visuels paraissent plus vivants.

vins saint aubin

Les meilleures associations avec le MARRON

bandeau site marron

Le marron dans le design

Les fonds de page taupes, beiges et crèmes apaisent la grande majorité des couleurs.

Les associations de couleurs

Avec le vert, l’aspect écologie et naturel est mis en avant.

palette

Le bleu contraste gentiment sans agressivité.

palette

Le gris modernise le marron.

palette

Le jaune conserve le naturel du marron et apporte une note de gaîté.

palette

Le marron très foncé, limite noir, est distingué.

palette

Contre-indication

Avec l’orange vif, il est encore très connoté années 70.
Son côté terrien ne s’associe pas avec les entreprises high-tech.

Exemples concrets de combinaisons

Une ambiance chaleureuse.

goodreads

Une atmosphère terrienne avec un filtre marron.

abednego coffee

Les années 70 remises au goût du jour.

bk

Le marron orangé sublime ces gâteaux au chocolat.

la pierre qui tourne

Le marron chaud égaye le bleu.

plunges parkas

Apaisant et amical.

yasuhiro yokota

La théorie des couleurs est un sujet très vaste qui peut remplir une encyclopédie. Nous aborderons ici les bases qui te permettront de travailler plus facilement avec les couleurs et le cercle chromatique.

La théorie des couleurs pour tous – 100% pratique et accessible

Je suis certain que cela va te rappeler quelques notions des cours de dessin au début mais l’approche est plus pratique.

Les fondamentaux de la théorie des couleurs

Les couleurs sont représentées sur le cercle chromatique. Sa structuration est parfaitement pensée et facilite grandement la vie.

cercle chromatique complet

Voici sa version simplifiée :

cercle chromatique simplifie

Il est organisé autour des couleurs primaires : cyan, magenta et jaune.

couleurs primaires

Sont ajoutées les couleurs secondaires issues du mélange des couleurs primaires : orange, violet et vert.

Par exemple :

jaune + bleu = vert

couleurs secondaires

Oui, je sais. J’enfonce des portes ouvertes. Mais, promis, nous quittons l’école primaire.

Les couleurs tertiaires complètent le tableau. Elles résultent du mélange des couleurs primaires et secondaires.

rouge + orange = rouge-orange

couleurs tertiaires

Le cercle organise également une séparation simple entre les couleurs chaudes et froides.

couleurs chaudes
couleurs froides

Les harmonies de couleurs

Les couleurs analogues sont les 2 voisines immédiates d’une couleur sur le cercle. Ces couleurs contrastent peu et cohabitent paisiblement entre elles.

couleurs analogues

Les couleurs complémentaires sont strictement opposées. Ces 2 couleurs sont celles qui contrastent le plus efficacement ensemble. Efficace ne veut pas dire élégant. Le résultat peut s’avérer brutal.

couleurs complémentaires

La complémentaire-analogue prend les analogues d’une couleur ainsi que sa complémentaire. Le résultat est plus subtil que pour la complémentaire. Tu peux créer une palette facilement sur ce principe.

palette complémentaire analogue

La double complémentaire reprend les analogues de chaque côté des 2 complémentaires. Cette palette est délicate à utiliser quand tu n’es pas graphiste.

couleurs doubles complémentaires

La triade prend les 3 couleurs les plus éloignées possibles et dessine un triangle sur le cercle. L’association est colorée et vivante. C’est une très bonne base pour réaliser des teintes pastel.

triade

La palette carrée prend les complémentaires et juxtapose les complémentaires qui forment un angle droit. Pourquoi pas pour un univers enfantin.

palette carre

Nous allons définir quelques termes qui portent souvent à confusion dans les logiciels.

La terminologie et les concepts

Pureté de la couleur

La teinte de la couleur est dite pure quand elle n’est pas modifiée par l’ajout de blanc, noir ou gris.

couleur pure

Les couleurs pures ressortent dans un design. Elles sont parfaitement adaptées en couleur accent pour les logos, les menus, les boutons et les éléments à mettre en valeur.

L’œil ne sait pas où se poser dans une création composée uniquement de couleurs pures. De plus, la juxtaposition sera visuellement agressive. Les couleurs primaires et secondaires pures attirent les jeunes enfants.

L’ajout de blanc ou nuance

Les femmes préfèrent généralement les couleurs éclaircies. Les pastels sont des nuances très claires.

nuances couleurs

L’ajout de noir ou ombres

Les hommes favorisent les couleurs assombries.

couleurs ombres

L’ajout de gris ou tons

Les tons ternissent la couleur en lui apportant un côté neutre.

couleurs tons

Saturation

La saturation exprime la pureté, l’intensité, la vivacité de la couleur. Les teintes de saturation proche apportent une cohérence visuelle à la création, mais empêchent de faire ressortir un élément.

saturation

Elle est exprimée par la distance au centre du cercle chromatique sous Adobe Color CC.

saturation adobe color cc

Sous Photopea, il s’agit de l’axe des abscisses.

saturation photopea
Associe les couleurs de tes designs avec la théorie des couleurs. Cliquez pour tweeter

Luminosité

La luminosité représente la clarté de la teinte. Les contrastes de luminosité apportent du relief à un design et différencient les éléments.

luminosité de la couleur

La luminosité est exprimée par la dernière barre sous Adobe Color CC.

luminosité adobe color cc

Sous Photopea, il s’agit de l’axe des ordonnées.

luminosité photopea

Les composantes de la couleur

La couleur est identifiée par un code unique : l’HEX. Ce code composé de 6 chiffres et lettres est précédé d’un #.

Les couleurs sont définies par les couleurs primaires qui les composent. Ces couleurs primaires ne sont pas tout à fait identiques sur les écrans ou en dessin et imprimerie.

Sur les écrans, les composantes sont le rouge, le vert et le bleu. L’abréviation est RVB (RGB en anglais).

Sous Photopea

hex photopea

Sous Adobe Color CC

hex adobe color cc

Les couleurs primaires traditionnelles sont le cyan, le magenta et le jaune. C’est le référentiel utilisé dans les imprimeries. Il est abrégé en CMJN (N pour noir).

Cette introduction à la théorie de la couleur et ses implications pratiques te permettent d’aborder plus facilement les questions concernant les palettes de couleurs.

Conclusion

Si tu souhaites passer à l’action et concevoir la palette de couleurs de ton identité de marque, découvre une méthode simple et des outils pratiques pour trouver les couleurs qui sublimeront ta marque.

Trouve l'inspiration avec des combinaisons et des exemples d'associations de couleurs. Cliquez pour tweeter

Ce sondage exclusif te révèle les couleurs préférées pour t’adapter à ton audience.

signature de Jean du site pour pas un rond

Retrouve tous les tutoriels pour Créer ta marque

bannière newsletter
portrait jean

Je partage mes apprentissages et mes expériences depuis 2017 avec + de 100 tutoriels et ressources.

Tu devrais trouver ton bonheur pour créer ta marque, construire ton site puis le faire grandir et développer ton entreprise sur pour pas un rond.

Jean


4 réponses à “Trouve l’inspiration pour tes associations de couleurs avec des combinaisons élégantes et des exemples”

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *