Idées de palettes de couleurs bleu, vert et gris (20 choix + Hex)

Une palette de couleurs bleu-vert-gris est un choix privilégié lorsque vous souhaitez que des conceptions transmettent calme, modernité et lisibilité. Elle allie la confiance du bleu, la fraîcheur du vert-sarcelle et l’équilibre des gris froids contemporains.

Ci-dessous, vous trouverez 20 palettes bleu-vert-gris prêtes à l'emploi avec codes HEX, ainsi que des conseils d'association et des exemples d’usage pour l’UI, le branding, l’impression et la décoration intérieure.

Pourquoi les palettes bleu-vert-gris fonctionnent-elles si bien ?

Les schémas de couleurs bleu-vert-gris occupent une zone « silencieuse » du spectre, offrant ainsi une impression moderne sans être criante. Cela les rend idéaux pour les interfaces, les pages d’entreprise ou les mises en page éditoriales où la clarté prime.

Le bleu inspire confiance, la sarcelle apporte une énergie pure, et le gris structure la typographie et les espaces. Ensemble, ils soutiennent la hiérarchie (titres, boutons, arrière-plans) sans recourir à un contraste marqué.

Ces palettes fonctionnent également très bien à l'écran comme en impression. Avec le bon équilibre de gris, vos créations restent nettes pour des interfaces lumineuses, ou plus douces pour la déco ou la papeterie.

20+ inspirations de palettes bleu-vert-gris (avec codes HEX)

1) Graphite marin

HEX : #0b3a53 #1f7a75 #7aa6a6 #c7d1d6 #2b2f33

Ambiance : calme et contemporain

Idéal pour : tableau de bord analytique

Calme et moderne comme une jetée venteuse sur eaux profondes bordée de garde-corps graphite. Le bleu foncé ancre la navigation, tandis que la sarcelle et le gris brouillard gardent les graphiques lisibles sans reflets. À associer avec de l’espace blanc net et une touche chaude (comme l’ambre) pour les alertes. Astuce : réservez le graphite quasi-noir pour les titres et chiffres clés afin de faciliter le balayage visuel.

Exemple d’image graphite marin généré avec media.io

Media.io

Media.io est un studio IA en ligne pour créer et éditer des vidéos, images, et audios directement dans votre navigateur.

Essayez-le maintenant gratuitement

2) Havre menthe

HEX : #0f4c6e #2aa198 #bfe8de #d9dee2 #4a545c

Ambiance : frais et accueillant

Idéal pour : identité de marque bien-être

Frais et accueillant, comme des feuilles de menthe au bord d’un port sous un ciel couvert. Cette palette bleu-vert-gris équilibre la force d’un bleu océan avec la douceur mentholée, ancrée par des gris doux pour les textes. À combiner avec des textures naturelles et du papier non couché pour un ressenti doux et premium. Astuce : gardez la menthe comme couleur d’accent (10 à 15 %) pour éviter un effet délavé.

Exemple d’image havre menthe généré avec media.io

3) Lagon ardoise

HEX : #123b5a #2f6f73 #5f8f9a #b8c2c9 #3b4248

Ambiance : stable et raffiné

Idéal pour : site web d’entreprise

Stable et raffiné, comme un lagon silencieux entouré de falaises d’ardoise. Le bleu et la sarcelle moyens assurent une hiérarchie nette pour les titres, boutons et liens, tandis que les gris froids confèrent un aspect professionnel. À associer avec des photos simples et des icônes fines pour rester rythmé. Conseil : utilisez le gris le plus clair en fond de section pour structurer sans alourdir les blocs.

Exemple d’image lagon ardoise généré avec media.io

4) Sauge arctique

HEX : #0e5675 #3aa6a1 #a8d5c8 #e3e8eb #6a747d

Ambiance : aérien et apaisant

Idéal pour : guide palettes déco spa

Aérien et apaisant, comme de la vapeur de sauge dans une matinée bleutée. Menthe douce et gris pâle offrent une belle base pour les murs et les tissus, alors que le bleu profond assure la lisibilité de la signalétique. Associez à du chêne clair, nickel brossé et céramique blanche mate. Astuce : répétez la teinte sauge sur quelques textiles pour unifier la pièce sans tout repeindre.

Exemple d’image sauge arctique généré avec media.io

5) Varech cuivré

HEX : #0b2f4a #1f7f7a #8fb9b1 #cfd6da #8a5a3c

Ambiance : côtier et ancré

Idéal pour : packaging cosmétique

Côtier et minéral, comme un lit de varech sur rochers avec une touche de cuivre chauffé par le soleil. La sarcelle et le bleu évoquent la propreté et l’eau, tandis que le brun-cuivré offre une chaleur humaine, parfaite pour les soins du corps. À associer à de la typographie sans empattement et beaucoup d’espace négatif. Conseil : imprimez le cuivre en foil ou en encre spéciale pour accentuer l’aspect premium.

Exemple d’image varech cuivré généré avec media.io

6) Promenade pluvieuse

HEX : #0d4860 #2b8a84 #6fa8a8 #d7dde0 #40464c

Ambiance : atmosphérique et épuré

Idéal pour : affiche événementielle

Ambiance atmosphérique et propre, comme des planches mouillées reflétant les lampadaires du port après la pluie. Ces palettes bleu-vert-gris sont parfaites pour des affiches demandant ambiance et lisibilité. Associez à une typo condensée et des formes géométriques pour une hiérarchie immédiate. Conseil : mettez le texte en gris moyen et réservez l’ardoise foncée aux titres et dates.

Exemple d’image promenade pluvieuse généré avec media.io

7) Fjord brumeux

HEX : #12324b #2e6e8a #3c8f87 #b9c7cf #eef2f4

Ambiance : brumeux et spacieux

Idéal pour : double page magazine

Brumeux et aéré, comme un fjord qui disparaît dans la basse brume. Le gris pâle ouvre les mises en page, alors que bleu et sarcelle donnent un rythme apaisant aux titres et citations. Associer à des titres empattement et photo atténuées pour un ton éditorial premium. Conseil : gardez la sarcelle pour les repères de section afin de faciliter la navigation.

Exemple d’image fjord brumeux généré avec media.io

8) Eucalyptus acier

HEX : #0f3d52 #2f7f77 #9bc2b6 #aab3bb #2f353a

Ambiance : pratique et serein

Idéal pour : écrans d’intégration SaaS

Pratique et serein, comme des feuilles d’eucalyptus sur un acier brossé. Le mélange bleu profond/sarcelle soutient des appels à l’action clairs, et les gris froids rendent les formulaires légers. À associer à des composants arrondis et des espacements généreux pour un ton amical. Astuce : utilisez le gris acier pour les bordures de champ et le bleu foncé pour les boutons primaires afin d’éviter la surutilisation de la sarcelle.

Exemple d’image eucalyptus acier généré avec media.io

9) Béton maritime

HEX : #0a2f45 #1c6d7c #3aa39b #c9cfd4 #5a646c

Ambiance : urbain et nautique

Idéal pour : site portfolio d’architecture

Urbain et marin, comme de l’eau bleue contre des quais en béton. Les neutres froids valorisent la photo, alors que la sarcelle souligne les hover et titres pour une touche moderne. À associer à des images noir et blanc et une grille minimale. Astuce : gardez le gris béton en fond dominant pour que la sarcelle paraisse intentionnelle, pas décorative.

Exemple d'Image de béton nautique généré à l'aide de media.io

10) Mousse de Glacier

HEX :#103e5b#2a7c8a#5aa78d#d5dde1#6d7b82

Ambiance :Croustillant et naturel

Idéal pour :lookbook de marque d'extérieur

Croustillant et naturel, comme un glacier fondu passant par la pierre mousseuse. Cet ensemble est aventureux sans passer au néon, ce qui le rend idéal pour les mises en page de lookbook et les appels de produits propres. En tant que schéma de couleurs bleu vert gris, il s'associe particulièrement bien aux textures recyclées, aux notes en papier kraft et à la photographie en plein air à haut contraste. Astuce d'utilisation: Placez le vert mousse sur les insignes et les icônes pour attirer l'attention sans rivaliser avec les images.

Exemple d'Image de mousse de glacier générée en utilisant media.io

11) Bureau de l'épinette bleue

HEX :#0c3b57#1f6f86#2f8f7e#b7c0c6

Ambiance :Concentré et digne de confiance

Idéal pour :B2B pitch deck

Concentré et digne de confiance, comme des aiguilles d'épinette bleue dans un bureau bien rangé. Les teintes plus foncées semblent faisant autorité pour les titres et les graphiques, tandis que le gris doux garde les diapositives respirantes. Associez-vous à des données simples, c'est-à-dire à beaucoup de marge, de sorte que le contenu se sent confiant. Astuce d'utilisation: Utilisez teal pour une série de données de manière cohérente sur tout le pont pour créer une reconnaissance.

Exemple d'Image de blue spruce office généré avec media.io

12) papier de marée doux

HEX :#1a4862#2f8b8b#a7cfc8#f1f4f6#7b8790

Ambiance :Doux et aéré

Idéal pour :suite d'invitation de mariage

Doux et aéré, comme du papier lavé par les marées avec du verre de mer caché à l'intérieur. Le fond pâle garde la suite élégante, tandis que le bleu et le bleu ajoutent juste assez de couleur pour les monogrammes et les bordures. Associez-le à des textures à bords de deck ou à des lavages aquarelles subtils pour une finition romantique. Astuce d'utilisation: Imprimez le ton le plus sombre uniquement pour les noms et les détails clés pour préserver la douceur.

Exemple d'Image de soft tidepaper généré à l'aide de media.io

13) Mousse de mer industrielle

HEX :#0d3c54#1d7a82#7fc6c1#c0c8ce

Ambiance :Énergique mais accessible

Idéal pour :page de destination des startups technologiques

Énergique mais accessible, comme la peinture en mousse de mer sur une porte industrielle. L'eau brillante soulève les CTA et les micro-interactions, tandis que l'ardoise et le charbon de bois gardent la page sérieuse. Associez avec des illustrations géométriques audacieuses et des dégradés légers pour un look moderne et technologique. Astuce d'utilisation: Gardez aqua aux boutons et liens uniquement, et laissez gray transporter le texte de forme longue.

Exemple d'Image de mousse de mer industrielle générée à l'aide de media.io

14) Pebble Bay

HEX :#11435f#2d7f86#4aa59a#d2d8dc#8b969e

Ambiance :Equilibré et sympathique

Idéal pour :En-tête et vignettes du blog

Equilibré et convivial, comme des cailloux lisses sous l'eau claire de la baie. Les tons moyens permettent de créer facilement des cadres de vignettes, des balises et des couleurs de catégorie cohérentes sans contraste sévère. Associez-le à une photographie chaleureuse et à des superpositions simples pour des titres lisables. Astuce d'utilisation: Utilisez le gris clair comme base de dégradé subtil pour unifier les images mixtes.

Exemple d'Image de pebble bay généré en utilisant media.io

15) Charbon de bois Teal profond

HEX :#062a3a#0f5d6a#1f8a8a#9fb0b8#1f2327

Ambiance :audacieux et cinématographique

Idéal pour :artwork de couverture d'album de musique

Audacieux et cinématographique, comme une lumière teal profonde traversant le brouillard de charbon de bois. Ces combinaisons de couleurs bleu vert gris brillent sur la couverture où vous voulez l'humeur d'abord et les détails seconds. Associez la photographie à haut contraste et le type minimal pour une finition frappante et contemporaine. Astuce d'utilisation: Gardez le texte dans le ton acier pâle pour éviter les bords vibrants contre la base sombre.

Exemple d'Image de charbon de bois vert foncé généré à l'aide de media.io

16) Hiver au bord de la piscine

HEX :#154d6b#2f8f9d#86c7c2#e6ecef#56626a

Ambiance :cool et optimiste

Idéal pour :Disposition des brochures de voyage

Frais et optimiste, comme une piscine chauffée par un matin d'hiver. Le gris clair garde les pages brillantes, tandis que la gamme teal ajoute une ambiance de vacances accueillante sans se sentir tropicale. Associez-le à un type sans serif propre et à de larges marges pour une sensation de brochure haut de gamme. Astuce d'utilisation: Utilisez le mid-teal pour les diviseurs de sections afin que les lecteurs puissent glisser rapidement.

Exemple d'Image de winter poolside généré en utilisant media.io

17) Clinique côtière

HEX :#0f4a68#1f7f85#9ad9cf#f5f7f8#9aa5ad

Ambiance :Propre et rassurant

Idéal pour :Utilisateur de l'application de santé

Propre et rassurant, comme une clinique lumineuse avec vue sur l'eau calme. L'eau douce se sent attentive aux états de statut et à l'interface utilisateur de soutien, tandis que le bleu apporte confiance aux actions primaires. Associez-le à des composants d'interface utilisateur arrondis et à une iconographie à haut contraste pour une accessibilité. Conseils d'utilisation: Gardez les messages de succès en aqua et réservez le bleu vert pour les éléments interactifs afin que les états soient distincts.

Exemple d'Image de Clinique côtière générée à l'aide de media.io

18) Riverstone Minimal

HEX :#0e3f59#2c7c78#6fb1a7#dfe4e7#707b83

Ambiance :Calme et minimaliste

Idéal pour :Modèle de CV et lettre de motivation

Calme et minimaliste, comme des pierres de rivière alignées sur une rive fraîche. Les couleurs retenues gardent la typographie en charge, et le teal ajoute une signature subtile aux en-têtes de sections. Paire avec une seule famille de type moderne et des règles fines pour la structure. Astuce d'utilisation: Appliquez teal uniquement aux titres et aux petites icônes afin que la page s'imprime proprement aussi en niveaux de gris.

Exemple d'Image de riverstone minimal généré en utilisant media.io

19) Lumière de tempête botanique

HEX :#0b3b52#2b7e84#5ab3a4#cfd7dc

Ambiance :Frais et artistique

Idéal pour :Ensemble d'illustration botanique

Frais et artistique, comme une tempête brisant sur une serre. La gamme vert teal est vivante pour les feuilles et les tiges, tandis que les gris frais gardent la composition aérée et moderne. Associez avec des lignes délicates et des lavages doux d'aquarelle pour un style naturel et contemporain. Astuce d'utilisation: Limiter le bleu le plus foncé aux ombres afin que les plantes restent claires et transparentes.

Exemple d'Image de stormlight botanical généré en utilisant media.io

20) Quai de nuit néon

HEX :#061f2f#0b4f6c#00a6a6#a9b6be#20262b

Ambiance :Électrique et élégant

Idéal pour :Superposition de flux de jeu

Électrique et élégant, comme une signalisation au néon brillant au-dessus d'une jetée de nuit. Le contraste élevé entre le presque noir et le bleu vif fait apparaître les alertes, les étiquettes et les minuteries sans encombrement. Associez-le à des dégradés subtils et à un type sans-serif tranchant pour une ambiance compétitive. Conseils d'utilisation: Gardez le neon teal uniquement sur les éléments clés de l'interface utilisateur afin qu'il reste efficace tout au long d'un long flux.

Exemple d'Image de night pier neon généré en utilisant media.io

Quelles couleurs associer au bleu-vert-gris ?

Les accents chauds sont le moyen le plus simple d'ajouter du contraste à une palette bleu vert gris. Essayez l'ambre, la terre cuite, le cuivre ou le corail atténué pour les boutons, les highlights, les badges ou les éléments de points d'impression.

Pour une direction propre et moderne, associez ces tons à un blanc croustillant, un blanc cassé doux ou un gris frais pâle. Cela garde les mises en page aérées et aide les détails bleu à paraître intentionnels plutôt que trop puissants.

Si vous voulez un look plus sombre et plus cinématographique, ajoutez du charbon de bois et presque noir plus un seul teal brillant pour l'accent. Cette combinaison fonctionne particulièrement bien pour les superpositions, les sections de héros et les graphismes de style album.

Comment utiliser une palette bleu-vert-gris dans des créations réelles

Commencez par attribuer des rôles: choisissez un bleu foncé/charbon comme ancre (navigation, en-têtes), un teal comme accent interactif (liens, CTA), et laissez les gris clairs porter les arrière-plans et l'espacement. Cela maintient la hiérarchie cohérente sur les écrans ou les pages.

Dans l'interface utilisateur, assurez-vous de la lisibilité en réservant le teal saturé pour les petites zones et en utilisant les gris pour les textes de forme longue. Dans l'impression, considérez des blancs de papier légèrement plus chauds pour éviter que la palette ne soit trop froide.

Pour le branding et les intérieurs, répétez une signature bleu à travers les points de contact (étiquettes, signalisation, textiles) et gardez le reste neutre. La répétition crée une cohésion même lorsque la photographie et les matériaux changent.

Créer des visuels de palettes bleu-vert-gris avec l’IA

Si vous disposez déjà de codes hexagonaux, vous pouvez rapidement les visualiser dans des mises en page telles que des tableaux de bord, des affiches, des tableaux de marque et des suites d'invitation. La génération de quelques variantes vous aide également à tester le contraste et l'ambiance avant de vous engager dans une direction finale.

Avec les outils de conversion de texte en image de Media.io, vous pouvez décrire votre design (format, style et palette) et obtenir des visuels conceptuels polis en quelques minutes. C'est un moyen rapide de valider une schéma de couleurs bleu vert gris pour l'interface utilisateur, l'impression ou le marketing.

Utilisez le bouton ci-dessous pour commencer à créer des visuels de palette bleu vert gris gratuitement.

Suivant : Palette de couleurs gris bleu foncé