Idées de palettes de couleurs bleu foncé et bleu marine (20 choix + Hex)

Les palettes bleu foncé bleu marine sont un choix lorsque vous avez besoin de confiance instantanée, de structure et d'une sensation haut de gamme. Ils peuvent être modernes dans l'interface utilisateur, intemporels dans la marque et confortables dans les intérieurs-selon les accents que vous associez avec eux.

Vous trouverez ci-dessous 20 idées de palette de couleurs bleu foncé bleu marine avec des codes hexagonaux, ainsi que des conseils pratiques et des invites Media.io afin que vous puissiez générer rapidement des visuels correspondants.

Pourquoi les Palettes bleu foncé marine fonctionnent si bien

Bleu foncé Le bleu marine se situe à un endroit doux entre l'autorité du noir et la clarté du bleu, de sorte qu'il se sent confiant sans devenir dur. C'est pourquoi il est courant dans la finance, le SaaS et les systèmes de conception d'entreprise où la crédibilité est importante.

Il crée également une profondeur instantanée. Une base marine rend les accents plus brillants (teal, or, corail, menthe ou même néon) plus intentionnels car l'arrière-plan "encadre" naturellement les éléments interactifs et les informations clés.

Enfin, la marine est polyvalente dans tous les médiums. Il résiste à l'impression, se lit bien sur les écrans et s'associe parfaitement aux neutres chauds (ivoire, avoine, greige) et aux teintes fraîches (périwinkle, bleu glace), ce qui facilite l'échelle dans une palette complète de marque.

20+ Idées de Palette de couleurs bleu foncé bleu marine (avec Codes hexagonaux)

1) Port de minuit

hexagonal:#0B132B#1C2541#3A506B#5BC0BE#F4F1DE

Humeur:Calme, maritime, sophistiqué

Meilleur pour:Héros de la page de destination saas

Calme et maritime, ce mélange ressemble au clair de lune sur des eaux profondes avec un accent de brise marine fraîche. Utilisez le bleu marine le plus sombre pour les en-têtes et la navigation, puis appuyez-vous sur le bleu pour les CTA qui apparaissent sans avoir l'air néon. L'ivoire chaud garde les sections lisibles et empêche la mise en page de devenir trop lourde. Astuce: Réservez le teal pour une action primaire par vue pour garder la hiérarchie propre.

Exemple d'Image de midnight harbor généré avec media.io

Media.io

Media.io est un studio d'IA en ligne pour la création et l'édition de vidéos, d'images et d'audio dans votre navigateur.

Essayez-le maintenant gratuitement

2) Chute de nuit au Cobalt

hexagonal:#0A0F2C#101B4D#1E3A8A#A7C7FF#EEF2FF

Humeur:Élégant, technologique, ciblé

Meilleur pour:mockup de l'interface utilisateur du tableau de bord

Elégant et ciblé, ces tons se lisent comme une silhouette de ville éclairée par des lumières en cobalt. Construisez de la profondeur en utilisant le bleu marine presque noir pour les barres latérales et le bleu plus vif pour les états actifs et les graphiques. Le périwinkle pâle et le blanc cassé gardent les grilles de données lisibles et réduisent la fatigue oculaire. Astuce: associez le cobalt à des teintes subtiles de 10 à 15% pour les états hover et Sélection.

Exemple d'Image de cobalt nightfall généré en utilisant media.io

3) encre et cuivre

hexagonal:#081027#111D3B#2B2F4A#B87333#F2E9E4

Humeur:luxueux, éditorial, chaleureux

Meilleur pour:Identité de marque premium

Luxueux et éditorial, il évoque de l'encre foncée sur un papier texturé avec un éclat de feuille de cuivre. Ces combinaisons de couleurs bleu foncé bleu marine brillent dans les logos, les monogrammes et les emballages où vous voulez un drame retenu. Gardez le cuivre comme point culminant (règles, icônes, petit type) et laissez le blanc cassé chaud faire le travail lourd pour la lisibilité. Astuce: Testez le cuivre sur des finitions mates et brillantes pour choisir la bonne chaleur.

Exemple d'Image d'encre et de cuivre généré en utilisant media.io

4) linge orageux

hexagonal:#d1b2a#1B263B#415A77#E0E1DD#C7BEB6

Humeur:Calme, naturel, discret

Meilleur pour:Intérieur salon moderne

Calme et naturel, il ressemble à des nuages d'orage sur du lin doux et de la pierre. Utilisez les bleus profonds pour les murs intégrés, les murs accentués ou les meubles, et équilibrez avec les neutres clairs sur les surfaces plus grandes. Le ton gris relie les bois chauds et les peintures fraîches, donnant à toute la pièce une sensation intentionnelle. Astuce: Ajoutez de la texture — bouclé, lin, plâtre mat — pour que la palette ne soit pas plate.

Exemple d'Image de stormy linen généré en utilisant media.io

5) Saphir agrumes

hexagonal:#081A3A#0F2E5E#1D4ED8#FBBF24#FFF7ED

Humeur:Énergique, audacieux, ludique

Meilleur pour:Graphique promotionnel des médias sociaux

Énergique et percutant, c'est comme une lumière de saphir qui traverse une brillante explosion d'agrumes. Utilisez le jaune doré avec parcimonie pour les étiquettes de prix, les badges ou les statistiques clés afin qu'il se lise comme un accent intentionnel. Le blanc cassé crémeux empêche les bleus de submerger les petites toiles mobiles. Astuce: gardez le texte soit presque blanc sur marine ou presque marine sur crème-évitez la copie du corps bleu moyen.

Exemple d'Image de sapphire citrus généré en utilisant media.io

6) Velours de musée

hexagonal:#070B1A#121A3A#2A2F6B#9CA3AF#FAFAF9

Humeur:Dramatique, culturel, raffiné

Meilleur pour:Éditorial magazine spread

Spectaculaires et culturels, ces tons rappelent les murs de galerie en velours et les cadres polis. Utilisez le bleu marine presque noir pour les titres et les bordures, puis adoucissez les longues lectures avec le fond blanc cassé chaud. Le gris frais fonctionne comme légende, règle et typographie secondaire sans rivaliser pour l'attention. Astuce: Ajoutez un seul élément indigo saturé par étalement pour guider l'œil.

Exemple d'Image de musée velours généré en utilisant media.io

7) Balise arctique

hexagonal:#06142E#0B2C5F#1B65A6#A8DADC#F1FAEE

Humeur:Frais, croustillant, plein air

Meilleur pour:En-tête du site Web de voyage

Frais et frais, il ressemble à l'air polaire et à l'eau claire sous un ciel clair. Cette palette de couleurs bleu foncé bleu marine est idéale pour les marques de voyage et de plein air qui veulent confiance plus une touche d'aventure. Utilisez la menthe glacée comme accent pour les boutons et les étiquettes, tandis que le blanc doux garde les images et la copie propres. Astuce: laissez les photos porter la chaleur; Gardez les éléments de l'interface utilisateur frais et minimaux.

Exemple d'Image de arctic beacon généré à l'aide de media.io

8) Rose après la nuit

hexagonal:#0B1026#1B1F3A#3B3561#E07A8C#F6F0F2

Humeur:Romantique, moderne, légèrement humoreux

Meilleur pour:suite d'invitation de mariage

Romantique et moderne, il évoque des fleurs crépusculaires sur un ciel sombre. Associez le rouge rose avec un espace blanc généreux pour les noms et les dates, et utilisez le bleu marine le plus profond pour la typographie formelle. Le bleu violet atténué aide à combler les deux de sorte que le contraste semble élégant, pas dur. Astuce: Imprimez les accents de rose sous forme de couleur spot ou de feuille pour les garder nets sur le stock texturé.

Exemple d'Image de rose after dark généré en utilisant media.io

9) Marée de Graphite

hexagonal:#050A12#0F172A#334155#94A3B8#E2E8F0

Humeur:minimal, professionnel, équilibré

Meilleur pour:Utilisateur de l'application finance

Minimal et professionnel, il se lit comme du graphite, de l'acier et de l'eau profonde. Utilisez les tons les plus sombres pour la navigation et les indications de sécurité, puis laissez l'ardoise et les gris clairs transporter les tables et les formulaires. Ce mélange fonctionne particulièrement bien lorsque vous voulez un look sérieux sans aller en noir et blanc. Astuce: gardez les couleurs d'erreur et de succès silencieuses afin qu'elles ne entrent pas en collision avec la base cool.

Exemple d'Image de graphite tide généré en utilisant media.io

10) Or du navigateur

hexagonal:#081C2F#102A43#243B53#D4AF37#F8F5E6

Humeur:Classique, confiant, haut de gamme

Meilleur pour:Emballage de produits de luxe

Classique et confiant, il rappelle les uniformes de capitaine et un détail doré chaleureux. Utilisez l'or comme point culminant premium sur les logos, les sceaux et les petites bordures, tandis que les marines offrent un fond solide. La couleur neutre crémeuse empêche l'ensemble de se sentir froid et aide les informations sur le produit à rester lisible. Astuce: Choisissez une couleur dorée légèrement plus foncée pour le petit texte afin qu'il résiste en impression.

Exemple d'Image de seafarer gold généré en utilisant media.io

11) Denim et avoine

hexagonal:#0A1B33#12355B#2D6CDF#DCC9A1#F7F3E8

Humeur:Amitieux, décontracté, accessible

Meilleur pour:Vitrine de commerce électronique

Sympathique et décontracté, il ressemble à un denim bien usé aux tons chauds d'avoine. Utilisez le bleu moyen pour les liens et les points forts, et appuyez sur les neutres clairs pour les grilles de produits et les pages longues. Le beige chaud est idéal pour les badges subtils, les puces de catégorie ou les bandes de fond. Conseil: Gardez les CTA cohérents – un bleu, un neutre – pour éviter une vitrine fréquentée.

Exemple d'Image de denim & oat généré en utilisant media.io

12) Marina de néon

hexagonal:#060B23#0B1E4D#00D1FF#FF4D6D#F8FAFF

Humeur:électrique, jeune, vie nocturne

Meilleur pour:Conception d'affiche d'événement

Électrique et prêt pour la vie nocturne, il suggère des réflexions de néon sur l'eau sombre. Utilisez le cyan et le rose vif comme accents opposés pour créer un contraste énergique sans compter sur le noir pur. Gardez l'arrière-plan marine-lourd afin que la typographie reste lisible et les lumières semblent intentionnelles. Astuce: Limitez les dégradés à une zone (comme un titre) afin que la mise en page ne devienne pas chaotique.

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

13) Observatoire d'hiver

hexagonal:#070A14#0E1A2B#223A5E#8FB3FF#F3F6FF

Humeur:Calme, cosmique, intelligent

Meilleur pour:Thème de visualisation des données

Calme et cosmique, il ressemble à un observatoire d'hiver avec la lumière fraîche des étoiles. Utilisez le bleu pâle pour les graphiques de lignes et les points forts, tandis que les marines les plus profondes établissent un arrière-plan cohérent pour les tableaux de bord et les rapports. La couleur presque blanche rend les légendes et les étiquettes faciles à scanner dans de petites tailles. Astuce: Augmentez la transparence de la ligne de grille afin que les graphiques ne combattent pas la base sombre.

Exemple d'Image d'Observatoire d'hiver généré à l'aide de media.io

14) Pin et mer profonde

hexagonal:#07101F#0B2545#1B4965#1F7A4D#E8F1F2

Humeur:À la terre, En plein air, rafraîchissant

Meilleur pour:Étiquette d'emballage de marque éco

Terrassé et extérieur, il réunit des bleus de mer profonds avec un souffle de fraîcheur vert pin. Utilisez le vert comme signe de confiance pour les revendications de durabilité, et gardez le bleu pour la structure et la crédibilité. Le neutre glacé pâle fonctionne bien pour les listes d'ingrédients et les détails en petits caractères. Astuce: Choisissez du papier non revêtu pour que les tons foncés soient naturels plutôt que brillants.

Exemple d'Image de pine & deep sea généré en utilisant media.io

15) Boussole en corail

hexagonal:#081A2F#0F2F57#2C5282#FF6B6B#FFF5F5

Humeur:Aventureux, chaleureux, accueillant

Meilleur pour:Écrans d'intégration des applications mobiles

Aventureux et invitant, il ressemble à un marqueur de corail sur une carte nautique. Ces combinaisons de couleurs bleu foncé bleu marine sont idéales lorsque vous voulez la confiance et un accent convivial et humain pour l'embarquement. Utilisez le corail pour les points de progression et les boutons primaires, et gardez le blanc-rose plus doux pour un fond d'écran doux. Astuce: Assurez-vous que coral passe le contraste sur la marine en l'approfondissant légèrement pour un petit texte.

Exemple d'Image de coral compass généré en utilisant media.io

16) Encre royale et lavande

hexagonal:#0B1026#141B41#2E2A8F#B9A7FF

Humeur:Créatif, élégant, un peu rêveur

Meilleur pour:Site web de l'agence créative

Créatif et légèrement rêveur, il se lit comme de l'encre royale adoucie par la brume de lavande. Utilisez l'indigo comme couleur de marque audacieuse pour les titres et les états interactifs, puis gardez la lavande comme teinte de support dans les arrière-plans et les cartes. Le lilas presque blanc garde le contenu de longue forme calme et lisible. Astuce: ajoutez des grains subtils ou des dégradés aux sections de lavande pour éviter une sensation "pastel plat".

Exemple d'Image de royal ink & lavender généré avec media.io

17) Eau salée minimale

hexagonal:#060A10#0C1B2A#1F3B57#9FB7C9#F2F6F9

Humeur:Propre, aéré, moderne

Meilleur pour:Site Web du portefeuille

Propre et aérée, il ressemble à une brume d'eau salée sur une ardoise lisse. Utilisez les teintes les plus sombres pour la navigation et les titres de projets, puis laissez le bleu-gris pâle gérer les arrière-plans et les diviseurs. Cet ensemble fonctionne bien pour les portefeuilles car il encadre les images sans voler l'attention. Conseil: Gardez les ombres subtiles et comptez sur l'espacement pour créer de la profondeur.

Exemple d'Image d'eau salée minimale générée en utilisant media.io

18) Jardin de nuit

hexagonal:#071225#0E2A47#1D4E89#7CCFA8#F3FAF6

Humeur:Frais, botanique, serein

Meilleur pour:Affiche illustration botanique

Serein et botanique, il suggère des feuilles éclairées doucement la nuit avec une atmosphère bleue fraîche. Utilisez le vert menthe pour les détails du feuillage et le bleu pour les lavages de fond et les ombres. Le blanc cassé doux garde la composition respirante et conviviale à l'impression. Astuce: coucher des textures aquarelles afin que les tons profonds restent lumineux plutôt que boueux.

Exemple d'Image de jardin nocturne généré en utilisant media.io

19) Uniforme de pilote

hexagonal:#071021#0F2147#2B3A67#C0C7D1#F7F9FC

Humeur:Structuré, digne de confiance, corporatif

Meilleur pour:Modèle de présentation B2B

Structuré et digne de confiance, il ressemble à un uniforme net avec des détails en métal poli. Utilisez le bleu marine le plus foncé pour les diapositives de titre et les en-têtes de section, puis comptez sur les gris doux pour le contenu du corps et les graphiques. Cette palette se lit bien sur les projecteurs et empêche les longues ponts d'avoir l'air dures. Astuce: Mettez l'accent sur les chiffres clés avec le mid-indigo plutôt que d'introduire de nouvelles couleurs d'accent.

Exemple d'Image d'un uniforme de pilote généré à l'aide de media.io

20) Accent prune crépusculaire

hexagonal:#070B1D#121A3D#243B7B#6D28D9#F5F3FF

Humeur:Audacieux, moderne, créatif

Meilleur pour:Icône de l'application et écran splash

Audacieux et moderne, il ressemble à un bleu crépusculaire ponctué par une lueur de prune. Utilisez le violet comme accent contrôlé pour la marque de l'icône ou le titre d'éclaboussures tout en gardant la plupart des éléments de l'interface utilisateur en bleu marine. Le blanc lavande doux aide les dégradés et les effets de lueur à paraître raffinés plutôt que bruyants. Conseil: Gardez les accents violets cohérents dans tous les États afin que la marque soit cohérente.

Exemple d'Image de twilight plum accent généré en utilisant media.io

Quelles couleurs vont bien avec le bleu foncé bleu marine?

Les accents chauds sont le moyen le plus rapide de rendre le bleu marine accueillant: ivoire, crème, avoine, gris, cuivre et or ajoutent de la douceur et de la chaleur «premium» sans perdre la structure de la palette. Ces paires sont particulièrement solides pour les emballages, les aménagements éditoriaux et les intérieurs.

Pour un look numérique moderne, associez le bleu marine à des teintes cool comme le périwinkle, le bleu glace et le bleu-gris pâle. Ils gardent les interfaces lisibles, réduisent la fatigue oculaire et créent une séparation nette pour les cartes, les tableaux et les arrière-plans.

Si vous voulez de l'énergie, prenez des pops à haute teneur en chrome comme le corail, le jaune agrume, le cyan ou la prune, mais limitez-les aux actions primaires, aux statistiques clés et aux composants de mise en évidence afin que la hiérarchie globale reste calme.

Comment utiliser une Palette de couleurs bleu foncé bleu marine dans des modèles réels

Commencez par attribuer des rôles: utilisez le bleu marine le plus sombre pour les en-têtes/navigation, un bleu marine moyen pour les surfaces ou les sections, et un bleu/gris plus clair pour les cartes et les diviseurs. Cela maintient la profondeur constante et empêche la conception de devenir un seul bloc sombre.

Choisissez ensuite une couleur d'accent pour l'interaction (boutons, liens, états actifs) et une couleur neutre pour la lisibilité (blanc cassé ou gris clair). Dans la plupart des mises en page, cette simple division offre un contraste fort tout en restant cohérent entre les pages et les composants.

Enfin, testez votre palette dans le contexte: les arrière-plans sombres peuvent faire disparaître le petit texte et les icônes fines. Utilisez des poids de police légèrement plus lourds, augmentez la hauteur de ligne et confirmez le contraste pour tous les états (par défaut, survoler, désactivé) avant de mettre à l'échelle le système.

Créez des visuels de Palette bleu foncé bleu marine avec l'IA

Besoin de maquettes qui correspondent à votre palette (tableaux de bord, affiches, invitations, emballages ou intérieurs)? Avec Media.io, vous pouvez transformer une invite en visuels de marque en quelques minutes, puis itérer rapidement en échangeant des accents, des ratios ou des styles.

Pour de meilleurs résultats, faites référence à votre palette dans l'invite en utilisant les noms de couleurs (marine, cobalt, ivoire, or, corail) et décrivez où chaque couleur doit apparaître (arrière-plan, bouton CTA, typographie, cartes). Gardez les mises en page simples afin que les couleurs restent au centre de l'attention.

Une fois que vous avez généré un look que vous aimez, réutilisez la même structure d'invite dans différents formats (social, héros web, modèle de diapositive) pour maintenir un langage de conception cohérent basé sur la marine.

Suivant : Palette de couleurs coucher de soleil