ブルーダークグリーンの色組み合わせ23選｜HexコードとAIデザイン

青とダークグリーンのカラーパレットは、深い青の安定感と森の緑の落ち着きを組み合わせています。その結果、ムーディーで高級感のある印象となり、ブランディングやUI、ポスター、パッケージングに幅広く活用できます。

下記には、HEXコード付きですぐに使える20種類以上のブルー＆ダークグリーン系パレットアイデアと、AI生成画像のプロンプト例を紹介しています。これにより、簡単にマッチするビジュアルを作成できます。

ブルー＆ダークグリーンパレットが優れている理由

ブルーはクリアさと信頼感をもたらし、ダークグリーンは自然で落ち着いた印象を与えます。組み合わせることで、派手すぎず自信のある雰囲気になり、UIやテック、金融、アウトドアブランドで人気です。

この組み合わせはコントラスト管理も得意です：ディープネイビーはタイポグラフィやヘッダーの軸となり、ダークグリーンはステート（ホバー、成功、ナビゲーション）の表現に役立ち、明るい赤のような「警告」感を出しません。

さらにブルー＆ダークグリーン配色はニュートラルカラーとも合わせやすいです ― モダンなインターフェースにはクールグレー、印刷物には暖かいクリームを選べば、背景を変えるだけでミニマルにもラグジュアリーにも演出可能です。

20種類以上のブルー＆ダークグリーンの配色アイデア（HEXコード付き）

1）ミッドナイトケルプ

HEX： #071a2f #0b3b2e #0f5b6b #2a4f7a #d7e3ee

雰囲気： ムーディー、沿岸、洗練

最適： SaaSダッシュボードUI

真夜中の水とケルプの森のようなムーディーな海岸トーンが、落ち着きと高級感を演出します。ディープネイビーはヘッダーに、ダークグリーンはナビゲーションのステートに、ティールは小さなアクセントに使いましょう。背景はクールライトグレーで可読性を保って。ポイント：ティールはアクティブアイコンやプライマリボタンだけに使い、UIに意図的な印象を与えます。

media.ioで生成したMidnight Kelpの画像例

Media.io

Media.ioは、ブラウザ上で動画・画像・音声の作成や編集ができるオンラインAIスタジオです。

今すぐ無料で試す

2）ディープシーライブラリー

HEX： #0a1633 #103a33 #1f6a7a #4f6f8a #f2f6f8

雰囲気： 静か、学術的、エレガント

最適： 雑誌の誌面レイアウト

静かで知的な雰囲気は、夜の海辺での読書室のよう。ダークネイビーとエバーグリーンは見出しに自信を与え、優しいスレートブルーは本文や引用を支えます。白スペースをしっかりとって重苦しくならないように。ポイント：ティールはセクションマークやページ番号などガイド用に控えめに使いましょう。

media.ioで生成したDeep Sea Libraryの画像例

3）ストーミーハーバー

HEX： #0b203f #0e3f35 #2d6f85 #7c94a6 #e6edf2

雰囲気： 劇的、モダン、自信

最適： ブランドアイデンティティシステム

ドラマチックな港の青と深い緑は風や鋼、海水のエネルギーを感じさせます。冷たくなりすぎず、テック・金融・アウトドアブランドにも信頼感を与える配色です。濃い色はソフトな霧のグレーと合わせて、ロゴや文字組をクリアに。ポイント：ライトグレーを主役にし、ヘッドラインでネイビーを効かせましょう。

media.ioで生成したStormy Harborの画像例

4）アークティックパイン

HEX： #0a1f3a #0c4a3a #2b7a8a #8fb3c7 #f4fbff

雰囲気： 新鮮、アウトドア、クリア

最適： 旅行サイトのヒーローセクション

爽やかでアウトドア感のある配色は、雪の空気とダークパイン、遠くの青い稜線をイメージさせます。アイシーな淡色を広い背景に、ネイビーを見出し、ディープグリーンをボタンに使い、ティールでアクセントを。ポイント：グラデーションは明るい2色の間だけで、濁りを避けましょう。

media.ioで生成したArctic Pineの画像例

5）インク＆ジュニパー

HEX： #08152a #123c2f #165f6c #3c5876 #d9d5cd

雰囲気： クラシック、ボタニカル、控えめ

最適： 高級スキンケアパッケージ

クラシックで植物的、「インクのスケッチとジュニパーの枝」のようです。温かみのあるオフホワイトが暗い色合いを柔らげ、高級感のあるパッケージに。マットな質感とミニマルなタイポグラフィで清潔感ある印象に。ポイント：ティールは封印や原料のアクセントなど小さな使い方だけに抑え、ラベルを上品に保ちましょう。

media.ioで生成したInk and Juniperの画像例

6）ノーザンライツデニム

HEX： #0c2140 #0f4b3a #1f7785 #4c86b5 #eaf1f6

雰囲気： エネルギッシュ、シャープ、現代的

最適： スポーツウェア広告

シャープでエネルギッシュな配色は、オーロラとダークエバーグリーン、デニムの擦れを連想させます。ヒーロー背景には鮮やかなブルー、製品コールアウトにグリーン、動きを表現するティールラインを活用。テキストはほぼ白にしてコントラストを最大化。ポイント：デニムブルーからティールへのシングルグラデーションで奥行きを作り、色数は増やさないように。

media.ioで生成したNorthern Lights Denimの画像例

7）オーシャニックスレート

HEX： #0a1d33 #0d3f34 #2a6a78 #6e8796 #f0f3f5

雰囲気： ミニマル、グラウンデッド、プロフェッショナル

最適： 企業用スライド資料

ミニマルで安定感のある配色は、スレートの崖と深い水のイメージ。チャートや区切りにグレーブルー、タイトルにネイビー、重要数字にエバーグリーンを使い、淡い背景で会議にも合うクリーンな資料に。ポイント：スライドごとに2色＋アクセント1色に絞り、視覚的な雑音を防ぎましょう。

media.ioで生成したOceanic Slateの画像例

8）ノーティカルエバーグリーン

HEX： #061a36 #0a4636 #0f6375 #3e6f9c #fff4e6

雰囲気： ノーティカル、大胆、親しみやすい

最適： レストランメニューのデザイン

海を感じるノーティカルで親しみやすい配色は、ロープやシーグラス、エバーグリーンの海岸を思わせます。このブルー＆ダークグリーン配色は、堅苦しくなりすぎず高級感のあるメニューに最適。ダークカラーはウォームクリーム系の紙色やシンプルセリフ体と組み合わせて。ポイント：ティールはセクション見出し強調に使い、素早い視認性を促進します。

media.ioで生成したNautical Evergreenの画像例

9）アルパインダスク

HEX： #0d1b3a #114336 #2b5f86 #6aa1a9 #e9efe8

雰囲気： 穏やか、冒険的、バランスが取れている

最適： アウトドアイベントポスター

アルプスの湖に夕暮れが訪れるような穏やかさで、クールなブルーと落ち着いたフォレストグリーンの組み合わせがバランスを保ちます。ポスターのタイトルにはネイビーを使い、ミントグレーの背景を用いることで遠くからでも読みやすくなります。日付や場所のバッジ、小さなアイコンにはティールがよく合います。コツ：最も濃い2色を使ってシンプルな2色の山のシルエットを加えると、一気にテーマを表現できます。

media.ioで生成したアルプスの夕暮れの画像例

10）マリンモス

HEX： #091a2e #0f3e2f #1a6c79 #5e7fa7 #dfe7e3

雰囲気： ナチュラル、穏やか、癒し

最適： ウェルネスアプリUI

ナチュラルでリフレッシュできる色で、澄んだ水中を揺れる海藻のようなイメージです。淡いグレーグリーンをベースに、テキストにはネイビーを使ってアクセシビリティも確保しましょう。進捗リングや優しいハイライトにティールを使い、控えめなブルーはセカンダリーカードのサポートに。コツ：アニメーションはゆっくりと控えめにすると、このパレットがスポーティーではなくリラックス感を伝えます。

media.ioで生成したマリンモスの画像例

11）ペトロールフォレスト

HEX： #0b2036 #0b4a39 #1e6f7d #2f4f6f #c9d1d9

雰囲気： インダストリアル、力強い、モダン

最適： プロダクトランディングページ

力強くインダストリアルな印象で、ペトロールブルーの金属と深い森のトーンを感じさせます。見出しやフッターには濃い組み合わせを使い、コンテンツエリアはクールなライトグレーで開放感を。ティールはリンクや特徴的な要素のシャープでモダンなアクセントに最適。コツ：ページを忙しく感じさせず、スレートブルーの細いラインアイコンを加えて情報性をアップしましょう。

media.ioで生成したペトロールフォレストの画像例

12）雨のシティパーク

HEX： #0a2039 #0f3b31 #2b6273 #86a3b1 #f5f7f6

雰囲気： ソフト、都会的、内省的

最適： ブックカバーデザイン

ソフトで内省的な雰囲気の色合いは、雨に濡れた歩道と都会の公園の常緑樹を思い出させます。タイトルにはネイビーを使い存在感を持たせ、ミスティブルーグレーは背景ブロックにぴったり。ダークグリーンは著者名や小さなモチーフのアクセントに。コツ：パレットがモダンに保たれるように、テクスチャは細かいグレイン程度に控えめにしましょう。

media.ioで生成した雨のシティパークの画像例

13）ビンテージティール書斎

HEX： #0b1a34 #124236 #1b6a72 #6f8b7e #f1e6d6

雰囲気： ビンテージ、居心地の良い、知的

最適： カフェブランドキット

ビンテージで居心地の良い雰囲気は、くすんだノートと暖かな紙が置かれたティール色の書斎のよう。クリームベージュがクールなトーンを和らげ、ロゴやラベル、小さなサイネージに最適です。クラシックなセリフ体やネイビーのシンプルなラインイラストと合わせて。コツ：ダークグリーンをスタンプやバッジに使えば、手作り感が加わります。

media.ioで生成したビンテージティール書斎の画像例

14）ディープラグーンマーブル

HEX： #071b33 #0c4537 #1a7a88 #3d6a8f #e8ecef

雰囲気： ラグジュアリー、クール、洗練

最適： ジュエリープロダクトパッケージ

ラグジュアリーでクールな印象は、ディープラグーンの大理石とシャープで磨かれたエッジをイメージさせます。淡いグレーを箱のベースに、ロゴはネイビーで印刷をクリアに。ダークグリーンは高級感を、ティールは箔押しや内側の紙模様に最適です。コツ：表面仕上げはマットやグロスなど1つのアクセントに絞って統一感を持たせましょう。

media.ioで生成したディープラグーンマーブルの画像例

15）コズミックタイド

HEX： #08122d #0d3c33 #136d8a #3b5aa6 #d9e6ff

雰囲気： 未来的、鮮やか、深み

最適： 音楽フェスティバルフライヤー

未来的で深みのある印象は、星明かりの下で広がる宇宙の波のようです。コントラストを強くして明るいアイスブルーを加えると、ブルー×ダークグリーンの組み合わせがフライヤー上でよく映えます。エネルギッシュなコバルトの幾何学や大胆なサンセリフ体と合わせて。コツ：背景はネイビー主体にして、ティールやアイスのハイライトが遠くからも目立つようにしましょう。

media.ioで生成したコズミックタイドの画像例

16）エメラルドブループリント

HEX： #0b1f3a #0e4a3b #0f6f7a #5b86a6 #f6fbff

雰囲気： 精密、テクノロジー感、信頼感

最適： フィンテックアプリのオンボーディング

精密でテクノロジー感のある雰囲気は、海の色で描かれた設計図のようです。最も明るい色をオンボーディング画面に使い親しみやすさを出し、主要ステップはネイビーの見出しで固定。エメラルドグリーンは成功メッセージに最適、ティールはインタラクティブ要素を際立たせます。コツ：設計図らしさを保つためにアイコン配色は1色に抑えましょう。

media.ioで生成したエメラルドブループリントの画像例

17）シーグラスノワール

HEX： #050f1f #0b3228 #145b66 #2f4b63 #cfd6d2

雰囲気： ダーク、シネマティック、スタイリッシュ

最適： 映画ポスター

ダークでシネマティックな雰囲気は、ほぼ黒い水面に映るシーグラスのシルエットのようです。ほぼブラックのネイビーを背景に、淡いグレーのタイポグラフィで読みやすさを確保。ティールやディープグリーンは控えめな光るアクセントや小さいグラフィックに。コツ：大きな余白を活かし、意図的かつハイエンドなポスターに仕上げましょう。

media.ioで生成したシーグラスノワールの画像例

18）ブルースプルースベルベット

HEX： #0a1e3c #0f3f34 #1f6f8b #3f6b85 #efe8de

雰囲気： 上品、ウィンター、ハイエンド

最適： ウェディング招待状セット

上品で冬らしい、ブルーベルベットとスプルースの枝が組み合わさったような質感。暖かみのあるアイボリーがロマンチックさを保ち、ネイビーやディープグリーンがフォーマル感を演出します。ティールは控えめな縁取りやモノグラムに最適。コツ：最も濃い色でレタープレスやエンボス加工を施し、手触り感を演出しましょう。

media.ioで生成したブルースプルースベルベットの画像例

19）ハーバーフォグ

HEX： #0b1d36 #103e33 #2c6d7f #9db0bf #fbfcfd

雰囲気： エアリー、穏やか、モダン

最適： ポートフォリオWeb UI

エアリーで穏やかな雰囲気は、静かな港に漂う霧のよう。ページはほぼホワイトとライトブルーグレーで構成し、見出しにネイビー、ホバー時はダークグリーンを。ティールはリンクやタグの控えめなアクセントがベスト。コツ：画像は彩度を落とし、霧がかったトーンと調和させましょう。

media.ioで生成したハーバーフォグの画像例

20）ダークアクアボタニカ

HEX： #0a1b35 #0b4532 #167a86 #5e90a2 #e7f2ea

雰囲気： 緑豊か、フレッシュ、落ち着き

最適： ボタニカル水彩イラスト

緑豊かで落ち着いた色合いは、艶のある葉の下に広がるダークアクアの影を感じさせます。深いネイビーで輪郭を描き、リーフのボディにはグリーン、ハイライトには水っぽいティールを。コツ：明るいミント部分は紙のまま残して、エアリーな雰囲気を損なわないようにしましょう。

media.ioで生成したダークアクアボタニカの画像例

21）タイダルワークショップ

HEX： #081c34 #0f3f33 #1c6b84 #477193 #e3e9ef

雰囲気： 実用的、クリエイティブ、集中

最適： ワークショップイベントランディングページ

実用的で集中しやすい雰囲気は、道具がきちんと並ぶ潮流のワークショップのよう。濃いベースカラーでヘッダーやナビゲーションに構造を持たせ、ライトグレーでフォームの親しみやすさを。ティールはサインアップボタンや重要ステップの力強いアクセントに。コツ：セカンダリーカードには控えめなブルーを使い、主なアクションボタンを際立たせます。

media.ioで生成したタイダルワークショップの画像例

22）サファイアグローブ

HEX： #0a1a3f #0c3e35 #1b6f7f #2f63b6 #e9f0ff

雰囲気： 大胆、若々しい、鮮やか

最適： SNSカルーセルデザイン

大胆で若々しい印象は、鮮やかなサファイアカラーに落ち着いたグリーンが根を張るグローブのよう。特徴スライドには鮮やかなブルーを使い、タイポブロックはネイビーとダークグリーンでバランスを。ティールはアイコンや小さな区切り線に使うと統一感が生まれます。コツ：各スライドはヒーローカラー1色＋ニュートラルで、リズムをクリーンに保ちましょう。

media.ioで生成したサファイアグローブの画像例

23）エバーグリーンベイコントラスト

HEX： #081a30 #0a4a38 #0f6f82 #6c8fa8 #f7f8f4

雰囲気： シャープ、高コントラスト、コンテンポラリー

最適： アプリアイコン＆スプラッシュスクリーン

シャープで現代的で、明るい湾にそびえる常緑の崖のように見えます。この青とダークグリーンのカラ―コンビネーションは、形をシンプルにしエッジをすっきり保つことで、アイコンのコントラストを強く演出します。スプラッシュ画面には最もダークなネイビーと暖かいオフホワイトを組み合わせ、ティールは小さなグローやリングとして追加します。ヒント：アイコンそのものにグラデーションは使わず、背景のみで使用しましょう。

media.ioを使って生成したエバーグリーンベイのコントラストの画像例

ブルー＆ダークグリーンに合う色は？

ニュートラルカラーは最も合わせやすい色です：クールなホワイト、霧がかったグレー、スレートトーンは、ブルーとダークグリーンがモダンかつ読みやすく感じられます。印刷物の場合は、暖かいオフホワイトやクリーム色を選ぶと、パレットがより親しみやすく高級感を持ちます。

アクセントには、ティールや淡いアイスブルーが雰囲気を壊さずに明快さを加えます。よりリッチな仕上げにしたい場合は、ブラッシュドシルバー（クール）や落ち着いたゴールド／ブロンズ（ウォーム）などのメタリックを加えることで、ダークネイビーやエバーグリーンを引き立てます。

重くなりすぎないように、「エアー」カラー（ほぼ白／非常に明るいグレー）をメイン背景に使い、2色のダークカラーを構成やテキストに使いましょう。

ブルー＆ダークグリーンの配色を実際のデザインで使う方法

UIデザインでは、ネイビーをタイポグラフィの基準色（見出し、タイトル、主要UIパーツに）として扱い、ダークグリーンはステート（ホバー、選択中、成功）に使用すると一貫性のある操作感が得られます。インターフェースを集中させるには、プライマリアクションにのみティールを使いましょう。

ブランディングでは、ロゴが濃い色（ネイビーまたはほぼブラック）と明るいニュートラルの1色で機能するか確認してください。そのうえで、ダークグリーンをパッケージ、パターン、セカンダリーマークなどの補助的なブランドカラーとして導入します。

ポスターやSNS用グラフィックでは、コントラストを強調しましょう：背景はほぼネイビーに、ビッグタイプには明るいニュートラルを使い、日付やバッジ、アイコンなどの「信号色」として少量のティールを加えます。

AIでブルー＆ダークグリーンパレットのビジュアルを作ろう

すでにHEXコードがある場合は、レイアウト（ポスター、アプリー画面、パッケージ）を説明し、各色がどこに使われるのか（背景、見出し、ボタン、アクセント）を指定することで、マッチしたモックアップが生成できます。

一貫した結果を得るには、キャンペーン全体で同じプロンプト構成を再利用し、内容（メニュー、チラシ、オンボーディング画面）だけを入れ替えましょう。これにより、ライティング、スペーシング、スタイルが統一され、パレットもブランドイメージを保つことができます。

次へ： キャメルカラーパレット