Top 20 palettes de couleurs noir, bleu et gris avec codes hexadécimaux

Une palette de couleurs noir, bleu et gris est un choix incontournable pour les interfaces modernes, l’image de marque haut de gamme et les intérieurs apaisants, car elle équilibre l’autorité (noir), la confiance (bleu) et la polyvalence (gris).

Vous trouverez ci-dessous 20 combinaisons de couleurs noir, bleu et gris allant d’une ambiance sombre à claire, accompagnées des codes HEX, ainsi que des conseils pratiques et des prompts IA à réutiliser pour générer des visuels assortis.

Pourquoi les palettes noir, bleu et gris fonctionnent-elles si bien ?

Le noir, le bleu et le gris créent naturellement une hiérarchie claire : les tons sombres définissent la structure, les gris favorisent la lisibilité et le bleu signale l’action et la confiance. Ce trio est donc particulièrement efficace pour les interfaces où les états, l’accentuation et la navigation doivent être compris instantanément.

Ces tons donnent aussi une impression de finition et de qualité. Le noir et l’anthracite transmettent l’autorité, tandis que le bleu ajoute une touche moderne et technologique — sans saturation excessive.

Enfin, une palette noir, bleu et gris s’adapte facilement à tous les supports : mode sombre, mises en page claires, impression, ou décoration intérieure, avec l’ajout d’un neutre chaud (comme le crème) pour adoucir l’ambiance si besoin.

20+ idées de palettes noir, bleu et gris (avec codes HEX)

1) Port de minuit

HEX : #0b1320 #0f2438 #1b4f72 #6b7785 #d7dee6

Ambiance : sombre, raffinée, côtière

Idéal pour : UI de landing page fintech

Les lumières du port et les reflets profonds de l’eau instaurent une ambiance raffinée, confiante. Cette palette noir, bleu, gris inspire confiance pour la fintech et les SaaS, surtout en gardant un fond sombre et en misant sur le gris clair pour la lisibilité. À associer avec des espaces blancs nets et une touche chaude comme le crème pour les boutons ou chiffres clés. Conseil : réservez le bleu vif à un seul appel à l’action principal pour éviter la surcharge visuelle.

Exemple d’image « port de minuit » générée avec media.io

Media.io

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

Essayez-le gratuitement dès maintenant

2) Graphite Azur

HEX : #0a0d10 #1d2a3a #2b6cb0 #8a97a6 #eef2f6

Ambiance : élégant, technologique, très contrasté

Idéal pour : UI de dashboard d’application

Des ombres graphite élégantes avec une touche d’azur donnent un aspect moderne et dynamique. Idéal pour les tableaux de bord nécessitant une hiérarchie claire : panneaux sombres pour la structure, gris clairs pour aérer. À associer à des icônes simples et des séparateurs fins pour conserver la netteté. Conseil : limitez l’azur aux éléments actifs et graphiques pour accentuer sans surcharger.

Exemple d’image « graphite azur » générée avec media.io

3) Vague d’acier Minimaliste

HEX : #111418 #223042 #3a86c8 #9aa6b2 #cfd6de

Ambiance : minimaliste, paisible, contemporain

Idéal pour : présentation PowerPoint

Des tons acier calmes relevés d’un bleu discret offrent modernité et sobriété. Parfait pour les présentations où clarté et professionnalisme sont recherchés. Privilégiez les espaces négatifs et formes géométriques sobres plutôt que les photos. Conseil : gardez les titres presque noirs et utilisez le gris moyen pour le texte courant, afin de réduire l’éblouissement au vidéoprojecteur.

Exemple d’image « vague d’acier minimaliste » générée avec media.io

4) Bureaux Nuageux

HEX : #0f1115 #202a34 #2f4a63 #7d8b99 #f3f5f7

Ambiance : professionnel, sobre, discret

Idéal pour : bannière d’accueil site corporate

Des neutres ton orage donnent de la constance et de la crédibilité. Cette palette s’utilise pour des bannières de héros où texte et message priment, relevés par une profondeur bleue subtile. À associer à des photos monochrome et un fond blanc cassé pour une approche chaleureuse. Conseil : ajoutez un fin liseré bleu pour guider l’œil sans dominer le texte.

Exemple d’image « bureaux nuageux » générée avec media.io

5) Interface Nuit Arctique

HEX : #0b0e13 #1a2330 #1f6feb #a8b3bf #e6ebf0

Ambiance : nette, nocturne, claire

Idéal pour : UI d’application mobile mode sombre

Des touches arctiques nettes sur fonds nocturnes suggèrent propreté et rapidité. Le bleu marqué agit comme signal d’interaction : idéal pour navigation, boutons et liens en mode sombre. À associer à des icônes fils simples et des ombres légères pour éviter l’effet brouillon. Conseil : préférez le gris clair au blanc pur pour le texte, réduisant la fatigue visuelle.

Exemple d’image « nuit arctique UI » générée avec media.io

6) Béton Denim

HEX : #121212 #2a2f35 #2b4c7e #88939f #d9dee3

Ambiance : urbain, pratique, équilibré

Idéal pour : mise en page lookbook streetwear

Les gris béton urbains alliés à la profondeur bleu denim offrent un rendu moderne, pratique et stylé. Idéale pour lookbooks et catalogues où le fond doit valoriser la photo produit. Fonctionne aussi en impression grâce aux gris moyens, le bleu étant réservé à quelques accents. Conseil : mettez les légendes en gris clair, le bleu réservé aux titres de sections seulement.

Exemple d’image « béton denim » générée avec media.io

7) Fumée Cobalt

HEX : #0c0f14 #243447 #2f81f7 #5f6b76 #b9c2cc

Ambiance : énergique, fumé, moderne

Idéal pour : habillage streaming esport

Des gris sombres fumés relevés par le cobalt apportent dynamisme et esprit de compétition. Utilisez-les sur les overlays, tableaux de score, lower thirds où le contraste doit être immédiat. Typo condensée audacieuse, séparateurs anguleux pour plus de netteté. Conseil : limitez le bleu vif à 10-15 % pour qu’il garde son effet spécial.

Exemple d’image « fumée cobalt » générée avec media.io

8) Ardoise Plan

HEX : #0e1013 #1c2836 #274c77 #98a4b3 #f0f2f4

Ambiance : structuré, intelligent, calme

Idéal pour : portfolio d’architecte

L’ardoise structurée et le bleu plan évoquent la précision et la préparation. Idéal pour portfolios d’architecture ou d’ingénierie qui exigent une belle organisation et une lecture fluide. Grille fine, marges larges pour accentuer l’effet plan. Conseil : utilisez la teinte la plus claire en fond de page, la plus sombre pour la navigation, pour un cadre élégant.

Exemple d’image « ardoise plan » générée avec media.io

9) Quai Brumeux

HEX : #0d1014 #2b3a42 #1d5c8a #aab4bf #e9edf2

Ambiance : brumeux, calme, accueillant

Idéal pour : en-tête de blog et système typographique

Les gris brumeux du quai associés à un bleu adouci évoquent le calme et la lisibilité. Idéal pour blogs et pages longues où le confort prime sur l’effet ! À associer à des fonds effet papier chaud et dessins linéaires subtils pour nuancer l’ambiance éditoriale. Conseil : réservez le gris moyen au texte secondaire et gardez les liens en bleu pour une navigation cohérente.

Exemple d’image de jetée brumeuse générée par media.io

10) Digital Steel

HEX : #0a0c10 #202737 #345995 #707b86 #d5dbe2

Ambiance : épuré, technique, moderne

Idéal pour : page de mise en avant d'un produit SaaS

Les tons techniques épurés évoquent le métal brossé et le verre poli. Utilisez-les sur les pages de fonctionnalités où icônes, schémas et captures d’écran nécessitent un cadre calme. Associez à un seul accent chaud, comme un badge crème discret, pour humaniser la mise en page. Astuce : gardez le fond clair et réservez la teinte la plus foncée aux titres et libellés clés.

Exemple d’image de digital steel générée par media.io

11) Museum Evening

HEX : #0f1216 #252c35 #2a5d9f #7a8694 #f5f6f7

Ambiance : cultivé, élégant, subtil

Idéal pour : flyer d’invitation à un événement

Les tons du soir cultivé rappellent une galerie tranquille avec des détails mis en lumière. Cette palette est parfaite pour des invitations où la typographie doit évoquer le premium et la sérénité. Associez à de fines lignes, petites capitales et beaucoup d’espace blanc pour un effet musée. Astuce : choisissez pour le fond un blanc cassé et réservez le bleu pour mettre en avant la date et le lieu.

Exemple d’image de museum evening générée par media.io

12) Winter Transit

HEX : #101318 #1f2a35 #1b6aa5 #94a0ad #dfe5eb

Ambiance : frais, ponctuel, urbain

Idéal pour : affiche de signalisation

Les tons froids du transit évoquent la ponctualité et la vie urbaine, comme une signalétique lors d’un trajet hivernal. Idéaux pour des affiches de signalisation ou des graphiques informationnels où contraste et lisibilité sont indispensables. Associez à des flèches géométriques et une grille stricte pour une lisibilité parfaite à distance. Astuce : réservez le bleu aux éléments directionnels, et la gamme de gris au texte et blocs de fond.

Exemple d’image de winter transit générée par media.io

13) Inkstone Studio

HEX : #0b0b0d #242933 #3c5a80 #6e7885 #c9d0d8

Ambiance : créatif, ancré, classique-moderne

Idéal pour : portfolio photographique

Les ombres encre de Chine aux notes de bleu atténué créent une ambiance créative et ancrée. Parfait pour les portfolios où le cadre doit être sombre, épuré et sans distraction. Associez à des photographies en niveaux de gris et des états de survol subtils pour maintenir l'attention sur l’image. Astuce : gardez de larges marges et laissez le gris clair gérer les légendes et métadonnées.

Exemple d’image de inkstone studio générée par media.io

14) Harborline Branding

HEX : #0c1016 #1a2b3d #215e9a #808c9a #f1f4f7

Ambiance : fiable, raffiné, haut de gamme

Idéal pour : planche d’identité visuelle

Les tons polissés du port évoquent confiance, stabilité et assurance discrète. Cette palette noir bleu gris convient parfaitement aux identités visuelles, du logo à la papeterie, car elle fonctionne aussi bien en numérique qu’en impression. Ajoutez une seule touche neutre chaude (crème ou sable) pour la convivialité. Astuce : testez les gris sur du papier non couché pour éviter qu'ils ne virent vers le froid.

Exemple d’image de harborline branding générée par media.io

15) Quiet Monochrome

HEX : #0f1113 #2a2e33 #3a4a5a #9aa3ad #f6f7f8

Ambiance : calme, minimaliste, équilibré

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

Les couches monochromes silencieuses insufflent calme et concentration, à l’image d’un document bien édité. Idéal pour les CV où typographie, espaces et hiérarchies doivent être irréprochables. Associez une fine ligne bleu-gris discrète pour la séparation des sections et gardez tout le reste neutre. Astuce : évitez les fonds trop remplis et privilégiez masse, taille et espacement.

Exemple d’image de quiet monochrome générée par media.io

16) Blueprint Poster

HEX : #0b0f15 #1f2d3a #0f5fa6 #8b98a6 #e7edf3

Ambiance : audacieux, graphique, structuré

Idéal pour : affiche de conférence

Les bleus blueprint audacieux sur des neutres foncés structurés apportent direction et intelligence. Parfait pour une affiche de conférence où les sections doivent être nettes et lisibles d’un coup d’œil. Associez à une typographie sans empattement et à des pictogrammes simples pour garder l’aspect moderne. Astuce : utilisez la teinte la plus claire pour le fond et le bleu comme projecteur pour les sessions ou intervenants.

Exemple d’image de blueprint poster générée par media.io

17) Nautical Terminal

HEX : #0a0d11 #17212b #234a7a #6f7c89 #cfd7df

Ambiance : nautique, technologique, stable

Idéal pour : site de documentation développeur

La profondeur nautique avec des tons sombres façon terminal inspire stabilité et technicité. Idéal pour des sites de documentation où blocs de code, navigation et titres demandent une séparation nette. Associez un accent monospace pour le code, et réservez le bleu aux liens, onglets et états d'accent. Astuce : rendez le fond des blocs de code légèrement plus clair que la page pour qu’ils ressortent sans contraste brutal.

Exemple d’image de nautical terminal générée par media.io

18) Smoky Cobalt Packaging

HEX : #0e0f12 #2a3038 #1f5fbf #a3adba #f2f4f6

Ambiance : premium, audacieux, moderne

Idéal pour : packaging de produit de soins

Les tons neutres fumés avec une énergie cobalt offrent un style moderne et masculin sans dureté. Ces nuances conviennent aux packagings de soins, où les mats foncés expriment la qualité et le bleu une touche de fraîcheur. Associez à une typographie minimaliste et une finition soft touch pour un rendu sensoriel. Astuce : imprimez le cobalt en couleur directe ou en accent métallique pour une touche haut de gamme maîtrisée.

Exemple d’image de smoky cobalt packaging générée par media.io

19) Rainy Day Editorial

HEX : #101217 #2d3640 #2a5674 #9aa7b4 #f7f8fa

Ambiance : doux, réfléchi, éditorial

Idéal pour : mise en page d’article de magazine

Les neutres façon jour de pluie paraissent réfléchis et élégants en toute discrétion. Idéal pour les articles de magazine où la lecture doit être fluide avec un contraste doux. Associez titres en sérif et règles sous-titre bleu clair pour instaurer un rythme éditorial. Astuce : gardez les légendes dans un gris moyen pour aérer et équilibrer la page.

Exemple d’image de rainy day editorial générée par media.io

20) Nightshift Dashboard

HEX : #070a0f #1b2430 #2d6cdf #65707d #d8dee6

Ambiance : focalisé, moderne, axé données

Idéal pour : UI de tableau de bord analytique

Les tons nightshift focalisés évoquent une salle de contrôle décisive. Parmi les combinaisons noir bleu gris, celle-ci est idéale pour l’analytique car le contraste préserve la lisibilité tout en reposant l’œil. Associez à des visualisations de données neutres et réservez le bleu aux filtres sélectionnés, onglets actifs et courbes principales. Astuce : limitez le bleu vif à une seule série de graphique pour garder les comparaisons lisibles.

Exemple d’image de nightshift dashboard générée par media.io

Quelles couleurs associer avec le noir, le bleu et le gris ?

Les neutres chauds sont la mise à niveau la plus facile : crème, ivoire, sable et beige chaud adoucissent l'effet « tech » et rendent les mises en page sombres plus accueillantes. Idéales pour boutons, badges et panneaux de fond.

Pour plus de contraste, ajoutez un blanc éclatant avec parcimonie (surtout pour la typo et les éléments clés) et gardez la majorité du texte en gris clair pour limiter l’éblouissement. Pour un deuxième accent, les métaux atténués (argent, étain) ou les verts désaturés s’accordent à la base froide sans concurrencer le bleu.

En cas de doute, limitez la saturation : un accent bleu principal, un neutre chaud, le reste en noir/gris pour un rendu contrôlé et haut de gamme.

Comment utiliser une palette noir, bleu et gris dans des créations concrètes

Commencez par les rôles au lieu des pourcentages : attribuez le presque noir à la navigation et aux en-têtes, l’ardoise foncée aux surfaces/cartes, le gris moyen au texte secondaire, et le gris clair ou blanc cassé aux fonds. Choisissez un bleu pour l’interactivité (liens, onglets actifs, états sélectionnés).

En branding, testez la palette à la fois en numérique et en impression. Les gris peuvent changer selon la lumière et le support papier : validez votre charbon et moyen-gris avant d’imprimer papeterie ou packaging définitifs.

Pour l’intérieur, le bleu devient la couleur de « profondeur » (mur accentué, mobilier, textile), tandis que gris et noir stabilisent la quincaillerie et les accessoires. Ajoutez lumières crème ou bois pour éviter une sensation froide.

Générez des visuels palettes noir, bleu, gris avec l’IA

Si vous avez déjà vos codes HEX, vous pouvez les décliner rapidement en maquettes UI, affiches, planches de marque et concepts packaging grâce à l’IA. La clé : décrire la mise en page clairement et inclure explicitement vos couleurs dans la consigne.

Utilisez une seule palette à la fois et précisez où le bleu doit apparaître (CTA, liens, graphiques, bordures). Cela garantit un rendu propre et évite les couleurs parasites.

Suivant : Palette de couleurs crème