パステルグレーのおすすめ色パレット20選とHEXコード

ペールグレーは現代デザインの静かなヒーローです。穏やかで落ち着いた印象を与えつつも、計算された洗練さを保ちます。純白の冷たさや濃いチャコールの重さを避け、上質でクリーンな雰囲気を作りたいときに特に役立ちます。

以下は、HEXコード付きの20種類のペールグレーカラーパレットのアイデアと、実際のUI、ブランディング、印刷、インテリアでの活用例です。

ペールグレーパレットが優れている理由

ペールグレーは「安全な中間」に位置する色で、バランスのとれた印象をデザインにもたらします。視覚的ノイズを抑え、可読性を高め、タイポグラフィやコンテンツそのものを主役にします。そのため、プロダクトUIやエディトリアルレイアウト、高級感あるパッケージングにも定番となっています。

純粋なグレーと違い、ペールグレーはやや空気感と柔らかさを持ち、インターフェースには親しみやすさ、インテリアには明るさを与えます。寒色系（ブルーグレー・セージ・ライラック）とも暖色系（ブラッシュ・トープ・テラコッタ）とも組み合わせやすい点も特徴です。

何より重要なのは、ペールグレーは「主張しすぎずに階層感を作る」こと。アクセントカラーをさり気なく使い、微妙な色の段階差で奥行きを出すことができます。アクションやハイライト、ブランドのシグネチャーなどにだけアクセントを効かせてみましょう。

20＋ ペールグレーカラーパレットアイデア (HEXコード付き)

1) フォギーリネン

HEX： #d8dadd #cfd2d6 #e9e6e1 #b7b2ab #a8c1c7

雰囲気： エアリー、ミニマル、落ち着き

おすすめ用途： 生産性アプリの2D UIダッシュボード

朝の霧がきれいなリネンの上にかかったように、エアリーで静かな色調が空間にゆとりを生み出します。可読性を大事にしたダッシュボードや、データをフレンドリーに見せたいときに最適。温かみのあるオフホワイトとクールなスレートカラーで階層を作り、控えめなティールは主要アクションに。ポイントは、境界線を低コントラストにして、余白で整理感を出すことです。

media.ioで生成したフォギーリネンの画像例

Media.io

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

今すぐ無料で試す

2) パールオーバーキャスト

HEX： #e3e4e7 #c9ccd2 #f3f0f2 #d9c7c0 #b8b5b9

雰囲気： 洗練、穏やか、高級感

おすすめ用途： スキンケアパッケージや商品広告

洗練されて癒されるパールの光が曇り空に差し込むようなイメージ。大人っぽく柔らかな印象を出せるので、スキンケアやウェルネス関連のパッケージに最適です。淡いグレーベースにピンクベージュのアクセントでやさしくコントラストを付け、タイポグラフィはチャコールかブラックで明快に。ポイント：最も明るい色をラベル領域に使うと、成分表も読みやすくなります。

media.ioで生成したパールオーバーキャストの画像例

3) ダヴ＆ブラッシュ

HEX： #d6d8db #f1e7e8 #e7d4d8 #c7c9cc #b4a2a9

雰囲気： ロマンチック、やさしい、上品

おすすめ用途： 結婚式招待状セット＆RSVPカード

ロマンチックでやさしく、鳩や花びら、サテンリボンを思わせる雰囲気。このペールグレーカラーパレットは、甘くなり過ぎず上品な結婚式ステーショナリーに最適です。温かみのある白い用紙と、少し深いモーヴで名前や見出しを。ポイント：ごく小さなメタリック箔のアクセントで静かなグレーの印象を格上げ。

media.ioで生成したダヴ＆ブラッシュの画像例

4) ミスティセージスタジオ

HEX： #d2d5d7 #c7d2cc #eef0ed #aab3ad #9fb8ad

雰囲気： フレッシュ、落ち着き、スパのよう

おすすめ用途： リビングルームのインテリアスタイリング

フレッシュで落ち着いた雰囲気は、明るいスタジオの窓外に広がる霧の立ち込める庭を想起させます。セージ系グレーは、北欧やジャパンディスタイルのインテリアにおすすめ。オーク材やヘアライン仕上げのスチール、観葉植物と組み合わせて立体感を。ポイント：ファブリックはマットにすると、やわらかなグレーが冷たく見えず居心地もアップ。

media.ioで生成したミスティセージスタジオの画像例

5) コンクリートローズ

HEX： #cfd1d4 #b9b3b6 #f0e6ea #d6b2bc #8f7f86

雰囲気： エディトリアル、モダン、少しムーディー

おすすめ用途： ファッションルックブックのエディトリアルレイアウト

モダンで少しムードのある印象は、コンクリートをローズフィルターで柔らかくしたような雰囲気。ファッション・ライフスタイル系のエディトリアルに最適。淡いブラッシュと深みのあるモーヴで引用やセクション区切りを強調。写真はコントラスト強めで、淡い印象になりすぎないように注意。長文の本文は温かみのあるオフホワイトにのせて読みやすく。

media.ioで生成したコンクリートローズの画像例

6) クワイエットハーバー

HEX： #d5d8dc #c4c9cf #eaeef1 #9fb0bd #b8a7a2

雰囲気： クール、安定、安心感

おすすめ用途： ファイナンス向けアプリのオンボーディング画面

クールで安定感のある配色は、静かな港のスチールブルーの水面や石畳を連想させます。信頼感と落ち着きを優先したいファイナンスやユーティリティ系に最適。ブルーグレーを主なアクセントに、暖かいトープ色はバッジや強調表示に限定して使うのがコツ。アイコンの線はやや太めにすると、ソフトな背景でもシャキッとします。

media.ioで生成したクワイエットハーバーの画像例

7) ウィンターペーパー

HEX： #e6e7ea #d2d4d8 #faf7f3 #c8c0b7 #a9aab0

雰囲気： クリーン、静けさ、普遍的

おすすめ用途： ニュースレターテンプレート、エディトリアル系メールデザイン

清潔で静かな印象は、冬の光が厚みのある紙や柔らかな鉛筆の線に映る感じ。コンテンツを吟味・厳選したいメールマガ・ニュースレターに最適。クリームや中間グレーでセクション分け、トープのアクセントはリンク・タグのさりげない強調に。ポイント：1ブロック1要素のみアクセントカラーを使い、余白多めでエアリーに。

media.ioで生成したウィンターペーパーの画像例

8) ムーンストーンラテ

HEX： #d9dbde #c8c4bf #f2ebe2 #d8c2a9 #9f9aa0

雰囲気： 居心地良さ、モダン、ウェルカム感

おすすめ用途： カフェメニューのポスターデザイン

心地よくモダンな雰囲気は、ムーンストーンの煌めきと温かなラテのコントラスト。クリーミーなニュートラルベースでメニューが読みやすく、キャラメル色のアクセントで食欲をそそる温かみをプラス。タイポグラフィはダークココア色で、シンプルなラインアイコンと合わせると今風。値段やおすすめメニューにはキャラメルで、パッと目を引く階層感を。

media.ioで生成したムーンストーンラテの画像例

9) ダスティアイリス

HEX： #d4d6da #c6c0cf #ede8f3 #a7a3b8 #a4b6c6

雰囲気： ドリーミー、ソフト、クリエイティブ

おすすめ用途： マインドフルネス系のポッドキャストカバーアート

夢のようでやわらかいイメージは、アイリスの花や淡い夕暮れを思わせます。心を落ち着かせる色合いで、クリエイティブなブランドや音声配信カバーにおすすめ。ラベンダー寄りグレーとミスティブルーを組み合わせて深みを出し、明るいライラックでタイトル周りに余白を。ポイント：グレインや微細なテクスチャを加え、パステルに立体感を。

media.ioを使って生成したダスティアイリスの画像例

10) 海辺の小石

HEX：#d7d9dc #c8d0d6 #eff3f4 #a0b1b5 #b9b2a8

雰囲気：風通しがよく、清潔、海岸沿い

おすすめ用途：ウェブサイトランディングページヒーロー（2D UIモックアップ）

さわやかで清潔で、明るい空の下で淡い小石と塩気を呼び起こします。これらのトーンは、軽いタッチが必要な旅行、ウェルネス、ライフスタイル サイトに適しています。クールなシーグレーに温かみのある石のアクセントを合わせることで、ページが無菌感を感じさせません。ヒント: インタラクションが鮮明に感じられるように、ナビゲーション状態に深い青グレーを使用してください。

media.ioを使って生成した海辺の小石の画像例

11）黒板の花びら

HEX：#d0d3d7 #b4bbc3 #f4f1ee #cdb3be #9aa4a8

雰囲気：柔らかく、芸術的で、懐かしい

おすすめ用途：ウォールアート用水彩画植物プリント

柔らかくて芸術的で、古いスケッチブックに押した花びらにチョークの粉を混ぜたような感触です。落ち着いたモーブは、クールなグレーを圧倒することなくロマンチックなノートをもたらします。水彩画のテクスチャ、デッキのエッジ、そしてたくさんのネガティブなスペースと組み合わせると、ギャラリーの準備ができている外観になります。ヒント: 茎やラベルなどの小さなディテールのみを最も暗い色調にしてください。

media.ioを使って生成した黒板の花びらの画像例

12) ソフトグラファイトポップ

HEX：#d1d3d6 #b9bcc2 #f2f2f4 #ffb3c1 #8fb6ff

雰囲気：遊び心があり、現代的で、自信に満ちている

おすすめ用途：スタートアップ ブランド キットとソーシャル テンプレート

遊び心がありモダンで、キャンディーカラーのハイライトで明るくなったグラファイトスケッチのような感じです。このパステル グレーのカラー パレットは、個性に 2 つのパンチの効いたアクセントを備えたニュートラルなファンデーションを求めるスタートアップに最適です。フレンドリーなCTAのためのピンクと情報状態のためのソフトブルーを組み合わせ、構造のためのグレーを維持します。ヒント: チップやアイコンなどの小さくて繰り返し可能なコンポーネントにアクセントを適用して、一貫性を保ちます。

media.ioを使って生成したソフトグラファイトpopの画像例

13) ハッシュドテラコッタ

HEX：#d4d6d8 #c3c0bb #f5efe9 #d9a48f #9b8f8a

雰囲気：温かく、素朴で、控えめな

おすすめ用途：キッチンインテリアムードボードコンセプト

暖かく控えめなこの作品は、柔らかい霧の中から見える太陽で焼いた粘土を思い出させます。テラコッタノートはグレーのニュートラルに命を加え、キッチン、カフェ、手作り製品ラインに最適です。クリームタイル、天然石、マットブラックのハードウェアと組み合わせると、バランスの取れたコントラストが得られます。ヒント: 部屋の中でテラコッタを 2 回エコーし、グレーが大きな表面を支配します。

media.ioを使って生成したハッシュテラコッタの画像例

14）シルバースプラウト

HEX：#d8dadc #c6cbd0 #eef2ee #a8c2b0 #93a39b

雰囲気：フレッシュ、エコ、バランス

おすすめ用途：持続可能な製品ラベルとパッケージング

フレッシュでエコに配慮した、起毛シルバーに対する新芽のような感触。これらのグリーンはミュートされたままなので、全体的な外観は大音量ではなくクリーンでプレミアムなままです。再生紙のテクスチャ、シンプルなアイコン、成分リストと合法的なコピーのための濃いグレーと組み合わせてください。ヒント: 持続可能性の主張を簡単に見つけるために、ペールミントを背景パネルとして使用してください。

media.ioを使って生成した銀の芽の画像例

15）コットンクラウドプレイ

HEX：#e0e1e4 #cfd0d4 #fff7f0 #f1c7c7 #b0b6c7

雰囲気：甘くて風通しがよく、子供に優しい

おすすめ用途：保育園のポスターとベビーシャワーのウェルカムサイン

甘くて風通しが良く、チークを優しく振りかけたコットンクラウドのように見えます。クリーミーなホワイトは保育園に十分な柔らかさを保ち、ダスティブルーは落ち着いたバランスを加えます。丸みを帯びたタイプ、シンプルな動物、そしてたっぷりのスペースと組み合わせると、落ち着いた外観になります。ヒント: チークは小さなハイライト用にしておくと、子供が成長しても時代を超越したデザインが保たれます。

media.ioを使って生成した綿雲遊びの画像例

16) 雨の日のデニム

HEX：#d3d5d9 #bcc2c9 #e9edf2 #8fa3c7 #9b8ea0

雰囲気：リラックスした、現代的な、信頼できる

おすすめ用途：クリエイター向けの Instagram カルーセル テンプレート

リラックスして頼りになる、雨の窓の下のデニムのような気分です。ブルーグレーのアクセントが見出しや仕切りに構造を加え、モーブが企業的になりすぎないようにしています。モノクロの写真やシンプルなイラストとペアリングして、まとまりのあるフィードを維持します。ヒント: 2 つのテキスト サイズと 1 つのアクセント バーの繰り返しシステムを構築して、投稿を高速化します。

media.ioを使って生成した雨天デニムの画像例

17) ライラックアッシュバランス

HEX：#d7d8dc #c7c2d1 #f4f1f6 #a7a1b2 #a6b0b8

雰囲気：落ち着いた、プロフェッショナル、優しい

おすすめ用途：コンサルタント向けプレゼンテーションスライドデッキ

穏やかでプロフェッショナルな、柔らかい日光の中を漂うライラックの灰に似ています。明確なコントラストなしに暖かさと権威を求めるスライドデッキに適しています。セクションヘッダーには濃い紫グレーを組み合わせ、コンテンツの多いスライドにはほぼ白を使用します。ヒント: チャートはほとんどモノクロにし、ライラックの色合いは重要なポイントのみに予約してください。

media.ioを使って生成したライラックアッシュバランスの画像例

18) ミニマルミュージアム

HEX：#d5d6d9 #c0c2c6 #f3f3f1 #cbbfae #8d9096

雰囲気：ギャラリー - 清潔で静か、厳選された

おすすめ用途：展示会ポスター・イベントチラシ

ギャラリーで清潔でキュレーションされた、コンクリートの壁、柔らかいスポットライト、暖かい石の台座を思い出させます。これらのパステルグレーの色の組み合わせは、タイポグラフィが意図的でモダンな感じが必要な展示ポスターに最適です。温かみのあるベージュを小さなフレームや日付ラベルとして組み合わせ、タイトルにはより深いスチールグレーでレイアウトをアンカーします。ヒント: 特大タイプの要素を 1 つ選択し、残りはニュートラルに任せます。

media.ioを使って生成したミニマルミュージアムの画像例

19) 粉钢

HEX：#cfd2d6 #b8bec6 #e7ebf0 #9aa6b2 #c7b7bd

雰囲気：洗練された、データ転送、モダン

おすすめ用途：グラフ付き分析ダッシュボード UI

洗練されたモダンな、柔らかいチークの反射がパウダーコートされたスチールのような感触です。クールなグレーはチャートを読みやすくし、ミュートされたモーブは叫ぶことなくアラートや選択した状態を強調表示できます。シンプルな棒グラフと線グラフ、細いグリッドライン、寛大なパディングと組み合わせて、落ち着いたデータ体験を実現します。ヒント: チャートタイプごとに一貫したアクセントカラーを 1 つ設定して、ユーザーがシステムをすばやく学習できるようにします。

media.ioを用いて生成した粉末鋼の画像例

20) 吹きガラスのパステル

HEX：#d9dadf #cfd1d6 #f6f2f4 #b7d7d9 #e6b8d0

雰囲気：軽い、光沢のある、ブティック

おすすめ用途：化粧品商品広告・バナー

軽くて光沢のある、パステルの反射をキャッチする吹きガラスを思い出させます。アクアティントがグレーをフレッシュにし、ピンクがブティックビューティーの雰囲気をプラスします。ハイキーな製品写真と最小限のコピーと組み合わせることで、色が忙しくなく風通しが良く感じられます。ヒント: シャドウを柔らかくニュートラルに保ち、繊細な色合いが真実のままにします。

media.ioを使って生成した吹きガラスパステルの画像例

ペールグレーに合う色は？

パステルグレーは、チーク、トープ、ウォームクリーム、テラコッタなどの柔らかい暖かさと美しくマッチします。これらは親しみやすさを追加し、パレットが冷たく感じないようにします。パッケージ、編集レイアウト、家のスタイリングにぴったりです。

より新鮮でクリーンな外観のために、パステルグレーとセージ、ミント、コースタルブルーグレー、またはダスティデニムを組み合わせてください。これらのアクセントは落ち着きを保ちながら、明確なUI状態と視覚的な階層を作成するのに十分な色を追加します。

プレミアムな仕上がりが必要な場合は、タイポグラフィとキーディバイダーにディープアンカーカラー（チャコール、エスプレッソ、ディープネイビー）を1つ追加します。パステルグレーは寛容なので、少量のコントラストでも大いに役立ちます。

実際のデザインにペールグレーパレットをどう使う？

UIデザインでは、背景やカードのベース面としてパステルグレーを使用し、ボーダーやセカンダリパネルのコントラストをわずかに強化します。インターフェイスが焦点を合わせてスキャンしやすいように、プライマリアクションにアクセントカラーを1つ予約します。

ブランディングやプリントの場合、パステルグレーはタイポグラフィを洗練されたモダンに見せるのに役立ちます。特に温かみのあるオフホワイトの紙の色調と組み合わせると。ライトグレーをフラットに感じさせないように、テクスチャ（グレイン、マット仕上げ、ソフトシャドウ）を使用してください。

インテリアでは、オーク、リネン、石、ブラッシュメタルなどの天然素材とバランスをとると、パステルグレーが最も効果的です。部屋に深みを与えるために、より深いトーン (プラント グリーン、グラファイト、またはスチール ブルー) を 1 つ追加します。

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

16進コードを持っているが、モックアップ、ポスター、UI画面、製品広告などの実際のビジュアルが必要な場合は、AI を使用すると、一貫した例をすばやく生成できます。レイアウト、照明、スタイルを説明してから、バリエーションを超えて同じパレットを再利用できます。

Media.io を使用すると、すべてを一から構築することなく、プレゼンテーション、ソーシャル テンプレート、コンセプト ボード用のクリーンなブランド イメージにプロンプトを変換できます。上記の 1 つのパレットから始めて、構成とアクセントの使い方を繰り返します。

次へ： サーカスカラーパレット