人気のグレーカラーパレット20選とおすすめ配色例【HEXコード付】

グレーのカラーパレットは、デザインを落ち着いた、現代的で読みやすい印象にしたい時の定番の選択肢です。柔らかな霧のような背景からドラマティックなチャコールの対比まで、グレーはUI、インテリア、ブランディングに幅広く活躍します。

以下に、HEXコード、雰囲気のメモ、最適な使用例、そしてAI生成のビジュアル例を含む、厳選された20種類のグレー配色アイデアを紹介します。

なぜグレーパレットは活用しやすいのか

グレーは自然に明瞭さを引き立てるニュートラルカラーです。視覚的なノイズを減らし、タイポグラフィやレイアウト構造を際立たせて、明から暗まで段階的に階層を簡単に構築できます。

グレーは暖色（トープ、小石、エスプレッソ）にも寒色（スレート、スチール、ブルーシルバー）にも寄せられるため、ほぼどんなブランドの個性にも合わせられます。静かでミニマルにも、ブラックに近いチャコールでシネマティックな印象にもできます。

グレーはアクセントカラーとも相性抜群です。単色のティールやカッパー、ブラッシュ、オリーブをアクセントにすれば、全体のニュートラルさを保ちつつ、ブランドの個性になります。

20以上のグレー配色アイデア（HEXコード付き）

1）霧のコンクリート

HEX： #F2F4F6 #D9DEE3 #B6BEC8 #7B8794 #2F3640

雰囲気： 空気感、モダン、落ち着き

最適な用途： ミニマルなダッシュボードUIやSaaSサイト

空気感のある霧のようなニュートラルカラーは、磨かれたコンクリートや柔らかな日差し、整ったワークスペースを想起させます。読みやすさが求められ、視覚ノイズを抑えておきたいダッシュボードにぴったりです。暗いスレートは細い仕切りに使い、ほぼ白い色を広いレイアウトに使用しましょう。深い色は見出しやアイコンなど重要な場所に使うことで、はっきりとしたコントラストを生みつつ強すぎない印象を与えます。

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

Media.io

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

無料で今すぐ試す

2）グラファイトデニム

HEX： #E7EAEE #C6CBD3 #8B94A3 #3C4658 #1E2430

雰囲気：雰囲気： スタイリッシュ、テクノロジー感、自信

最適な用途：用途： アプリUI、フィンテックブランディング、プレゼンテーション

デニムブルー寄りのスタイリッシュなグラファイトカラーは、スマートで構造的、静かに自信を感じさせます。中間グレーはチャートやテーブルに適しており、深い色は見出しに存在感を与えます。シンプルなラインアイコンと余白を組み合わせると、現代的なプロダクトの雰囲気になります。背景は二番目に明るい色までに留め、画面が重くならないようにしましょう。

media.ioで生成したグラファイトデニムの画像例

3）暖色の小石

HEX： #FAF7F3 #E2D7CF #B8AAA0 #7E6F66 #3B3531

雰囲気：雰囲気： 居心地よい、落ち着き、オーガニック

最適な用途：用途： リビングルーム、カフェ、ライフスタイルブランド

居心地良い小石ニュートラルは、川石やウールブランケット、陽ざしのあたる粘土を思わせます。暖かい色味が特に木を多用したインテリアにぴったりです。リネンやオーク、マットセラミックなど自然素材と合わせて質感を感じさせましょう。最も深いブラウン系グレーはフレームやハードウェアのほんのアクセントに使い、全体が柔らかな印象を保つように。

media.ioで生成した暖色の小石の画像例

4）シルバースクリーン

HEX： #FFFFFF #E5E7EB #C7CCD4 #9AA3AF #111827

雰囲気：雰囲気： クリーン、編集向き、コントラスト高め

最適な用途：用途： マガジンレイアウト、ポートフォリオ、タイポグラフィ主導のサイト

インクのようなコントラストが印象的なクリーンなシルバー系ニュートラルは、新しい紙やシャープな黒文字のイメージ。写真や見出しが主役の場面に最適です。大胆なサンセリフフォントや広い余白と組み合わせるとプレミアムな編集美を引き出します。本文テキストはほぼ黒を使い、中間グレーはキャプションやUIラベルに。

media.ioで生成したシルバースクリーンの画像例

5）チャコールエスプレッソ

HEX： #F4F1EE #D7D0C8 #A79B90 #4A3F39 #1F1B18

雰囲気：雰囲気： リッチ、親密、洗練

最適な用途：用途： コーヒーパッケージ、ブティックメニュー、プレミアムラベル

リッチなチャコールブラウンのニュートラルは、エスプレッソのクレマやレザー、ろうそくの灯りをイメージさせます。コントラストは高級感がありつつ、白黒に寄り過ぎません。オフホワイト紙や繊細なエンボス加工と組み合わせることで、手触り感のある上質な印象になります。クリーミーな最も明るい色を主に使い、濃い色はアクセント用途として配置しましょう。

media.ioで生成したチャコールエスプレッソの画像例

6）アーバンフォグ

HEX： #F6F7F8 #E1E4E8 #B4BBC5 #6A7484 #2A2F38

雰囲気：雰囲気： ムーディー、都会的、控えめ

最適な用途：用途： 建築ポートフォリオ、企業向け資料

都会的なグレーは、霧に包まれたスカイラインや鉄骨、雨の歩道を連想させます。中間色はレイアウト構造を支え、深いチャコールが見出しや強調箇所を引き締めます。モノクロ写真や細いグリッドラインと組み合わせ、フォルムとスペーシングを際立たせましょう。青みのある中間色はセカンダリーボタンなどに使ってアクションが目立つデザインに。

media.ioで生成したアーバンフォグの画像例

7）フロストライラック

HEX： #F7F5FA #DED7E8 #B7AACB #6F6488 #2E2A3B

雰囲気：雰囲気： ソフト、ドリーミー、ロマンティックでモダン

最適な用途：用途： ビューティーブランド、ウェルネスポスト、やさしいUIテーマ

ライラックの淡いニュアンスがフロストガラスやラベンダーの霞、静かなセルフケアの時間を感じさせます。パープル系の色味は個性を加えつつ、ミニマルなレイアウトに馴染むさりげなさも。ミニマルな線画や広い余白で空気感を出しましょう。深いプラム系グレーはアイコンやセクション仕切りなど小さなハイライトに、背景には使わないのがおすすめです。

media.ioで生成したフロストライラックの画像例

8）コンクリートとカッパー

HEX： #F3F4F5 #D0D4D9 #8A9099 #3E434A #B87333

雰囲気：雰囲気： インダストリアル、暖かい、デザイン重視

最適な用途：用途： 商品広告、ハードウェアブランド、モダンキッチン

コンクリートの無機質なトーンにカッパーの輝きが加わると、ロフト照明やブラッシュドメタルのディテールをイメージさせます。ニュートラルな色味とひとつのアクセントカラーで、商品広告に最適。カッパーは最も濃いチャコールと組み合わせて高級感を出し、背景は最も淡い二色を使うと良いでしょう。カッパーは一つの要素（ボタンや商品バッジなど）限定で使い、視覚ノイズを避けましょう。

media.ioで生成したコンクリートとカッパーの画像例

9）スレートとシーフォーム

HEX： #F2F5F6 #CAD2D7 #8A9AA5 #2F3C46 #7FB7B3

雰囲気：雰囲気： フレッシュ、沿岸風、バランス感

最適な用途：用途： ヘルスアプリ、スパチラシ、旅行ブランド

スレートグレーにシーフォームがアクセントとして加わることで、沿岸の爽やかさやクリーンなウェルネス空間を表現。ティール系の色はエネルギーをもたらし、グレーのニュートラルは読みやすく落ち着いた印象を保ちます。丸みのあるUIコンポーネントや広いポスターレイアウトと合わせると、親しみやすく現代的な雰囲気になります。シーフォームはリンクや主要ボタンのアクションカラーとして使うのがおすすめです。

media.ioで生成された、スレートとシーフォームのイメージ例

10）ミニマルモノ

HEX： #FAFAFA #E0E0E0 #B0B0B0 #707070 #101010

雰囲気： ミニマル、タイムレス、シャープ

最適な用途： ロゴ、タイポグラフィーポスター、UIダークモードアクセント

ミニマルな単色は、ギャラリーの壁、クリアな印刷、完璧に揃った文字組みのような雰囲気です。トーンごとの段階が明確なので、デジタルでも印刷でも階層づけが簡単です。ジオメトリックな1つのフォントファミリー、均一な余白と合わせると、洗練されモダンなシステムになります。使い方のコツ：最も暗いトーンは主要なアンカー部分だけに使い、デザインを軽やかに呼吸させましょう。

media.ioで生成されたミニマルモノのイメージ例

11）ストーミーハーバー

HEX： #F0F3F5 #C5CFD8 #7C8A96 #2D3A45 #0B1218

雰囲気： ドラマチック、海洋的、真面目

最適な用途： ドキュメント表紙、コンサル資料、ヒーローバナー

ストーミーで海のようなグレーは、深い水、重い雲、夕暮れの船をイメージさせます。クールな配色はプロフェッショナルで安定感があり、権威が必要な内容に最適です。シンプルなアイコンや左揃えのタイポグラフィーで明快さを強調してみてください。使い方のコツ：ほぼブラックはタイトル用に、一方大きな色面は明るめのトーンにして、重い印象にならないよう注意しましょう。

media.ioで生成されたストーミーハーバーのイメージ例

12）ダスティローズアッシュ

HEX： #F7F2F3 #E1D4D6 #B5A0A4 #6C545A #2A2023

雰囲気： ソフト、ヴィンテージ、親密感

最適な用途： 結婚式招待状、キャンドルラベル、ライフスタイル投稿

柔らかいローズアッシュは乾いた花びらや、ほのかに赤みのある生地、ヴィンテージの文房具を思わせます。甘すぎず明るすぎないロマンチックさを演出したい時に最適なグレーです。セリフタイポグラフィーや繊細な紙目と合わせると、ハンドクラフト感とエレガントな仕上がりに。使い方のコツ：最も暗いワイングレーはモノグラムやボーダー、フッターテキストなど小さいディテールに使いましょう。

media.ioで生成されたダスティローズアッシュのイメージ例

13）オリーブシャドウ

HEX： #F4F5F2 #D5D7CF #9AA091 #4C5346 #1E241B

雰囲気： アーシー、くすみ、アウトドア

最適な用途： アウトドアブランド、エコパッケージ、ナチュラル系ブログ

オリーブ寄りのくすんだグレーは、森の影や苔むした石、使い込まれたキャンバスを連想させます。サステナブルな印象でエコ志向のブランディングに強いです。クラフト紙テクスチャやリサイクルペーパー、シンプルなスタンプ風グラフィックと合わせ、自然な仕上がりに。使い方のコツ：ブラック寄りのグリーングレーはタイポグラフィーだけに用い、他は明るめでナチュラルな見た目を保ちましょう。

media.ioで生成されたオリーブシャドウのイメージ例

14）サンドストーングレー

HEX： #FBF8F2 #E5DDCF #C2B7A6 #8A7D6D #3E352E

雰囲気： 陽だまり、自然体、リラックス

最適な用途： インテリア、ホテルブランディング、旅行パンフレット

日差しを浴びたサンドストーンニュートラルは、砂漠の小道、柔らかな影、暖かな壁面を思わせます。クリーミーなハイライトで明るさを保ち、深いトープで構造と奥行きをプラス。ナチュラルな写真やラタンのテクスチャ、暖色照明と組み合わせると落ち着きある上質な印象になります。使い方のコツ：ミッドトーンをUIや印刷の背景に使うと、まぶしすぎず明るさを維持できます。

media.ioで生成されたサンドストーングレーのイメージ例

15）ネオンサインノワール

HEX： #F1F2F4 #B8BDC7 #5F6675 #1A1D25 #00A6A6

雰囲気： ナイトライフ、大胆、シネマティック

最適な用途： ミュージックポスター、テックローンチ、ストリーマーブランディング

シネマティックなダークグレーにネオンティールを加えると、都会の夜や光沢のあるサイン、夜更けのエネルギーを思わせます。ピュアブラックに頼らず強いコントラストを演出。ビッグサイズの文字やシンプルな図形で、アクセントのネオンの意図を明確に。使い方のコツ：ティールは日付やCTA、下線など一点のみに使いましょう。

media.ioで生成されたネオンサインノワールのイメージ例

16）ヴィンテージニュースプリント

HEX： #FDF9F0 #E7E0D5 #B9B0A4 #6A6258 #2E2A25

雰囲気： 伝統的、居心地のよさ、エディトリアル

最適な用途： 書籍カバー、ジャーナル、カフェメニュー

伝統的なニュートラルは、古紙やインクのにじみ、読み込まれた本のページを思い起こさせます。暖かいグレーはコントラストを和らげ、長文のタイポグラフィーもクラシカルで快適に見せます。セリフ体、薄いルール、やや黄みがかった背景と合わせると、時を超えたエディトリアルトーンに。使い方のコツ：テクスチャは控えめに、余白はゆったり取るとヴィンテージ感を保てます。

media.ioで生成されたヴィンテージニュースプリントのイメージ例

17）アルパイングラニット

HEX： #EFF2F1 #C6CFCC #8B9A95 #45524E #1E2623

雰囲気： クール、アウトドア、洗練

最適な用途： ハイキングブランド、アウトドアアパレル、ミニマリストパッケージ

クールなグラニットグレーは、山岳の朝、石畳、針葉樹の新鮮な空気を想起させます。グリーンがかったニュートラルカラーは明るく清潔感があります。クリーンなサンセリフ書体やシンプルなラインイラストと合わせると現代的アウトドアスタイルに。使い方のコツ：背景はペールに、最も濃い色はバッジやサイズ表記、重要なラベルにのみ使いましょう。

media.ioで生成されたアルパイングラニットのイメージ例

18）サイバーシルバー

HEX： #F7FAFC #D6DEE8 #A1AFBF #4A5B70 #0F172A

雰囲気： 未来的、シャープ、プロフェッショナル

最適な用途： B2Bランディングページ、データツール、ピッチデック

シャープなブルーシルバートーンは、磨かれたアルミやクリーンなインターフェイスといった未来感。カードやナビゲーション、データ主体のセクションにも自然な階調が作れます。さりげないグラデーションや細いアウトラインと合わせると構造と階層が強調されます。使い方のコツ：スチール系のミッドトーンは非アクティブUIに、最も濃い色は重要アクションの強調に。

media.ioで生成されたサイバーシルバーのイメージ例

19）チョコレートマーブル

HEX： #F6F2EC #D8CDBF #A28F7A #5A4635 #241B14

雰囲気： ラグジュアリー、暖かい、クラフト感

最適な用途： チョコレートパッケージ、高級グルメ広告、ブティックブランディング

暖かなマーブル調のニュートラルは、ココアパウダー、石のカウンター、手仕事の工芸品を思わせます。クリームから濃いチョコレートへのグラデーションは、印刷物で贅沢で上質な印象に。金系のアクセントやシンプルな箔押しと組み合わせると、ハイエンドな仕上げに。使い方のコツ：最も濃いブラウンは小さな文字やロゴ用に使い、全体が重くなりすぎないようにしましょう。

media.ioで生成されたチョコレートマーブルのイメージ例

20）ミッドナイトコンクリート

HEX： #E9EDF2 #B9C1CC #6B7482 #2A2F37 #0B0D10

雰囲気： 大胆、建築的、ドラマチック

最適な用途： スタジオブランディング、ポスターシリーズ、ダークUIテーマ

大胆なミッドナイトグレーは、黄昏時のコンクリートや鋭いシルエット、モダン建築のような雰囲気。ニュートラル・フレキシブルなままでドラマを演出したい時に最適です。大きなタイポグラフィーやミニマルなシェイプと合わせて、印象的なポスターやヒーローセクションに。使い方のコツ：最も明るいトーンでテキスト周りに呼吸スペースを設け、暗い背景でも圧迫感を避けましょう。

media.ioで生成されたミッドナイトコンクリートのイメージ例

グレーと相性の良い色は？

グレーは暖色・寒色どちらのアクセントとも相性が良く、主張しすぎません。クリーンでモダンな印象なら、スレートやシルバーグレーにティール、シーフォーム、コバルト、アイスブルーを試してみましょう。

暖かさや安心感がほしい時は、カッパー、テラコッタ、ブラッシュ、キャメル、クリームなどを、特にペブル、トープ、エスプレッソ系グレーと組み合わせます。招き入れるような、でもニュートラルな印象になります。

強いコントラストを出したい時は、ネアブラックのチャコールに鮮やかなホワイト、そのうえで1色（例えばネオンティール）のアクセントをボタンやバッジのみに使うと効果的です。

グレー配色をデザインに活用する方法

まず最も明るいグレーを背景に、ミッドトーンはカードや枠線に、最も濃い色は見出しや主テキストに割り当てましょう。ページ全体で読みやすく一貫したインターフェイスになります。

インテリアやブランディングでは、グレーには質感を加えるのがコツです。マットな陶器、リネン、ヘアライン金属、紙目、コンクリートなど。素材感があればニュートラル配色でも平板や冷たく感じません。

アクセントカラーは意図的に絞りましょう。カッパー、シーフォーム、ライラック、ティールなど1色のみをCTAや重要箇所に一貫して使うと、洗練されたシステムになり散漫になりません。

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

HEXコードがあり、すぐにモックアップが必要な場合は、AIを使って一致するビジュアル（ポスターレイアウト、LP、パッケージ案など）をゼロから作らず生成できます。

パレット名とムードキーワード（例：「アーバンフォグ」「ウォームペブル」など）、デザイン種別（ダッシュボード、招待状、パンフレット）も明記すれば、より狙いどおりに。アクセントカラーがある場合は必ず伝えましょう。

好みの結果ができたら、ライティングや質感、構成だけ調整しつつ、基本5色は変えずに反復してみてください。

次へ： グリーンピーチカラーパレット