ブラック・グリーン・ブルーのカラーパレット | #000000 #0b6b3a #1e5aa8

ブラック、グリーン、ブルーは多用途なトリオです：ブラックは権威を与え、グリーンは自然な「信頼」のサインを、ブルーは明確さと構造をもたらします。

以下に、すぐに使えるブラック・グリーン・ブルーの20種のカラーパレット（HEXコード付き）と、アクセントの組み合わせ、コントラスト維持、実際のUIやブランドシステム構築のための実用的なガイダンスを紹介します。

なぜブラック・グリーン・ブルーパレットは優れているのか

ブラック・グリーン・ブルーパレットは、重厚さ（ブラック）、成長と安心感（グリーン）、論理性・能力（ブルー）をバランスよく組み合わせているため、すぐに「デザインされた」印象を与えます。この組み合わせは高級感がありつつ、無機質になりすぎません。

また、強い階層をサポートします：ダークニュートラルで奥行きを演出し、ブルーはインタラクティブな状態やリンクに優れ、グリーンは成功や利用可能、良いフィードバックに自然に対応できます。

さらに重要なのは、このトリオがスタイルを問わずスケールできる点です――ムーディーで映画的、フレッシュでアウトドア風、またはスマートで企業的、ティントの明るさやアクセントの彩度次第で使い分け可能です。

20以上のブラック・グリーン・ブルーカラーパレットアイデア（HEXコード付き）

1）真夜中の港

HEX: #0B0F14 #0F3D2E #1A4E8A #3C7A5E #D7E3F4

雰囲気： ムーディー、落ち着き、洗練

適する用途： SaaSダッシュボードUI

ほの暗い港の光と深い水の影が、落ち着きと高級感のあるトーンを作ります。このブラック・グリーン・ブルーのカラーパレットは、強い階層を保ちつつ過度なコントラストを避けたいSaaSダッシュボードに最適です。広めの余白や細いラインアイコン、淡いティントを組み合わせて明快さを確保しましょう。使い方：鮮やかなブルーは主なCTA用に、グリーンは成功状態専用に。

media.ioで生成した真夜中の港のイメージ例

Media.io

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

今すぐ無料で試す

2）ネオンケルプ

HEX: #040508 #00A86B #005B96 #00D4FF #F2F7FF

雰囲気： エレクトリック、若々しい、ハイコントラスト

適する用途： 音楽フェスのポスター

エレクトリックな海の輝きが、大胆でエネルギッシュ、少し反抗的な雰囲気を演出します。ほぼ黒に近いベースでネオンをコントロールしつつ、シアンとグリーンで動きを表現。サンセリフの圧縮フォントや単純な幾何学図形と組み合わせて、鮮やかなアクセントを可読性高く保ちます。使い方：ネオンシアンは注目させたい箇所に限定、ほとんどのテキストはオフホワイトを使用。

media.ioで生成したネオンケルプのイメージ例

3）北極パイン

HEX: #0A0C10 #1E6B4D #2B6CB0 #A7C7E7 #F5F5F2

雰囲気： フレッシュ、アウトドア、クリスプ

適する用途： 旅行ブログのヒーローバナー

クリスプな空気と常緑樹の小道を、涼しげなブルーの光と大地に根差したパイングリーンで表現。淡いティントが広々としたスペースを作りつつ、見出しは力強く。自然写真やミニマルなグリッドと相性抜群でクリーン＆モダンな印象に。使い方：ライトブルーは透過度を低くしてオーバーレイに使うと画像の視認性が保てます。

media.ioで生成した北極パインのイメージ例

4）美術館の夜

HEX: #111214 #203A2E #1E3A5F #B0B5B9 #E8E2D6

雰囲気： 静寂、洗練、時代を超えて

適する用途： アートギャラリーの招待状

静かなギャラリーの照明とダークな壁が、この組み合わせに時代を超えたキュレーションされた雰囲気をもたらします。ウォームなペーパーティントがブラックを和らげ、グリーンとブルーがインクのような印象に。セリフ体タイポグラフィや十分なマージン、ミニマルなラインイラストと合わせるのがおすすめ。使い方：招待状の背景は暖色ニュートラルを中心に、タイポグラフィの階層にはダークトーンを。

media.ioで生成した美術館の夜イメージ例

5）深海インク

HEX: #06080C #0D5C46 #0B3C6F #2E8BC0 #C8D9E6

雰囲気： ダイナミック、水中、確信

適する用途： テックブランドのランディングページ

ドラマティックな海の深さと自信に満ちたテック感が、インクの影とクリアなブルーで表現されます。明るいブルーがボタンやリンクを際立たせつつ、遊びすぎない雰囲気です。グロッシーなグラデーションは控えめに、抽象的なビジュアルで水中のムードと合わせましょう。使い方：ペールブルーはセクション分けに使うと全体が暗くなりすぎません。

media.ioで生成した深海インクのイメージ例

6）ボタニカルノワール

HEX: #0D0E10 #2C6E49 #1D3557 #84A98C #F1FAEE

雰囲気： アーシー、洗練、落ち着き

適する用途： ウェルネスブランドのアイデンティティ

大地の影や葉のグリーンが、落ち着いた高級感や真夜中のブルーの余韻を与えます。自然の要素を活かしつつ、ウェルネスブランドのためのプロ感も出せます。柔らかい紙の質感や丸みのあるサンセリフ体、ボタニカルラインアートと合わせるのがおすすめ。使い方：セージグリーンをメインの背景に使うと優しい印象が際立ち、重さを感じにくくなります。

media.ioで生成したボタニカルノワールのイメージ例

7）テックオーロラ

HEX: #0B0C10 #00C27A #0066FF #7DF9FF #EDEFF5

雰囲気： 未来的、明るい、エネルギッシュ

適する用途： アプリのオンボーディング画面

未来感のあるオーロラの光がブラックに近いベースに映えて、速さや楽観性を印象付けます。明るいブルーやミントシアンがインタラクティブな瞬間を親しみやすく演出。シンプルなカード、太めのアイコン、短い文章が最適。使い方：画面ごとにアクセントは1色に抑えて、ネオン感を強めすぎないようにします。

media.ioで生成したテックオーロラのイメージ例

8）ビンテージ・フィールドノート

HEX: #1B1C1E #2F5233 #274690 #C2B280 #F0EAD6

雰囲気： ヘリテージ、アウトドア、暖色ニュートラル

適する用途： キャンプギアのパッケージ

ヘリテージノートの色味が、野趣あふれるカラーと混ざり合い、古紙の上に押されたインクのような雰囲気。タンとクリームで親しみやすさを、ディープなグリーンとブルーで耐久性を演出。バッジ型アイコン、クラフト紙風背景、遠目でも読みやすい太めラベルがおすすめ。使い方：パッケージベースにタン、キープロダクト情報には最も濃い色を。

media.ioで生成したビンテージ・フィールドノートのイメージ例

9）嵐のラグーン

HEX: #0F1117 #1B5E4B #1F7A8C #62B6CB #CAE9FF

雰囲気： クール、涼しい、モダン

適する用途： データダッシュボードのグラフ

ラグーンにかかった嵐の雲のようなトーンが、クールで自信のある印象を作ります。ティール系カラーは複数のグラフラインでも混ざらず、淡いブルーがパネルに軽やかさを与えます。細いグリッド線や控えめな影で可読性を保ちましょう。使い方：最も濃い色は軸ラベル、淡いティールは60〜80％透過で塗りに使います。

media.ioで生成された嵐のラグーンの画像例

10）ナイトマーケット看板

HEX: #000000 #0E7C4A #114B9B #F4D35E #F7F7FF

雰囲気： 活気、都会的、パンチのある

適する用途： レストランプロモーションフライヤー

活気ある夜市のエネルギーが、パンチのあるコントラストと温かみのあるイエローのアクセントで表現されています。ブラック・グリーン・ブルーのカラーパターンは、特に太い見出しや明快な価格表示をしたいフードプロモーションに現代的な印象を与えます。コントラストの強い写真の重ね合わせや、シンプルなイラスト素材と組み合わせましょう。使い方のコツ：イエローは重要な強調ポイントのみに使い、看板のように情報が伝わりやすく、ノイズにならないようにしましょう。

media.ioで生成されたナイトマーケット看板の画像例

11）沿岸の森

HEX: #0C0F14 #2E7D32 #1565C0 #90CAF9 #E0F2F1

雰囲気： クリーン、フレンドリー、アウトドア感

適する用途： 環境系NPOウェブサイト

沿岸の空気と森の緑がクリーンでフレンドリー、かつ信頼感のある雰囲気を醸します。明るいスカイブルーがページに楽観的な印象を与え、グリーンが使命感をしっかりと伝えます。ドキュメンタリー写真やシンプルなアイコンと合わせてインパクトを出しましょう。使い方のコツ：ミントグリーン系の色はセクションの背景に使い、長いページも見やすくします。

media.ioで生成された沿岸の森の画像例

12）カーボン＆クロロフィル

HEX: #101215 #1F8A70 #125D98 #97C4B8 #F6F8FA

雰囲気： バランス、現代的、滑らか

適する用途： コーポレートブランディングキット

バランスの取れた現代的なトーンは、磨かれたカーボンファイバーと新緑の葉のような雰囲気です。ブラック・グリーン・ブルーのカラーパレットは、過度にテクノロジー感を演出しすぎず、モダンな企業ブランディングに最適です。余白を広く取り、シンプルなチャートや、一度にひとつのアクセントカラーを使いましょう。使い方のコツ：ティール（青緑）をブランドのシグネチャーアクセントにし、青色はリンクやUI状態に限定しましょう。

media.ioで生成されたカーボン＆クロロフィルの画像例

13）雨の都市ガラス

HEX: #0D1117 #0F766E #1D4ED8 #94A3B8 #F1F5F9

雰囲気： 洗練、雨の日、プロフェッショナル

適する用途： フィンテックモバイルUI

ガラスやアスファルトに映るような、洗練された雨の日のクールさ。スレート系ニュートラルで真面目さを演出し、ティールとブルーで明快なインタラクティブ状態を伝えます。シャープなタイポグラフィやメリハリのあるスペース、シンプルな折れ線グラフで、信頼感のあるフィンテックの雰囲気に。使い方のコツ：スレート色はセカンダリーテキストに使い、明るい背景でまぶしさを抑えましょう。

media.ioで生成された雨の都市ガラスの画像例

14）サファイアモス

HEX: #0A0B0D #3A7D44 #1E40AF #A3B18A #E5E5E5

雰囲気： クラシック、基盤、信頼感

適する用途： ブックカバーデザイン

クラシックで地に足のついた雰囲気は、サファイア色の空の下の苔むした石のよう。深いブルーはタイトルに権威を与え、グリーン系はさりげないイラスト部分を支えます。セリフ体書体と中央に配置したモチーフを組み合わせて文学的な印象に。使い方のコツ：背景は明るいグレーで保ち、ほぼブラックで枠をととのえてシャープさを出しましょう。

media.ioで生成されたサファイアモスの画像例

15）アルパイン・ナイトフォール

HEX: #0B0F1A #1B4332 #1D3557 #457B9D #F1FAEE

雰囲気： 冒険的、クール、映画的

適する用途： アウトドアブランドのルックブック

シネマティックなアルプスの夜の景色は、冒険心とシャープさ、そして少し神秘的な印象を与えます。重ね合わせたブルーは編集レイアウトを支え、フォレストグリーンがワイルドな雰囲気を加えます。全面写真やクリーンなキャプションと組み合わせ、カラーを枠やセクションマーカーの役割として活用しましょう。使い方のコツ：本文テキストは白系色に、引き立つ引用部は明るめのブルーを使いましょう。

media.ioで生成されたアルパイン・ナイトフォールの画像例

16）ギャラリーミニマル

HEX: #121316 #1C5D3A #2B59C3 #D9D9D9 #FFFFFF

雰囲気： ミニマル、クリーン、プレミアム

適する用途： ポートフォリオウェブサイトUI

ミニマルでプレミアム、静かなギャラリーの壁にひとつだけ主張するアートのよう。ホワイトとライトグレーが主役で、グリーンとブルーは効果的なアクセントになります。力強いタイポグラフィーとゆとりのあるスペースで作品を引き立てましょう。使い方のコツ：アクセントグリーンはホバー時のみ、ブルーは主ボタンのみに使いましょう。

media.ioで生成されたギャラリーミニマルの画像例

17）ストリートウェア・ミッドナイト

HEX: #050505 #145A32 #0B2F6B #2ECC71 #1ABCFE

雰囲気： ボールド、スポーティ、ストリート

適する用途： ストリートウェア商品の広告

ストリートのエネルギーとシャープなコントラスト、スポーティな彩度が際立ちます。深いベースカラーが夜のジャケットの反射ディテールのようにグリーンやブルーを引き立てます。大きな文字、タイトなクロップ、シンプルな価格表示ブロックで最大のインパクトを得ましょう。使い方のコツ：背景はほぼブラック、明るいアクセントはエッジや重要メッセージのみに活用しましょう。

media.ioで生成されたストリートウェア・ミッドナイトの画像例

18）オーシャニック・データビズ

HEX: #0E1013 #007F5F #2D6CDF #A9DEF9 #F8F9FA

雰囲気： クリア、分析的、モダン

適する用途： プレゼンテーションスライドデック

視認性が高く分析的、穏やかな海面上にチャートが浮かんでいるような雰囲気。ブラック・グリーン・ブルーの配色はカテゴリーを分けながらも、スライドのプロフェッショナルさを保ちます。シンプルな棒グラフ、大きめの余白、1スライドごとにワンポイントアクセント色でわかりやすく。使い方のコツ：最もダークな色をタイトルに使い、淡いブルーはチャートのグリッド背景など控えめな用途に。

media.ioで生成されたオーシャニック・データビズの画像例

19）ウィンターボタニカル

HEX: #0C0D10 #2D6A4F #1B4965 #B7E4C7 #E9F5DB

雰囲気： 柔らかい、ナチュラル、さわやか

適する用途： 水彩ボタニカルイラスト

冬の淡いグリーンと涼しいインクブルーが、雨上がりの葉のようにさわやかな印象です。淡いミントとクリーム色が柔らかくエアリーな雰囲気でイラスト向き。細いラインや淡いぼかしを組み合わせることで、ダーク色も上品に仕上がります。使い方のコツ：ほぼブラックの色は一番細い輪郭線のみに使い、繊細さをキープしましょう。

media.ioで生成されたウィンターボタニカルの画像例

20）ナイトオブザーバトリー

HEX: #070A0F #124A3A #0A3D62 #3C91E6 #DCEAF7

雰囲気： 神秘的、広がり、輝き

適する用途： サイエンスニュースレターヘッダー

神秘的で広がりがあり、夜空にクリーンな光が差したような雰囲気。明るいブルーが深いベースの上で輝き、現代的なサイエンスブランドに最適です。シンプルな星やドット模様、十分な余白と合わせて見出しを引き立てましょう。使い方のコツ：見出し周辺に淡い色を敷き、あらゆるデバイスで読みやすさを保ちます。

media.ioで生成されたナイトオブザーバトリーの画像例

ブラック・グリーン・ブルーに合う色は？

ウォームニュートラルはもっとも簡単に組み合わせられます。ペーパーホワイト、ウォームグレー、サンド、クリームがクールベースをやわらげ、レイアウトが「ナイトモード」になりすぎるのを防ぎます。

パンチのあるアクセントにはイエロー／ゴールド（看板のエネルギー）、コーラル（現代的なコントラスト）、カッパー／ブロンズ（高級な誌面感）を。アクセントは小さく抑えて配色にまとまりを持たせましょう。

より深みが必要なら、スレートやスチールブルーグレーをセカンダリーテキストや面に加えましょう。これでほぼブラックのセクションと明るいコンテンツ部分の切り替えもスムーズに。

実際のデザインでブラック・グリーン・ブルーパレットを使うには

役割を明確に：テキストや構造にはブラック・ほぼブラック、主要アクションやリンクにはブルー、成功状態や「ポジティブな指標」にはグリーンを使いましょう。直感的なUIに仕上がります。

鮮やかさは一度に多くのアクセント色を使わないことで調整します。画面（またはセクション）ごとに目立つボタン色を1色に絞れば、デザインが騒がしくなりません。

コントラストは早い段階で計画しましょう。特にダークUIでは、本文や主要面に淡いトーンを割り当て、ティールやブルーの中間色はカード・チャート・タグ・仕切りなどに使いましょう。

AIでブラック・グリーン・ブルーパレットのビジュアルを作成する

配色案をクライアントやチームにプレゼンするなら、スウォッチだけでなくビジュアルモックアップ（UI、ポスター、招待状、ブランドボードなど）を作ると判断が速まります。

Media.ioを使えば、短いプロンプトからブランド調のイメージが即生成でき、バリエーションを簡単に試したり、複数コンセプトの配色整合性も簡単に保てます。ツール切り替えやインストールも不要です。

次へ： バーントアンバーのカラーパレット