ライトグレー配色20選｜おすすめカラーパレットと組み合わせ例

ライトグレーは現代デザインにおいて最も柔軟なニュートラルの一つです。組み合わせ次第で、空気感やミニマルさ、または温かみや安定感を感じさせます。

以下に、HEXコード付きで厳選したライトグレーのカラーパレットアイデア20選と、UI・ブランディング・インテリアに役立つ実用的な組み合わせのコツをご紹介します。

なぜライトグレーのパレットがこんなに使いやすいのか

ライトグレーは、クールとウォーム両方のアクセントを受け止める落ち着いた「キャンバス」を作ります。純白よりも眩しさを抑え、長時間の読み物でも快適なレイアウトを保てます。

値の範囲の中央に位置するため、ライトグレーは階層作りに役立ちます。濃い線や枠を使わずに、微妙なグレーの変化でカードやセクション、パネルを分けられます。これは、クラリティと節度が重要なUIデザインで特に有効です。

ライトグレーはリネンやコンクリート、紙の質感、磨かれた金属、マットな仕上げなど様々なテクスチャとも相性抜群です。素材がストーリーを伝えるブランドシステムやインテリアのニュートラルカラーとしても実用的です。

20+ライトグレーカラーパレットアイデア（HEXコード付き）

1）霧のリネン

HEX： #f2f3f5 #d7d9dd #b9bcc3 #c9b8a6 #6b6f76

雰囲気： 空気感、穏やか、控えめ

おすすめ： ミニマルなリビングや北欧インテリア

早朝のリネンにかかる霧のようなエアリーで静かなトーンが空間を広々と感じさせ、無機質になりません。暖かみのあるベージュアクセントでグレーに柔らかさを加え、木材の質感も豊かに見せます。壁や張り地、ラグ、マットなブラックのハードウェアと組み合わせて美しく映えます。ポイント：最もダークなグレーをトリムや照明などに少しだけ繰り返すことで部屋をフレーム化できます。

media.ioで生成された霧のリネンの画像例

Media.io

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

今すぐ無料で試す

2）コンクリート・ブラッシュ

HEX： #f4f4f6 #d0d2d6 #a9aeb6 #e6b7b2 #8a5a5a

雰囲気： ソフト、現代的、静かにロマンティック

おすすめ： スキンケアブランドやウェルネスパッケージ

コンクリートが夕焼け色に染まるようなソフトでモダンな組み合わせは、優しく大人っぽい雰囲気です。淡いグレーがベースになりつつ、ピンクは小さなアクセントとして配置すると招きやすさも感じさせます。ラベルやチューブ、ホワイトスペースの多いブランドシステムによく合います。ポイント：深めのローズブラウンを成分見出しなどに使うと読みやすさが際立ちます。

media.ioで生成されたコンクリート・ブラッシュの画像例

3）パール・ブループリント

HEX： #f5f6f7 #d9dbe0 #b4b8c0 #2f5d8a #101820

雰囲気： クリーン、自信、テクニカル

おすすめ： SaaSダッシュボードやデータ重視UI

磨かれたパールとブループリントのようなクリーンで自信あるパレットは、深いブルーが柔らかなニュートラルを一層引き締めます。テーブルやカード、サイドバーなど階層構造が重要な場面に理想的です。ネイビー＋ブラックは文字、ミッドグレーは区切りに組み合わせると、データ量が多くても画面が落ち着きます。ポイント：明るいブルーは主なアクションボタン限定で使うとクリックが意図的に感じられます。

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

4）冬のハーバー

HEX： #f1f2f4 #cfd3da #9aa3af #4f6d7a #243b53

雰囲気： クール、落ち着き、海岸らしさ

おすすめ： 編集レイアウトや長文読書に

冬の港町の静けさを思わせるクール＆グラウンデッドなパレット。スチールブルーがページに深みを加えつつ、重くなりすぎません。最も淡いグレーを紙のような背景に、濃い色は引用やセクションの区切りに使いましょう。雑誌やレポート、ブログテンプレートなど落ち着きと高品質感が欲しい場面にぴったりです。ポイント：本文は最も深いブルーで、純粋なブラックより柔らかい印象にできます。

media.ioで生成された冬のハーバーの画像例

5）クラウド・シトラス

HEX： #f7f7f8 #dfe1e6 #b0b6bf #ffd36a #2b2d42

雰囲気： フレッシュ、明るい、現代的

おすすめ： プロモポスターや季節セールグラフィック

雲間から日差しが差し込むようなフレッシュなパレット。シトラスイエローが瞬時にエネルギーを加えます。グレーは構造に使い、イエローは価格や日付、メイン訴求に使うと効果的です。特に小売りのプロモやイベント告知、SNSバナーなど明確さが求められる場面におすすめ。ポイント：イエローは深いインディゴと組み合わせると、洗練されつつ高コントラストなタイポグラフィが実現します。

media.ioで生成されたクラウド・シトラスの画像例

6）アッシュウッドキャビン

HEX： #f0f1f2 #c9ccd1 #9ea3ab #7a5c3c #3f3a35

雰囲気： 居心地よい、ラスティック、安定感

おすすめ： コテージインテリアやアウトドアブランド

暖炉そばのアッシュウッドのような温かみのあるグレーは、ブラウンのトーンが和らげた心地良さを与えます。家具やロゴにトープブラウンを使い、最も濃い色は部屋の枠や文字に。古風になりすぎず、ラスティックインテリアやアウトドア系ラベル、ヘリテージ風パッケージによく合います。ポイント：木目やクラフト紙など質感を加えるとニュートラルがより触覚的になります。

media.ioで生成されたアッシュウッドキャビンの画像例

7）メトロクローム

HEX： #f6f7f9 #dadde2 #aeb4bd #4a4f57 #00a3b4

雰囲気： シャープ、都会的、ハイテク

おすすめ： エレクトロニクスパッケージやテック製品ページ

メトロ駅の磨かれたクロームのような都会的で洗練されたパレット。ティールがテクノロジー感をプラスします。ミッドグレーは背景、ダークスレートはアイコンやコピーに。スペックや機能強調、モダンな信頼感が欲しいパッケージにオススメ。ポイント：ティールはUIの主要な状態やバッジだけに使い、信号として認識されるようにします。

media.ioで生成されたメトロクロームの画像例

8）ミスティオーキッド

HEX： #f6f5f8 #dcd9e2 #b7b0c1 #c59ad9 #5d4a72

雰囲気： 夢のよう、エレガント、ソフト

おすすめ： ウェディング招待状や美容系告知

朝霧の中の蘭のような、繊細かつエレガントなラベンダートーン。淡いグレーを紙のベースに使い、パープルはボーダーやモノグラム、ラインアートに。招待状やRSVPカード、広々とした告知デザインにぴったりです。ポイント：本文は深いバイオレットにすると読みやすく、全体はエアリーな印象を保てます。

media.ioで生成されたミスティオーキッドの画像例

9）グラファイトオート

HEX： #f3f4f6 #d5d7db #a7adb6 #cbb89a #2d2f33

雰囲気： プロフェッショナル、暖かい、信頼感

おすすめ： ビジネスプレゼンやピッチデック

テクスチャ入り紙のグラファイトのようなプロフェッショナルかつ暖かさのあるパレット。オート（オートミール色）のアクセントが人間味を加えます。ライトグレーと組み合わせてもクールになりすぎず、企業的だけど冷たくない印象を与えたいときに活躍。オート色はハイライトや注目ボックス、ダークグラファイトはチャートや見出しに。ポイント：スライドはニュートラル2色とオートアクセントに限定するとリズムが整えやすいです。

media.io を使用して生成されたグラファイトオーツの画像例

10) シーサイドドリフト

HEX： #f4f6f7 #d2d7db #a2acb3 #2aa7a1 #0b3c49

雰囲気： さわやか、清潔、爽快

おすすめ： 旅行用ランディングページや予約UI

淡い砂の上のシーグラスのようにさわやかで爽快、ティールカラーは動きのある印象を与えます。コンテンツセクションには明るいグレーを使用し、ティールはCTA、フィルター、アクティブ状態に使用してください。旅行やウェルネス、サービスブランドで、落ち着いた明快さを求める場合に適しています。コツ：深いオーシャン色とたっぷりのホワイトスペースを組み合わせて、ヘッダーの重さを避けましょう。

media.io を使用して生成されたシーサイドドリフトの画像例

11) クワイエットテラコッタ

HEX： #f5f4f3 #d9d8d6 #b1b0ae #c36b5a #2f2b28

雰囲気： 温かい、手作り感、親しみやすい

おすすめ： カフェメニューや小規模レストランブランド

灼熱の粘土と白い石のように温かく親しみやすいテラコッタは、手作り感を加えます。柔らかいグレーをメニューのベースにし、食事の写真や価格を読みやすくしてください。クラフトテクスチャ、セリフ体、シンプルなラインアイコンとも相性抜群です。コツ：テラコッタはセクションヘッダーやスタンプに留めることで、上品な印象を維持できます。

media.io を使用して生成されたクワイエットテラコッタの画像例

12) グレイシャーミント

HEX： #f7f8fa #dde2e8 #b4bcc6 #8de0d3 #1d4d4f

雰囲気： 明るい、清潔、楽観的

おすすめ： アプリのオンボーディング画面、ヘルステックUI

ミントウォーターと氷河のように明るく清潔、アクアアクセントは新鮮で安心感を与えます。このような明るいグレーのパレットはオンボーディング手順の可読性を高め、親しみやすい印象です。進捗インジケーターや確認にはミントを使用し、深いティールはテキストやアイコンに。コツ：グラデーションは控えめにして、インターフェイスのアクセシビリティと落ち着きをキープしましょう。

media.io を使用して生成されたグレイシャーミントの画像例

13) ストーンベリー

HEX： #f2f2f4 #d0d2d8 #a0a6b0 #7b5c7a #3a223a

雰囲気： ムーディー、編集、スタイリッシュ

おすすめ： ファッションルックブック、ポートフォリオサイト

冷たい石にベリーが映えるようなムーディーでスタイリッシュ、パープル系トーンがラグジュアリー感を添えます。明るいグレーはページの背景やグリッドの間隔に、濃いプラム色はタイトルや区切り線に。ファッション編集、クリエイティブポートフォリオ、ブランドストーリーに適しており、ハードなコントラストなしで洗練を演出できます。コツ：写真はやや彩度控えめにして、パレットの一体感を持たせましょう。

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

14) チョークボードラテ

HEX： #f3f2f0 #d6d2cc #a9a39a #6b4f3a #1f1e1c

雰囲気： 居心地よい、ヴィンテージ、落ち着き

おすすめ： コーヒーのパッケージ、クラフトラベル

チョークの粉と温かいラテのように居心地よく落ち着くニュートラルは、親しみやすく高級感もあります。クリームグレーはラベルのベースに、ブラウンはローストや原産の詳細に重ねてください。エンボステクスチャ、スタンプ、ミニマルイラストとも好相性。コツ：ほぼブラックはバーコードや小さい文字に控えめに使い、全体を柔らかくキープしましょう。

media.io を使用して生成されたチョークボードラテの画像例

15) ルナーネイビー

HEX： #f5f6f8 #d8dbe1 #b0b6c0 #1f3c88 #0a1026

雰囲気： 集中、信頼、高コントラスト

おすすめ： フィンテックアプリ、セキュリティダッシュボード

深い水面に映る月光のように集中と信頼感をもたらすネイビーは、ソフトなニュートラルに真剣さを加えます。この明るいグレーのカラースキームはフィンテックに適しており、落ち着いた表面と明確なコントラストのバランスが良いです。ナビゲーションや主要合計にはネイビー、最も明るいグレーはカードやフォームに。コツ：ほぼブラックはエラーや重要なアラートに限定し、視覚的疲労を防ぎます。

media.io を使用して生成されたルナーネイビーの画像例

16) レイニーメドウ

HEX： #f4f5f7 #d2d6dd #a5aab4 #6f8f72 #2e4a3a

雰囲気： ナチュラル、心地よい、素朴

おすすめ： 植物イラスト、春のステーショナリー

雨上がりの草のようにナチュラルで心地よいグリーンは、涼しいグレーに対して控えめでリアルな印象。淡いグレーは紙のウォッシュに、メドウグリーンは葉や茎のレイヤーに。エコブランドやガーデンメモ、季節プリントに理想的です。コツ：輪郭は柔らかく、水彩テクスチャは見えるようにして、自然な仕上がりに。

media.io を使用して生成されたレイニーメドウの画像例

17) ソフトチャコールポップ

HEX： #f6f6f7 #d9dadd #b0b2b8 #ff4d6d #2b2d31

雰囲気： 大胆、遊び心、シャープ

おすすめ： SNSプロモーション、クリエイター用テンプレート

滑らかな紙にネオンインクのように大胆で遊び心あるピンクが、ソフトグレーに瞬時に映えます。見出しやUI構造にはチャコールを用い、明るいアクセントはひとつのメッセージだけに強調。リールカバーやプロモタイル、クリエイターキットに最適で、素早い可読性が必要な時に。コツ：ピンクはレイアウトの10～15％程度にして、タイポグラフィが目立つようにしましょう。

media.io を使用して生成されたソフトチャコールポップの画像例

18) ミュージアムウォームス

HEX： #f4f3f1 #d7d5d0 #b2b0aa #9c7a4f #2a2a2a

雰囲気： 洗練、温もり、永遠

おすすめ： ギャラリー内装や高級ホームデコサイト

静かな美術館の部屋のように洗練された永遠感、暖かいゴールドブラウンはグレーに上質な輝きを与えます。壁や背景には淡いトーンを使い、フレーム・金具・ボタンの強調にブロンズアクセントを。高級デコブランド、編集ホームページ、ミニマルな商品グリッドに最適。コツ：写真は暖色系照明で撮影し、アクセントが泥色にならないように。

media.io を使用して生成されたミュージアムウォームスの画像例

19) フロステッドローズゴールド

HEX： #f6f6f8 #dcdde2 #b6b8c0 #d7a1a7 #7a3e47

雰囲気： ラグジュアリー、ソフト、洗練

おすすめ： ジュエリー広告や高級商品ローンチ

スタジオの光に照らされたフロストメタルのようにラグジュアリーでソフト、ローズ系トーンは主張せず高級感。明るいグレーとの組み合わせは即座に上質感、背景はクールにしてローズゴールドはハイライトや細部に使います。ジュエリーキャンペーン、美容ローンチ、ミニマルなヒーローバナーに。コツ：明るいグレーに繊細なグレインや輝きを足し、サテン感を演出。

media.io を使用して生成されたフロステッドローズゴールドの画像例

20) ペーパークリップティール

HEX： #f7f7f9 #dfe1e6 #b6bcc6 #2f9aa0 #1c2a2e

雰囲気： 整頓、スマート、現代的

おすすめ： ステーショナリーブランディング、プロダクティビティツール

整理整頓されたデスクのようにクリスプなティールは、紙のようなグレーと組み合わせて現代的な印象。最も明るい色は背景に、ティールはスタンプやアクセント、ナビゲーション要素に。ステーショナリーブランド、メモアプリ、生産性ビジュアルに適しています。コツ：シンプルなラインアイコンや一定の間隔を使い、整理感を強調しましょう。

media.io を使用して生成されたペーパークリップティールの画像例

ライトグレーに合う色は？

明るいグレーはタイポグラフィ、ナビゲーション、UI状態で強いコントラストが必要なとき、チャコールやほぼブラック、ネイビーなど深いニュートラルと自然に組み合わせられます。これらの濃い色が淡いレイアウトのぼやけ感を防ぎます。

より暖かく招待感ある雰囲気には、明るいグレーとベージュ、オーツ、タン、テラコッタ、ローズゴールドを組み合わせましょう。これらのアクセントは個性を加えつつ、全体のパレットを静かでミニマルに保ちます。

フレッシュなモダンポップが欲しい場合は、ティール、ミント、シトラスイエロー、ホットピンクなど"シグナルカラー"をひとつ選び、控えめに使用しましょう。明るいグレーは鮮やかなアクセントをよりクリーンで意図的に見せます。

ライトグレーのカラーパレットを実際のデザインでどう使う？

UI では、明るいグレーを背景やカード、無効状態の主要サーフェス色にし、やや濃いグレーで区切りやコンテナの階層を作ります。最も濃い色はテキストに使い、安定した可読性を確保。

ブランディングで明るいグレーは上質なステージとして扱い、商品写真の演出やミニマルタイポグラフィのサポート、小さなメタリックやパステルのアクセントに高級感を与えます。アクセント色は1色で統一感あるシステムが作れます。

インテリアでは、明るいグレーと自然素材（木、リネン、石）、そしてマットブラックなど高コントラスト要素をひとつ加えてバランスを取りましょう。これにより空間はモダンでも冷たくなりません。

AIでライトグレーパレットのビジュアルを作成する

明るいグレーのカラーパレットを実際に確認したい場合、インテリア、ポスター、パッケージ、UI画面などの簡易モックアップを生成しましょう。パレットを適用して見ることで、コントラストや雰囲気、素材感を確認できます。

シンプルなシーンプロンプトから始め、スタイルキーワード（ミニマル、編集、北欧、プレミアム）と用途に合ったアスペクト比を追加しましょう。"明るいグレーのベース"やアクセントカラー名を繰り返して、パレットを一定に保ちます。

次： モスグリーンカラーパレット