ダークブルーグリーンはネイビーとティールの中間に位置し、信頼感と爽やかさを同時に感じさせます。モダンなUIや高級ブランド、深みを求めるインテリアに最適ですが、真っ黒にはならず奥行きを演出できます。
以下では、HEXコード付きの厳選された20種類のダークブルーグリーンパレットと、ウェブサイトやパッケージ、空間デザインに応用できる実践的な組み合わせのアドバイスや使用例を紹介します。
この記事の内容
ダークブルーグリーンパレットが優れている理由
ダークブルーグリーンパレットはネイビーのような安定感と、グリーンの自然な穏やかさを併せ持ちます。その組み合わせにより多用途性があり、金融やテックに使えるほど真剣さがありつつ、ウェルネスやホスピタリティ、ライフスタイルブランドにも親しみやすい雰囲気を持っています。
また、強いコントラストを生み出します。深いブルーグリーンはナビゲーションやヘッダー、タイポグラフィの基盤となり、明るいシーグラスタイントや温かみのあるオフホワイトがレイアウトの読みやすさとモダンさを保ちます。
最後に、ダークブルーグリーンはデジタルでも印刷でも「高級感」を演出できます。柔らかいニュートラルや刷毛仕上げのメタル、抑えたパステルとの相性も良く、強すぎずに奥行きを生み出します。
20種類以上のダークブルーグリーンカラーパレット案(HEXコード付き)
1)ミッドナイトケルプ

HEX: #061A1F #0B2C35 #0F4C5C #9FB7B6 #F2EFEA
雰囲気: ダーク、洗練、オーシャン感
おすすめ用途: 金融UIダッシュボード
ダークで海の深みを感じるトーンは、月光の下の海藻の森をイメージさせます。ナビゲーションやデータパネルには黒に近い色と深いティールを使い、淡い石色の背景で読みやすさを向上させましょう。細い白の区切り線や柔らかいティールのハイライトと組み合わせると、チャートが鮮明になります。ポイント:最も明るい色は空の状態やツールチップに使い、インターフェイスに余裕を作りましょう。
media.ioを使用して生成されたミッドナイトケルプの画像例
Media.ioはブラウザ上で動画、画像、音声を作成・編集できるオンラインAIスタジオです。
2)ハーバーミスト

HEX: #0D2B33 #1D5B67 #2F8A8A #BFD6D2 #FFF6EE
雰囲気: 穏やか、軽やか、海岸風
おすすめ用途: スパブランドのアイデンティティ
朝霧が港を覆うような穏やかでフレッシュな雰囲気ながら冷たさを感じさせない配色です。中間のティールはロゴやセカンダリーマークに最適で、霧がかったグレーグリーンは背景を柔らかくします。暖かいオフホワイトの紙質や最小限のラインアートと合わせれば高級かつ静かな印象に。ポイント:最も明るいティールをコールトゥアクションのアクセントに使い、ブランドの安らぎを保ちましょう。
media.ioを使用して生成されたハーバーミストの画像例
3)アルパインフィヨルド

HEX: #081B2A #0E3A4A #1D6A7A #7FA6A0 #E7E2D6
雰囲気: シャープ、アウトドア、上品
おすすめ用途: アウトドアギアサイト
シャープかつ爽快で、高地のフィヨルドのスチールブルーの水や常緑樹の影を連想させます。ダークブルーグリーンパレットは、ヒーローヘッダーや商品セクション、技術仕様などコントラストが必要な部分におすすめ。暖かいサンドニュートラルと合わせればページが冷たすぎない印象に。柔らかいグリーングレーは補足テキストに。ポイント:最も暗い色は固定ナビゲーションに、中間ティールはホバーステート用に使い、自信とアウトドア感のあるUIに。
media.ioを使用して生成されたアルパインフィヨルドの画像例
4)インクドパイン

HEX: #07151C #0A2830 #0F5563 #2A9D8F #F3F1EA
雰囲気: 大胆、モダン、エネルギッシュ
おすすめ用途: テックスタートアップのランディングページ
大胆かつインキーで、松の葉が真夜中の絵の具に浸されたような印象です。明るいティールはネオンにならず活力を与えるので、ボタンや主要な数値表示に効果的。暖かいオフホワイトの背景や十分な余白と組み合わせ、高級感のあるランディングページに。ポイント:アクセントのティールは各セクションで一つの主要アクションに限定し、コンバージョンの経路を整理しましょう。
media.ioを使用して生成されたインクドパインの画像例
5)ディープラグーン

HEX: #04161C #063D44 #0B6E6B #7CC6B2 #F7E9D0
雰囲気: トロピカル、豊かな、招き寄せる
おすすめ用途: レストランメニューデザイン
豊かでトロピカル、静かなラグーンに太陽光が浅瀬を照らすような印象です。最も暗い色はセクションヘッダーやボーダーに、シーフォームグリーンは価格ブロックや目立つ部分に使いましょう。暖かいパーチメントや微細なグレインと合わせると、企業色よりも手作り感のある仕上がりに。ポイント:中間ティールのボタニカルアイコンでカテゴリを繋げましょう。
media.ioを使用して生成されたディープラグーンの画像例
6)ヴィンテージノーティカル

HEX: #0B1F2A #124A5A #1E7A8A #D2C3A5 #F6F2E8
雰囲気: クラシック、伝統、マリタイム
おすすめ用途: ウィスキーラベルパッケージ
クラシックで伝統的、古びた船のペイントやキャンバスを思わせます。ダークブルーグリーンのコンビネーションは、伝統とモダンを両立したいラベルなどに映えます。オフホワイトの紙、エンボス加工、暖かいサンドのアクセントで、ヴィンテージ航海図を再現。ポイント:タイポグラフィは黒に近い色で、中間ティールは装飾やボーダーに。
media.ioを使用して生成されたヴィンテージノーティカルの画像例
7)レイニーコンサバトリー

HEX: #0A1C22 #163B44 #2E6F73 #A8B9A6 #ECE7DA
雰囲気: 柔らかい、ボタニカル、居心地よい
おすすめ用途: ボタニカルイラストセット
柔らかで植物的、温室のガラスと雨の葉を感じさせるパレット。控えめなセージで穏やかさを保ち、深いティールが茎や影の葉に構造を与えます。暖かいクリーム紙と軽い鉛筆タッチの組み合わせで、自然で穏やかな仕上がりに。ポイント:最も暗い色は水彩の雰囲気を保つため、深い影の部分に少量だけ使いましょう。
media.ioを使用して生成されたレイニーコンサバトリーの画像例
8)ノルディックライブラリー

HEX: #091A20 #14323D #2E5E6B #C8D0CB #F1EEE6
雰囲気: 静か、学術的、ミニマル
おすすめ用途: 編集誌面スプレッド
静かで学術的、ノルディックな読書室とスレート壁、やわらかな日光の印象です。ブルーグリーンの中間色は、見出しやセクションマーカーに最適で長文テキストを邪魔しません。オフホワイトの余白や抑えたセリフ見出し、細い罫線と組み合わせればモダンな編集リズムが生まれます。ポイント:グレ―グリーンはサイドバーや脚注用の優しい背景に。
media.ioを使用して生成されたノルディックライブラリーの画像例
9)シーグラスベルベット

HEX: #071D24 #0D3F4A #1B7C86 #79C7C7 #FAEBD7
雰囲気: フレッシュ、シルキー、高揚感
おすすめ用途: スキンケア広告
フレッシュでシルキー、深いベルベットのベースに海のガラスのきらめきを感じさせるパレットです。明るいアクアは成分やメリットを強調するのに最適で、ダークティールは広告に高級感を与えます。暖かいベージュと組み合わせれば肌色を引き立て、無機質な印象を避けられます。ポイント:深いティールからアクアへのグラデーションを商品背景に使い、奥行きを出しても散らかさない演出が可能です。
media.io を使用して生成されたシーグラスベルベットの画像例
10) ナイトガーデン

HEX: #05171A #0B2E36 #145E63 #3FA58B #F2F0E6
雰囲気: 神秘的、エレガント、有機的
おすすめ用途: ウェディング招待状セット
神秘的でエレガント、ランタンの灯りが葉に照らされる日暮れ後の庭の式のような雰囲気です。最も暗い色は名前や見出しに使い、グリーンティールのアクセントはモノグラムや花のラインアートに。温かいアイボリー紙と控えめな箔加工を組み合わせて、ロマンチックな仕上げに。アドバイス: アクセントインクはカードごとに1〜2要素で抑えて、セット全体を時代を超越した印象に。
media.io を使用して生成されたナイトガーデンの画像例
11) ストーミーマリーナ

HEX: #071821 #0F3542 #1C5D6B #8BA9A5 #E9E1D2
雰囲気: 劇的、安定、洗練
おすすめ用途: 企業の年次報告
劇的だが安定感があり、嵐がマリーナを通過して静けさに変わる様子のよう。ブルーグリーンはチャートやセクション区切りに自信を与え、温かいニュートラルが冷たくなりすぎないようレイアウトをサポート。クリーンサンセリフでモダンな企業感を。アドバイス: データ系列ごとに1つのティールを割り当て、他はモノクロームにして明確さを保つ。
media.io を使用して生成されたストーミーマリーナの画像例
12) エメラルドアビス

HEX: #041316 #08323B #0A5A5E #0FA37F #F7F3E8
雰囲気: ラグジュアリー、ハイコントラスト、大胆
おすすめ用途: プレミアムアプリのオンボーディング
贅沢でコントラストが高く、深い水からエメラルドの輝きが浮かび上がる印象。鮮やかなグリーンは進捗インジケーターや重要なアクションのマイクロアクセントに適し、暗いベースはテキストを際立たせます。温かいオフホワイト画面と組み合わせて、疲れを避けフレンドリーな体験に。アドバイス: 明るい色は各画面のオンボーディングハイライト一点に絞り、注目を誘導。
media.io を使用して生成されたエメラルドアビスの画像例
13) スレートユーカリ

HEX: #0B1C1F #17383E #2F6B70 #98B2A6 #EFE4D4
雰囲気: 地に足がついた、自然、モダン
おすすめ用途: リビングルームのインテリアスタイリング
落ち着いて自然な雰囲気、スレート石の上のユーカリの葉のよう。ダークティールはアクセント壁や造り付け家具カラーに使い、温かいベージュのテキスタイルや明るい木で和らげます。ブラッシュドブラスのハードウェアを合わせて、やさしい暖かさを加えつつ、涼しげな色調を損なわない。アドバイス: mutedなセージ色をクッションやアートに繰り返して、部屋がテーマ風でなく意図的に見えるように。
media.io を使用して生成されたスレートユーカリの画像例
14) コースタルブループリント

HEX: #061C24 #0B3B4A #136A7A #4CB6B6 #F5F0E6
雰囲気: クリーン、構造的、現代的
おすすめ用途: SaaS価格ページUI
クリーンで構造的、精密な線と海のインクでコースタル設計図を思わせます。ダークトーンはヘッダーや価格カード枠に最適、アクアはバッジやトグルに活気を。温かいオフホワイト基調と控えめな影で信頼感あるSaaSらしさを維持。アドバイス: アクアは推奨プラン専用にして、選択を簡単に。
media.io を使用して生成されたコースタルブループリントの画像例
15) ピーコックシャドウ

HEX: #07141B #0F2E3C #14586D #2D8FA3 #EAD9C3
雰囲気: 芸術的、自信、少しレトロ
おすすめ用途: ギャラリーイベントポスター
芸術的で自信に満ち、暗がりで見た孔雀の羽のような雰囲気。このダークブルーグリーンのカラーパレットは、強い印象を与えたいタイポグラフィポスターに最適。温かいタン地背景と大きなサンセリフで現代ギャラリー感。アドバイス: 最も明るいティールは1つのフォーカルエレメント(日時や会場など)に抑えて階層をコントロール。
media.io を使用して生成されたピーコックシャドウの画像例
16) ディープフォレストデニム

HEX: #06161E #0D2F3A #1E5C5E #6F9C8E #F4EDE1
雰囲気: たくましい、リラックス、アウトドア感
おすすめ用途: ストリートウェアルックブック
たくましくリラックス、森の木陰と擦れたデニムのミックスの印象。最も暗い色は表紙やキャプションに、落ち着いたグリーンはセカンダリ背景やグラフィックブロックに。オフホワイトの余白やシンプルなグリッドレイアウトと組み合わせて、ルックブックをクリーンに。アドバイス: 数ページごとに暖かいニュートラルパネルを一つ加えて、冷調の流れを遮る。
media.io を使用して生成されたディープフォレストデニムの画像例
17) ミュージアムティール

HEX: #071A1E #0E3A43 #1C6B73 #B7C6BF #F2E7D6
雰囲気: キュレーション、静か、高級
おすすめ用途: 展示案内サイン
キュレーションされた静けさ、ギャラリーの壁や緑青、やわらかなスポットライトのよう。ミッドティールは案内表示やセクションカラー分けに強く、淡いグレーグリーンは背景を穏やかに。温かいベージュと明快なアイコンで、来館者が素早くスキャンできるように。アドバイス: 遠距離でのコントラストを確認し、最も暗い色は重要ラベル専用に。
media.io を使用して生成されたミュージアムティールの画像例
18) アークティックスプルース

HEX: #06161A #0B2B33 #16505A #4E7E7B #E6E9E4
雰囲気: クール、ミニマル、呼吸感
おすすめ用途: ヘルスアプリUI
クールで呼吸しやすい雰囲気、淡い冬光に照らされたスプルースの針のよう。ほぼ黒のティールは主テキストやヘッダーに、やわらかいティールはチャートや進捗リングに。氷のようなオフホワイトをメインキャンバスに使い、UIをクリーンかつ安心感あるものに。アドバイス: セカンダリ要素は彩度を抑えて、健康指標が主役になるように。
media.io を使用して生成されたアークティックスプルースの画像例
19) ブルージュニパークレイ

HEX: #071822 #0E3444 #215D6F #A7A39A #F1E4CF
雰囲気: アース感、現代的、バランス
おすすめ用途: 陶器プロダクトパッケージ
アース感と現代的な雰囲気、ジュニパーブルーの深みとクレイの暖かさが融合。これらのダークブルーグリーンは、質感が重要なマットボックスやラベルで特に映えます。ナチュラルクラフト紙、控えめなタイポグラフィ、小さなティールマークで職人感を演出。アドバイス: 温かいベージュを主フィールドにし、ディープティールはブランドブロックや封印用に。
media.io を使用して生成されたブルージュニパークレイの画像例
20) エクリプスボタニカ

HEX: #041216 #092A34 #0E4B5A #2C7F7A #F8F1E3
雰囲気: 神秘的、自然、映画的
おすすめ用途: 書籍カバーデザイン
神秘的かつ映画的、植物園の上にエクリプスが訪れたような印象。ダークベースは力強いタイトルタイポに、やわらかいティールは葉のイラストや控えめなグラデーションに適します。温かいクリームと合わせて、サムネイルや印刷でも読みやすいカバーに。アドバイス: タイトルに高コントラストティールのハイライトを一点使い、明確な焦点を作る。
media.io を使用して生成されたエクリプスボタニカの画像例
ダークブルーグリーンと合う色は?
温かいニュートラルは最大の勝利: アイボリー、クリーム、砂、パーチメントは、ダークブルーグリーンをより柔らかく高級感ある雰囲気に変えます。UIでの可読性も高くなり、純白ほど鋭くならず、十分なコントラストを保てます。
アクセントカラーには、くすんだコーラルやテラコッタ、カッパー、ブラッシュがおすすめ。暖かさと人間味を足せます。シャープで現代的な印象なら、ダークブルーグリーンを淡いアクアや霧のようなグレーグリーン、クールなオフホワイトと組み合わせて、クリーンかつコースタルな雰囲気を。
大胆なハイライトなら、マスタードやゴールドを控えめに—ボタンやバッジ、重要データポイントの強調にだけ使い、パレットが洗練されたままうるさくならないように。
ダークブルーグリーンカラーパレットを実際のデザインで使う方法
ブランディングでは、ディープブルーグリーンを主要な「信頼」カラー(ロゴ、ヘッダー、パッケージパネル)にし、1つ明るいティールをアイコンやセカンダリマークなど補助要素に。温かいニュートラルを主背景にして、システムが重くなりすぎないよう保ちます。
UIデザインでは、ダークブルーグリーンはナビゲーションバーやダッシュボード、ダークモード面で優秀。純黒よりも眩しさを抑えます。インタラクティブ要素には明るいティール(またはエメラルド)を一貫してCTAやトグル、アクティブ状態に。
インテリアでは、ダークブルーグリーンを現代的なネイビーのように使えます:アクセント壁や造り付け、タイルなどに。明るい木、温かいテキスタイル、少量の真鍮や暖かい石と合わせて、居心地よく保ちましょう。
AIでダークブルーグリーンパレットのビジュアルを作成
これらのパレットをコンテキストで見たい場合、着地ページやポスター、商品広告、部屋シーンなどのモックアップをテキストプロンプトで生成するとコントラストやムード、階層の検証が手軽です。
Media.ioのテキスト・画像生成ツールなら高速で反復可能:背景切替や照明、アクセント配置など試行錯誤しつつ、ダークブルーグリーンの核はそのまま。複数コンセプトやA/Bテストが必要な時にも便利です。
ダークブルーグリーンカラーパレット よくある質問
-
「ダークブルーグリーン」とはどんな色ファミリー?
ダークブルーグリーンはネイビーとティールの間の深い色域で、海や常緑樹を思わせるトーン。ほぼ黒のティールや深いシアン寄りブルー、落ち着いたブルーグリーンの中間色を含みます。 -
ダークブルーグリーンは現代的なUI設計に適していますか?
はい。ヘッダーやサイドバー、ダッシュボードなどで専門的かつ純黒よりもコントラストがマイルドになり使いやすい色です。温かいオフホワイト背景(またはやさしいニュートラル)にするとテキストも読みやすくなります。 -
ダークブルーグリーンと最も相性の良いアクセントカラーは?
マスタード/ゴールド、テラコッタ、コーラルは暖かいコントラストを作り、アクアやシーフォームはクリーンでコースタルな雰囲気に。アクセントは1つ選んでCTAや重要ハイライトに一貫して使用してください。 -
ダークブルーグリーンパレットが冷たくなりすぎないには?
温かいニュートラル(クリーム、ベージュ、パーチメント)、自然の質感や、真鍮などの暖かい金属を合わせると良いでしょう。デジタルレイアウトでは純白(#FFFFFF)ではなくやや暖かいホワイトを推奨。 -
ダークブルーグリーンは金融やテックのブランドにも?
もちろん。ネイビーと同様の安定感を伝えつつ、伝統的な企業ブルーよりも現代的かつ人間味があります。抑制されたタイポグラフィと明確なコントラストルールを組み合わせて、高級で信頼感あるアイデンティティに。 -
ダークブルーグリーンパレット使用時のよくある失敗は?
鮮やかなティールを過剰に使うこと。深いブルーグリーンは構造色にし、最も明るいティールやエメラルドはインタラクティブや焦点要素に限定して、階層を明快に保ちましょう。 -
ダークブルーグリーンのパレットを実際のシーンで素早くプレビューするにはどうすればよいですか?
「SaaSの料金ページUI」や「ターコイズ色のアクセントウォールがあるリビングルーム」といったプロンプトを使い、AI画像生成ツールでモックアップを作成しましょう。その後、ブランドのムードや照明に合うようにプロンプトを調整します。

