人気のブラック・ブルー・グレー配色20選｜Hexカラーコード付き

ブラック ブルー グレーのカラー パレットは、権威 (ブラック)、信頼 (ブルー)、汎用性 (グレー) のバランスが取れているため、モダンなインターフェイス、プレミアム ブランディング、落ち着いたインテリアに最適です。

以下は、16進コードを備えたムーディーで鮮明な黒、青、グレーの20の色の組み合わせに加えて、一致するビジュアルを生成するために再利用できる実用的なヒントとAIプロンプトを示します。

ブラック ブルー グレー パレットがうまく機能する理由

黒、青、グレーは自然に明確な階層を作成します。暗い色は構造を定義し、灰色は読みやすさをサポートし、青は行動と信頼を示します。そのため、このトリオは、状態、強調、ナビゲーションを即座に理解する必要があるUIに特に効果的です。

これらのトーンも「完成」しており、プレミアムに感じられます。ブラックとチャコールは権威を伝え、ブルーは大きな彩度を必要とせずに、モダンでテクノロジー先進のエッジを追加します。

最後に、黒、青、グレーの配色はメディア全体で柔軟です。ダーク モード、ライト レイアウト、プリント、インテリアで実行し、必要に応じて暖かいニュートラル (クリームなど) を導入して気分を和らげることができます。

20 以上のブラック ブルー グレー カラー パレットのアイデア (十六進コード付き)

1) ミッドナイトハーバー

十六進：#0b1320 #0f2438 #1b4f72 #6b7785 #d7dee6

気分：ムーディー、洗練された、海岸

最適な場合:フィンテックランディングページUI

ムーディーな港のライトと深い水の反射が、洗練された自信に満ちたトーンを設定します。このブラック ブルー グレーのカラー パレットは、特に背景を暗くして明るいグレーに読みやすさを与える場合、fintech や SaaS にとって信頼できると感じます。さわやかなホワイトスペースと、ボタンやキー統計のクリームのような温かみのあるアクセントと組み合わせてください。ヒント: 視覚的なノイズを避けるために、明るい青を 1 つのプライマリ CTA に予約してください。

media.ioを使って生成したミッドナイトハーバーの画像例

メディア.io

Media.io は、ブラウザでビデオ、画像、オーディオを作成および編集するためのオンライン AI スタジオです。

今すぐ無料でお試しください

2) グラファイトアジュール

十六進：#0a0d10 #1d2a3a #2b6cb0 #8a97a6 #eef2f6

気分：洗練された、技術的な、ハイコントラスト

最適な場合:アプリダッシュボードUI

洗練されたグラファイトシャドウとすっきりとしたアズールポップが、シャープでモダンな雰囲気を演出します。階層が重要なダッシュボードに適しており、構造には暗いパネル、呼吸スペースには淡いグレーがあります。シンプルなアイコンと薄い仕切りと組み合わせて、インターフェイスを鮮明に保ちます。ヒント: チャートとアクティブな状態の唯一の飽和要素として azure を使用します。

media.ioを使って生成したgraphite azureの画像例

3) Steelwave 最小

十六進：#111418 #223042 #3a86c8 #9aa6b2 #cfd6de

気分：ミニマル、落ち着いた、現代的

最適な場合:プレゼンテーションスライドデッキ

穏やかなブルーの流れに落ち着いたスチールトーンが叫ぶことなくモダンに感じられます。このミックスは、特にチャートを読みやすくプロフェッショナルなものにしたい場合、スライド デッキに最適です。写真ではなく、たくさんのネガティブなスペースと幾何学的な形状とペアリングします。ヒント: 見出しをほぼ黒にし、中央のグレーを本文のテキストに使用して、プロジェクターのまぶしさを軽減します。

media.ioを使って生成したsteelwave minimalの画像例

4) Stormcloud オフィス

十六進：#0f1115 #202a34 #2f4a63 #7d8b99 #f3f5f7

気分：プロフェッショナル、地に足のついた、控えめな

最適な場合:コーポレートサイト ヒーローバナー

接地されたストームクラウドニュートラルは、安定した信頼できる存在感をもたらします。このセットは、タイプとメッセージングがリードする必要がある企業のヒーローセクションに使用し、微妙な青い深さでサポートされています。モノクロの写真と柔らかいオフホワイトの背景と組み合わせると、親しみやすさを保ちます。ヒント: 薄い青い下線またはルールを追加して、コピーを圧倒することなく目を導きます。

media.ioを使って生成したstormcloud officeの画像例

5) 北极の夜のUI

十六進：#0b0e13 #1a2330 #1f6feb #a8b3bf #e6ebf0

気分：シャキシャキ、夜行性、高透明度

最適な場合:ダークモード モバイル アプリ UI

夜の暗いパネルに対する鮮明な北極のハイライトは、清潔で速い感じがします。強い青はインタラクティブと読み取られるため、ダークモードのナビゲーション、トグル、リンクに最適です。シンプルなラインアイコンと抑制された影を組み合わせると、濁りを避けます。ヒント: テキストには純白の代わりにライトグレーを使用して、目の疲れを軽減します。

media.ioを使って生成した北極の夜uiの画像例

6) デニムコンクリート

十六進：#121212 #2a2f35 #2b4c7e #88939f #d9dee3

気分：都会的、実用的、バランスの取れた

最適な場合:ストリートウェアのルックブックレイアウト

デニムの奥行きがある都会的なコンクリートグレーは、実用的でスタイリッシュな感じがします。このミックスは、製品写真のクールでモダンな背景が必要なルックブックやカタログに適しています。また、ミッドグレーがレイアウトを表現し、ブルーが控えめに使用されている場合、印刷でもよく読めます。ヒント: キャプションは明るい灰色にし、青はセクション ヘッダーのみに予約します。

media.ioを使って生成したデニムコンクリートの画像例

7) コバルト烟

十六進：#0c0f14 #243447 #2f81f7 #5f6b76 #b9c2cc

気分：エネルギッシュ、スモーキー、モダン

最適な場合:eスポーツストリームオーバーレイ

コバルトのヒットを加えたスモーキーなダークは、エネルギッシュで競争力があります。コントラストを即座に実現する必要があるオーバーレイ、スコアボード、および下位 3 分の 1 に使用します。大胆な凝縮タイプと角度のあるセパレーターと組み合わせると、よりシャープなエッジが得られます。ヒント: 明るいブルーをレイアウトの 10 ~ 15 パーセントに保つことで、特別な雰囲気を保ちます。

media.ioを使って生成したコバルト煙の画像例

8) スレートの青写真

十六進：#0e1013 #1c2836 #274c77 #98a4b3 #f0f2f4

気分：構造化された、インテリジェント、落ち着いた

最適な場合:アーキテクチャポートフォリオウェブサイト

構造化されたスレートとブループリントブルーは、精度と計画を呼び起こします。レイアウトがきれいで、測定されていて、スキャンしやすくなければならないアーキテクチャとエンジニアリングのポートフォリオに適合します。細いグリッドラインと寛大なマージンと組み合わせて、青写真の雰囲気を強化します。ヒント: ページの背景として最も明るいトーンを使用し、ナビゲーションに最も暗いトーンを使用してエレガントなフレームを作成します。

media.ioを使用して生成されたスレートブループリントの画像例

9) 霧の桟橋

十六進：#0d1014 #2b3a42 #1d5c8a #aab4bf #e9edf2

気分：霧がかかっていて静かで親しみやすい

最適な場合:ブログヘッダー及びタイポグラフィシステム

柔らかいオーシャンブルーを加えたミスティピアグレーは静かで読みやすい感じがします。このセットは、ドラマよりも快適さが重要なブログや長文ページに強力です。温かみのある紙のような背景と微妙なラインアートを組み合わせると、より柔らかい編集タッチが得られます。ヒント: セカンダリ テキストにはミッド グレーを使用し、一貫したナビゲーション キューのためにリンクを青に保ちます。

media.ioで生成された霧がかった桟橋の画像例

10) デジタルスチール

十六進： #0a0c10 #202737 #345995 #707b86 #d5dbe2

気分： クリーン、テクニカル、モダン

最適な場合: SaaS製品の機能ページ

クリーンでテクニカルな色調は、ブラッシュドメタルや磨かれたガラスのような雰囲気を持ちます。アイコン、図、スクリーンショットに落ち着いたフレームが必要な機能ページに最適です。控えめなクリーム色のバッジなど、暖かみのあるアクセントと組み合わせてレイアウトを人間味のあるものにしましょう。コツ：背景は明るく保ち、最も暗い色は見出しや重要なラベルのみに使います。

media.ioで生成されたデジタルスチールの画像例

11) ミュージアムイブニング

十六進： #0f1216 #252c35 #2a5d9f #7a8694 #f5f6f7

気分： 洗練、エレガント、控えめ

最適な場合: イベント招待フライヤー

洗練された夜の色調は、静かなギャラリーのスポットライトの当たったディテールのような雰囲気です。このパレットは、タイポグラフィを高級かつ落ち着いた印象にしたい招待状に特に美しく合います。細いルール、小さなキャピタル、大きな余白と組み合わせて、まるで美術館のようなレイアウトに仕上げましょう。コツ：背景はオフホワイトに設定し、ブルーは日付や場所の強調にのみ使いましょう。

media.ioで生成されたミュージアムイブニングの画像例

12) ウィンタートランジット

十六進： #101318 #1f2a35 #1b6aa5 #94a0ad #dfe5eb

気分： クール、時間厳守、都市的

最適な場合: サインポスターのデザイン

クールなトランジットトーンは、冬の通勤時の標識のように時間厳守で都市的な印象を与えます。コントラストと明快さが不可欠な案内ポスターや情報グラフィックに最適です。幾何学的な矢印や厳格なグリッドと組み合わせて、遠くからでも読みやすさを確保しましょう。コツ：ブルーは方向表示、グレー系はコピーや背景ブロックに使い分けます。

media.ioで生成されたウィンタートランジットの画像例

13) インクストーンスタジオ

十六進： #0b0b0d #242933 #3c5a80 #6e7885 #c9d0d8

気分： クリエイティブ、堅実、モダンクラシック

最適な場合: 写真ポートフォリオレイアウト

インクストーンの影に落ち着いた青を組み合わせることで、クリエイティブかつ堅実な雰囲気に。暗くミニマルで余計なものを排したフレームが求められる写真ポートフォリオに最適です。グレースケール写真やさりげないホバーステートと組み合わせ、イメージに集中できるよう配慮しましょう。コツ：マージンは広く取り、ライトグレーでキャプションやメタ情報を処理します。

media.ioで生成されたインクストーンスタジオの画像例

14) ハーバーラインブランディング

十六進： #0c1016 #1a2b3d #215e9a #808c9a #f1f4f7

気分： 信頼、洗練、プレミアム

最適な場合: ブランドアイデンティティボード

洗練されたハーバートーンは、信頼や安定、静かな自信を伝えます。このブラック・ブルー・グレーのカラーパレットは、ロゴから文具までのブランドアイデンティティシステムに最適で、デジタル・印刷両方に強みを発揮します。クリームやサンドなど暖かみのある中立色をアクセントに加えることで親しみやすさをプラス。コツ：グレーは非コート紙でテストし、冷たくなりすぎないか確認しましょう。

media.ioで生成されたハーバーラインブランディングの画像例

15) クワイエットモノクローム

十六進： #0f1113 #2a2e33 #3a4a5a #9aa3ad #f6f7f8

気分： 静か、ミニマル、バランス

最適な場合: 履歴書・カバーレターテンプレート

静かなモノクロームレイヤーは、よく編集されたドキュメントのように落ち着きと集中力を感じさせます。タイポグラフィ、スペース、階層がクリアであるべき履歴書に最適。ほんのり青みがかったグレーのルールでセクションを区切り、他はすべてニュートラルに。コツ：重いベタ塗りは避け、太さ・サイズ・余白で差をつけましょう。

media.ioで生成されたクワイエットモノクロームの画像例

16) ブループリントポスター

十六進： #0b0f15 #1f2d3a #0f5fa6 #8b98a6 #e7edf3

気分： ボールド、グラフィック、構造的

最適な場合: カンファレンスポスター

構造的なダークニュートラル上に映える大胆なブループリントブルーは、知的かつ方向性のある印象。強いセクション分けや即時の可読性が必要なカンファレンスポスターに最適です。サンセリフ体のタイポグラフィとシンプルなアイコンと組み合わせてモダンに仕上げましょう。コツ：最も明るい色を背景にし、ブルーはトラック・登壇者などのスポットライトに。

media.ioで生成されたブループリントポスターの画像例

17) ノーティカルターミナル

十六進： #0a0d11 #17212b #234a7a #6f7c89 #cfd7df

気分： マリン、テック志向、安定感

最適な場合: 開発者向けドキュメントサイト

海の深みとターミナルのようなダークトーンが安定感とテクニカルさを与えます。コードブロック、ナビゲーション、見出しの明確な区切りが必要なドキュメントサイトに最適です。コード部分は等幅フォントで強調し、ブルーはリンクやタブ、フォーカス状態にのみ限定しましょう。コツ：コードの背景はページ本体よりやや明るくし、強すぎるコントラストを避けます。

media.ioで生成されたノーティカルターミナルの画像例

18) スモーキーコバルトパッケージ

十六進： #0e0f12 #2a3038 #1f5fbf #a3adba #f2f4f6

気分： プレミアム、ボールド、モダン

最適な場合: メンズグルーミング製品のパッケージ

プレミアムなスモーキーニュートラルにコバルトのエネルギーを添えることで、現代的かつマスキュリンなのに厳しすぎない印象に。マットなダークカラーが質感を引き立て、ブルーがフレッシュな印象を与えます。ミニマルなタイポグラフィやソフトタッチ仕上げと組み合わせて、触感まで意識したパッケージに。コツ：コバルトはスポットカラーやホイルでアクセントにすると高級感が演出できます。

media.ioで生成されたスモーキーコバルトパッケージの画像例

19) レイニーエディトリアル

十六進： #101217 #2d3640 #2a5674 #9aa7b4 #f7f8fa

気分： ソフト、思慮深い、エディトリアル

最適な場合: 雑誌記事のレイアウト

柔らかな雨の日のニュートラルは、思慮深く静かなスタイルを演出します。長い記事を穏やかなコントラストとリズムで読ませたい雑誌レイアウトに最適です。セリフ体見出しと淡いブルーのサブヘッドルールでエディトリアルなリズムを生み出しましょう。コツ：画像キャプションは中間グレーで、ページ全体を軽やかに保ちます。

media.ioで生成されたレイニーエディトリアルの画像例

20) ナイトシフトダッシュボード

十六進： #070a0f #1b2430 #2d6cdf #65707d #d8dee6

気分： 集中、モダン、データ重視

最適な場合: 分析ダッシュボードUI

コントロールルームのような集中感を持つナイトシフトトーンは、ブラック・ブルー・グレーの組み合わせの中でもアナリティクスに最適です。コントラストが高いことでチャートの可読性を保ちつつ目にも優しいレイアウトに。データビジュアライゼーションはニュートラル色、ブルーは選択中のフィルタやアクティブタブ、重要なトレンドラインに限定しましょう。コツ：鮮やかなブルーは1グラフにつき1系列にし、比較を明快に。

media.ioで生成されたナイトシフトダッシュボードの画像例

ブラック ブルー グレーと合う色は何ですか?

ウォームニュートラルは最も簡単なアップグレード：クリーム、アイボリー、サンド、ウォームベージュが“テック感”を和らげ、ダークレイアウトをより親しみやすくします。ボタン、バッジ、背景パネルにも最適です。

もっと鮮明なコントラストが必要な場合は、明るい白を控えめに加え（特に文字やハイライトに）本文はライトグレーにして目への負担を軽減しましょう。セカンドアクセントには、落ち着いたメタル色（シルバー、ピューター）や彩度を抑えたグリーンが、ブルーと競合せずクールな基調を引き立てます。

迷ったときは彩度を抑えて：主要なブルー1色、ウォームニュートラル1色、あとはブラック/グレーで統一するとコントロール感とプレミアム感が保てます。

ブラック ブルー グレーのカラー パレットを実際のデザインで使用する方法

比率ではなく役割から始める：ナビゲーションやヘッダーにほぼ黒、表面やカードにはダークスレート、セカンダリーテキストにはミッドグレー、背景にはライトグレーやオフホワイトを割り当てます。そして1色のブルーをインタラクティブカラー（リンク、アクティブタブ、選択状態）として指定しましょう。

ブランディングでは、デジタルと印刷の両方でパレットをテストしましょう。グレーは照明や紙質によって色味が変わるため、チャコールやミッドグレーは文具やパッケージの最終決定前に必ず確認を。

インテリアならブルーは“奥行き”の色（アクセントウォール、キャビネット、テキスタイル）として使い、グレーやブラックはハードウェアや設備を引き締める役割に。クリーム系の照明や木目の色味を加えれば、部屋が冷たくなりすぎるのを防げます。

AIで黒、青、グレーのパレットビジュアルを作成する

既にHEXコードがある場合は、それを使って一貫性のあるUIモックアップ、ポスター、ブランドボード、パッケージ案をAIで迅速に作ることが可能です。大事なのはレイアウトを明確に記述し、カラーバリューをプロンプトに明示的に含めることです。

一度に1つのパレットだけ使い、ブルーの表示箇所（CTA、リンク、チャート、ボーダー）をしっかり指定しましょう。これにより仕上がりがクリーンにまとまり、不要な色が混入するのを防げます。

次へ： クリームカラーパレット