青・緑・グレーのカラーパレットは、デザインに落ち着きと現代的な雰囲気、そして読みやすさを持たせたいときの定番の選択です。青の信頼感、緑・ティールの新鮮さ、モダンなクールグレーのバランスが融合しています。
下記は、HEXコード付きのすぐに使える青緑グレーのパレット20選と、配色やUI、ブランディング、印刷物、インテリアなど実際の活用のコツを紹介しています。
なぜ青・緑・グレーのパレットがこれほど優れているのか
青緑グレーのカラースキームはスペクトラムの「静かな」ゾーンにあり、目立ちすぎず現代的です。そのため、インターフェイスや企業サイト、読みやすさが求められるエディトリアルレイアウトに理想的です。
青は信頼感、ティールは爽やかなエネルギー、グレーはタイポグラフィや余白に構造を与えます。これらが組み合わさることで、大きなコントラストに頼らずに階層（見出し・ボタン・背景）を明確にできます。
このパレットは画面だけでなく印刷にもよくなじみます。適度なグレーのバランスにより、明るいUIでもシャープさが保て、インテリアや紙製品には柔らかさを演出できます。
20以上の青緑グレーカラーパレットアイデア（HEXコード付き）
1）シーサイドグラファイト
HEX： #0b3a53 #1f7a75 #7aa6a6 #c7d1d6 #2b2f33
雰囲気： 穏やかでモダン
おすすめ用途： 分析ダッシュボードUI
深い水とグラファイトの手すりに囲まれた風の強い桟橋のように、穏やかでモダン。濃紺がナビゲーションの軸となり、ティールとシーミストトーンでチャートが眩しくならず読みやすい。明快なホワイトスペースと、警告にはアンバーなど暖色アクセントを組み合わせて。ヒント：ほぼ黒のグラファイトは見出しや重要な数値に使うと視認性が向上します。
media.ioで生成したシーサイドグラファイトの画像例
Media.ioはブラウザ上で動画・画像・音声の作成や編集ができるオンラインAIスタジオです。
2）ミントハーバー
HEX： #0f4c6e #2aa198 #bfe8de #d9dee2 #4a545c
雰囲気： 爽やかでウェルカムな雰囲気
おすすめ用途： ウェルネスブランドのアイデンティティ
爽やかでウェルカムな印象。曇り空の涼しい港でミントの葉がそよぐような空気感。力強いオーシャンブルーと親しみやすいミント、柔らかなグレーが組み合わさり、タイポグラフィにも最適。ナチュラルなテクスチャや未加工紙と組み合わせると上質で優しい印象に。ヒント：ミントは10～15％ほどのアクセントにして使うとぼやけません。
media.ioで生成したミントハーバーの画像例
3）スレートラグーン
HEX： #123b5a #2f6f73 #5f8f9a #b8c2c9 #3b4248
雰囲気： 落ち着きと上品さ
おすすめ用途： 企業ウェブサイト
穏やかで上品、静かな入り江にスレートの断崖が広がるような印象。ミッドティールとブルーは見出しやボタン、リンク状態の強い階層を支え、クールなグレーがページをプロフェッショナルに保ちます。シンプルな写真や細いアイコンと組み合わせてすっきりとしたリズムを維持。ヒント：淡いグレーをセクションの背景に使うと、重いボーダーがなくても構成感が出ます。
media.ioで生成したスレートラグーンの画像例
4）アークティックセージ
HEX： #0e5675 #3aa6a1 #a8d5c8 #e3e8eb #6a747d
雰囲気： 軽やかで癒やされる
おすすめ用途： スパ内装パレットガイド
軽やかで癒される、セージの蒸気が北極の青い朝を漂うイメージ。ソフトミントと淡いグレーで壁やリネンが清潔感あるベースに。深いブルーはサインや導線表示の視認性を高めます。ライトオークやブラッシュドニッケル、マットな白いセラミックと組み合わせを。ヒント：セージカラーは小さなテキスタイルに繰り返し使うと、塗り替え不要で部屋全体が統一感ある空間に。
media.ioで生成したアークティックセージの画像例
5）カッパーケルプ
HEX： #0b2f4a #1f7f7a #8fb9b1 #cfd6da #8a5a3c
雰囲気： 海辺で落ち着いた雰囲気
おすすめ用途： スキンケア商品のパッケージ
海辺で落ち着いたケルプ藻に、太陽を浴びたカッパーの温かみが感じられる配色。ティールとブルーで清潔感と水辺の印象、カッパーブラウンが人間味をプラスし、パーソナルケアに最適です。ミニマルなサンセリフ体や余白をたっぷり使うと現代的で洗練された棚にも。ヒント：カッパーは箔押しや特色インク印刷で高級感を演出。
media.ioで生成したカッパーケルプの画像例
6）レイニーボードウォーク
HEX： #0d4860 #2b8a84 #6fa8a8 #d7dde0 #40464c
雰囲気： ムーディーでクリーン
おすすめ用途： イベントポスターのデザイン
雨上がりの港の灯りを映すぬれた板張りのように、ムーディーで清潔感がある配色。雰囲気を損なわずに読みやすさを保てるので、ポスターに最適です。太いコンデンスタイポとシンプルな幾何形状を合わせると即座に階層が明確に。ヒント：本文テキストはミッドグレー、タイトルや日付はダークスレートを使用。
media.ioで生成したレイニーボードウォークの画像例
7）フォギーフィヨルド
HEX： #12324b #2e6e8a #3c8f87 #b9c7cf #eef2f4
雰囲気： 霧がかった広がり
おすすめ用途： エディトリアルマガジンの見開き
霧に包まれたフィヨルドのような、広々とした空間感。淡いグレーホワイトでレイアウトが開放的になり、ブルーとティールが見出しや抜粋に穏やかなリズムを生みます。セリフ体見出しや落ち着いた写真と組み合わせると上質なエディトリアルな雰囲気に。ヒント：ティールはセクションのマーカーに使うとページ全体のナビゲーションも直感的に。
media.ioで生成したフォギーフィヨルドの画像例
8）ユーカリプタススチール
HEX： #0f3d52 #2f7f77 #9bc2b6 #aab3bb #2f353a
雰囲気： 実用的で穏やか
おすすめ用途： SaaSのオンボーディング画面
ユーカリの葉とブラッシュドスチールを思わせる、実用的で静かな配色。ディープブルーとティールの組み合わせで明瞭なCTAをサポートし、クールグレーがフォームに軽やかさを与えます。角丸パーツや余裕のある余白と合わせてフレンドリーなプロダクト印象に。ヒント：スチールグレーはインプット枠に、ダークブルーはプライマリーボタンに使うとティールを多用しすぎません。
media.ioで生成したユーカリプタススチールの画像例
9）ノーティカルコンクリート
HEX： #0a2f45 #1c6d7c #3aa39b #c9cfd4 #5a646c
雰囲気： 都会的でマリンテイスト
おすすめ用途： 建築ポートフォリオサイト
都会的でマリンなブルーウォーターとコンクリートの埠頭をイメージ。クールなニュートラルが写真を引き立て、ティールがホバーやセクションラベルの近代的なアクセントに。白黒のプロジェクト写真やミニマルなグリッドと合わせて。ヒント：コンクリートグレーを主な背景にすると、ティールは意図的なアクセントとして映え、装飾的に見えません。
media.ioで生成された海洋コンクリートの画像例
10) グレイシャーモス
HEX： #103e5b #2a7c8a #5aa78d #d5dde1 #6d7b82
雰囲気： クリアでナチュラル
おすすめ用途： アウトドアブランド ルックブック
氷河の水がコケ石を流れるように、クリアでナチュラルな印象。このセットはネオンに頼らず冒険的な雰囲気を演出し、クリーンなルックブックレイアウトや商品紹介に最適です。ブルーグリーングレーの配色はリサイクル素材の質感やクラフト紙のメモ、高コントラストなアウトドア写真と特に相性が良いです。使用ヒント：画像と競合しないよう、モスグリーンはバッジやアイコンに使い、視線誘導に活用します。
media.ioで生成されたグレイシャーモスの画像例
11) ブルースプルース オフィス
HEX： #0c3b57 #1f6f86 #2f8f7e #b7c0c6 #2a2f34
雰囲気： 集中感と信頼感
おすすめ用途： B2Bピッチデック
ブルースプルースの針葉がきちんとしたオフィスにあるように、集中感と信頼感があります。濃いトーンはタイトルやチャートに権威を与え、柔らかいグレーはスライドをすっきりさせます。シンプルなデータ可視化と十分な余白で自信のある雰囲気に。使用ヒント：ティールを1つのデータ系列に一貫して使い、認識度を高めましょう。
media.ioで生成されたブルースプルース オフィスの画像例
12) ソフトタイドペーパー
HEX： #1a4862 #2f8b8b #a7cfc8 #f1f4f6 #7b8790
雰囲気： 優しくエアリー
おすすめ用途： ウェディング招待状セット
海のガラスを包んだ波洗いの紙のように、優しくエアリーな雰囲気。淡い背景がセット全体を上品に見せ、ティールやブルーがモノグラムや縁飾りに程よい色味を加えます。耳付きの紙や控えめな水彩ウォッシュと組み合わせてロマンチックに仕上げましょう。使用ヒント：最も濃い色は名前や重要情報のみに印刷し、ソフトな印象を保ちます。
media.ioで生成されたソフトタイドペーパーの画像例
13) インダストリアル シーフォーム
HEX： #0d3c54 #1d7a82 #7fc6c1 #c0c8ce #3d4349
雰囲気： シャープで親しみやすい
おすすめ用途： テックスタートアップ ランディングページ
インダストリアルなドアのシーフォームペイントのように、シャープで親しみやすい雰囲気。鮮やかなアクアがCTAやマイクロインタラクションを引き立て、スレートやチャコールでページ全体を引き締めます。大胆な幾何学イラストや淡いグラデーションと組み合わせて現代的なテックデザインに。使用ヒント：アクアはボタンやリンクのみに使い、グレーが長文テキストを担うようにしましょう。
media.ioで生成されたインダストリアル シーフォームの画像例
14) ペブルベイ
HEX： #11435f #2d7f86 #4aa59a #d2d8dc #8b969e
雰囲気： バランスがよく親しみやすい
おすすめ用途： ブログヘッダーとサムネイル
透明な湾の水辺のスムースな小石のように、バランスがよく親しみやすい配色。中間色が統一感のあるサムネイルフレームやタグ、カテゴリ色を作りやすく、強いコントラストなしで仕上がります。温かみのある写真やシンプルなオーバーレイと組み合わせてタイトルを読みやすく。使用ヒント：ライトグレーを繊細なグラデーションの土台にして画像全体に一体感を持たせます。
media.ioで生成されたペブルベイの画像例
15) ディープティールチャコール
HEX： #062a3a #0f5d6a #1f8a8a #9fb0b8 #1f2327
雰囲気： 力強くシネマティック
おすすめ用途： ミュージックアルバム カバーアートワーク
深いティールの光がチャコールの霧を切り裂くような力強くシネマティックな配色。ムード重視でディテールは二の次にしたいカバーアートに最適です。高コントラスト写真やミニマルなタイプと組み合わせれば、印象的かつ現代的な仕上がりに。使用ヒント：文字は淡いスチールトーンにし、ダークな背景とのバイブレーションを防ぎます。
media.ioで生成されたディープティールチャコールの画像例
16) ウィンタープールサイド
HEX： #154d6b #2f8f9d #86c7c2 #e6ecef #56626a
雰囲気： クールで前向き
おすすめ用途： 旅行パンフレット レイアウト
冬の朝に温水プールで過ごすようなクールで前向きな雰囲気。明るいグレーでページ全体をクリアに保ち、ティール系がバカンス気分を追加しますが、トロピカル過ぎません。クリーンなサンセリフ体と広い余白で高級感のあるパンフレットになります。使用ヒント：ミッドティールはセクション区切りに使い、読み手が素早くスキミングできるようにしましょう。
media.ioで生成されたウィンタープールサイドの画像例
17) コースタルクリニック
HEX： #0f4a68 #1f7f85 #9ad9cf #f5f7f8 #9aa5ad
雰囲気： クリーンで安心感
おすすめ用途： ヘルスケアアプリUI
静かな水辺のビュースポットがある明るいクリニックのように、クリーンで安心感のある印象。柔らかなアクアはステータス表示やUIサポートに優しく、ブルーが主要アクションに信頼感を与えます。角の丸いUIパーツや高コントラストのアイコンでアクセシビリティ向上。使用ヒント：サクセスメッセージはアクアにし、ティールはインタラクティブな要素だけに限定すると状態が明確になります。
media.ioで生成されたコースタルクリニックの画像例
18) リバーストーンミニマル
HEX： #0e3f59 #2c7c78 #6fb1a7 #dfe4e7 #707b83
雰囲気： 静かでミニマル
おすすめ用途： レジュメとカバーレターテンプレート
冷たい岸辺に並んだ川石のように、静かでミニマルな仕上がり。抑制された配色により、タイポグラフィが主役となり、ティールがセクション見出しの控えめなアクセントに。モダン書体一種と細い罫線ですっきりした構造に。使用ヒント：ティールは見出しや小さなアイコンのみに使い、グレースケール印刷にも対応できます。
media.ioで生成されたリバーストーンミニマルの画像例
19) ストームライト ボタニカル
HEX： #0b3b52 #2b7e84 #5ab3a4 #cfd7dc #f3f6f7
雰囲気： フレッシュでアーティスティック
おすすめ用途： ボタニカル イラストセット
温室にストームライトが差し込むように、フレッシュでアーティスティックな印象。ティールグリーン系は葉や茎をいきいき見せ、クールグレーが構図に軽やかさとモダンさを加えます。繊細な線画や柔らかな水彩ウォッシュとの組み合わせが自然で現代的なスタイルに。使用ヒント：最も濃いブルーは影にだけ使い、ボタニカル全体が軽やかで透明感ある印象に。
media.ioで生成されたストームライト ボタニカルの画像例
20) ナイトピア ネオン
HEX： #061f2f #0b4f6c #00a6a6 #a9b6be #20262b
雰囲気： エレクトリックでスタイリッシュ
おすすめ用途： ゲーミングストリームオーバーレイ
夜の桟橋に輝くネオンサインのように、エレクトリックでシャープな雰囲気。黒に近い色と明るいティールの高コントラストでアラートやラベル、タイマーを際立たせつつ、雑然としません。微妙なグラデーションやシャープなサンセリフ体で競技的な雰囲気に。使用ヒント：ネオンティールは主要UI要素だけに絞り、長い配信でも印象的でいられるようにします。
media.ioで生成されたナイトピア ネオンの画像例
青緑グレーに合う色は？
ウォーム系のアクセントは、ブルー・グリーン・グレー配色にコントラストを加える最も簡単な方法です。アンバー、テラコッタ、カッパー、控えめなコーラルなどを、ボタンやハイライト、バッジ、印刷用スポットカラーに使ってみてください。
クリーンでモダンな方向にしたい時は、これらの色調とクリスプな白、ソフトなオフホワイト、もしくは淡いクールグレーを組み合わせます。これでレイアウト全体がエアリーになり、ティールのディテールが主張しすぎず、意図的に見せることができます。
もっとダークでシネマティックな印象にしたい場合は、チャコール・黒に近い色・1色の明るいティールを強調に加えましょう。この組み合わせはオーバーレイやヒーローセクション、アルバム風グラフィックに特におすすめ。
実際のデザインで青緑グレーカラーパレットを活用する方法
まずは役割分担から：ディープブルー、またはチャコールを基調色（ナビやヘッダー）、ティールをインタラクションアクセント（リンク・CTA）、ライトグレーで背景やスペースを担います。これで階層構造がどのページ・画面でも一貫します。
UIの場合、サチュレートしたティールは小さな領域に限定し、長文テキストにはグレーを使うことで可読性を確保できます。印刷なら、ペーパーホワイトを少し暖かくすると全体が冷たくなりすぎません。
ブランディングやインテリアなら、シグネチャーティールをラベル・サイン・テキスタイル等で繰り返し使い、その他はニュートラルで揃えるのがコツ。写真や素材が変わっても統一感を作れます。
AIで青緑グレーパレットビジュアルを作ろう
すでにHEXコードが決まっている場合は、ダッシュボードやポスター、ブランドボードや招待状セットなどで素早くビジュアル化できます。いくつかバリエーションを生成してコントラストや雰囲気をテストすると、最終案も決めやすくなります。
Media.ioのテキストから画像のツールなら、デザイン（フォーマット・スタイル・パレット）を記述するだけで数分でブラッシュアップされたコンセプトビジュアルを作成可能です。UI・印刷・マーケ用など青緑グレー配色の検証もすぐできます。
下のボタンから、ブルー・グリーン・グレー配色ビジュアルを無料で作ってみましょう。
ブルー・グリーン・グレー配色 よくある質問
-
ブルー・グリーン・グレー配色は何を伝える？
一般的には「落ち着き・信頼・清潔さ・現代的なプロフェッショナリズム」を表現します。ブルーは信頼感、ティールは新鮮さと明快さ、グレーは全体を安定させ、カジュアルでなく現代的な印象を維持します。 -
ブルー・グリーン・グレーはUIデザインに向いていますか？
はい。特にダッシュボード、ヘルスケアアプリ、SaaS製品に最適です。クールグレーが読みやすい構造を作り、ティールをインタラクションや状態に限定できます。注意点は、サチュレートしたティールを大きな背景に使わないこと。可読性が下がるためです。 -
ブルー・グリーン・グレーに合うアクセントカラーの選び方は？
アンバー、カッパー、テラコッタ、控えめコーラルから1色をアラートやハイライト向けに選びます。ウォームなアクセントは全体の冷たさを緩和し、必要以上に多色使いせず視覚階層を整理できます。 -
ティール・ブルー・グレーの組み合わせに最適なニュートラルは？
クリーンなレイアウトにはクリスプな白、オフホワイト、クールなライトグレーがベスト。シネマティックなスタイルにはチャコールや黒が最適です。ティールが意図されたアクセントになるよう、ニュートラルを1色支配的に使いましょう。 -
ブルー・グリーン・グレー配色が平坦に見えない工夫は？
濃淡の使い分けが重要です。ごく薄いグレー背景・中間グレーの枠線と補助テキスト・ダークな見出しに使い分け、ティールはボタンやアイコン・タグなど小さいインパクト領域に留めます。控えめなテクスチャや写真を添えて奥行きを出しましょう。 -
この配色で印刷はきれいにできますか？
美しく印刷できますが、クールな色調は用紙やインクによって変化することがあります。印刷プロジェクトでは、目的の用紙でティールとブルーを校正し、結果が柔らかくより非臨床的になるようにオフホワイトのベース使用を検討してください。 -
これらのHEXコードでモックアップを作成できますか？
はい。プロンプトにパレットのHEX値を使い、必要な形式（例：「ランディングページUI」「ポスター」「ブランドアイデンティティボード」など）を説明してください。Media.ioはコンセプト画像を生成し、最終制作前にバリエーションを比較できます。
次へ： グレーダークブルーカラーパレット
