グレー×レッド配色アイデア20選｜HEXコード付き

グレーとレッドのカラーパレットは、落ち着いた構造と大胆な感情の間の絶妙なバランスです。グレーはバランスと明快さをもたらし、レッドは集中、温かみ、勢いを加えます。

ブランド、UI、インテリアのムードボード、印刷物などをデザインする際、グレーとレッドの組み合わせは、混乱を感じさせずに素早く階層を構築するのに役立ちます。

なぜグレーとレッドのパレットはこんなに相性が良いのか

グレーは自然な「レイアウトカラー」です。タイポグラフィやグリッド、イメージを引き立てつつ目立ちません。レッドは逆で、重要性や感情、行動を瞬時に伝えてくれます。

両者を組み合わせることで、確かなコントラストと明確な階層が生まれます。デザインの大部分をニュートラルに保ち、特に注目させたい箇所（ボタンやバッジ、見出し、製品の主要な詳細など）だけにレッドを使うことができます。

グレーはレッドの個性も変化させます。スカーレットをクールなスチールと合わせれば現代的な印象に、ワインレッドを温かみのあるコンクリートグレーと合わせれば職人的で心地良い雰囲気に。

20以上のグレー×レッドのカラーパレットアイデア（HEXコード付き）

1) アッシュクリムゾン

HEX： #f3f2f1 #c7c7c9 #8b8d92 #b23a3a #2b2c2f

雰囲気：クリーン・大胆・都会的

おすすめ用途：ブランドアイデンティティやロゴシステム

クリーンなアッシュトーンと自信に満ちたクリムゾンが、黄昏時のコンクリートとネオン看板のように出会います。このグレー×レッドのカラーパレットはプロフェッショナルさを保ちながらもエネルギッシュさを感じさせ、特にテックや建築、現代的な小売りに最適です。余白や力強いサンセリフと組み合わせて、シャープな印象を維持しましょう。使用のコツ：レッドは重要なマークやアクションのみに取っておき、グレーにレイアウトを任せましょう。

media.ioで生成したアッシュクリムゾンのイメージ例

Media.io

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

今すぐ無料で試す

2) スレートローズ

HEX： #f6f4f2 #d2d6db #6f7882 #d16b6b #343a40

雰囲気：柔らかい・洗練・エディトリアル

おすすめ用途：結婚式招待状・ステーショナリー

柔らかなスレートと控えめなローズは、冷たい石に押し花された花びらのような印象を与えます。ロマンチックながら甘すぎないので、招待状や誓いのカード、セレモニープログラムにぴったりです。温かみのあるアイボリーの紙や繊細な線画と組み合わせるとより上質な仕上がりに。使用のコツ：本文は濃いチャコールに、ローズは名前やモノグラム、区切り線などポイントにのみ使いましょう。

media.ioで生成したスレートローズのイメージ例

3) グラファイトガーネット

HEX： #ececec #b0b3b8 #4a4f57 #7b1e2b #141619

雰囲気：劇的・高級・夜風

おすすめ用途：高級パッケージ・ラベル

ダークなグラファイトとガーネットは、ベルベットのソファやキャンドル、夜のカクテルを思わせます。グレー×レッドの組み合わせは、マット仕上げや箔押し、ミニマルなラベルで高級感を演出。暖かいオフホワイトとの相性も良く、控えめなアクセントパターンで質感を追加できます。使用のコツ：ガーネットはブラックまたは限りなくブラックに近いスポットカラー印刷で、濁らずリッチな印象に。

media.ioで生成したグラファイトガーネットのイメージ例

4) フォギーブリック

HEX： #faf7f4 #d8d1cc #9a9a9a #a84c3a #3a2f2c

雰囲気：落ち着いた・温もり・建築的

おすすめ用途：インテリアムードボード・デコレーションプラン

フォギーなニュートラルにレンガレッドのアクセントが加わることで、むき出しの壁がある改装ロフトのような雰囲気に。インテリアボードや塗装プラン、マテリアル選びに最適。ウッドやブラックの金具、リネンのテクスチャと合わせると生活感をプラス。使用のコツ：レンガはレイアウト上の主役だけに使い、アクセサリーでさりげなく繰り返して視覚的に重くならないようにしましょう。

media.ioで生成したフォギーブリックのイメージ例

5) ピューターチェリー

HEX： #f2f3f5 #b9bcc2 #70757f #c02f4a #1f2328

雰囲気：スムーズ・鮮やか・モダン

おすすめ用途：SaaSダッシュボードやUIアクセント

スムーズなピューターグレーとチェリーレッドのポップは、ちょうど良い緊張感のある洗練インターフェイスのよう。ニュートラルな基盤は情報量の多いレイアウトを支え、チェリーはアラートやアクティブタブ、進捗など状態を際立たせるのに最適。余裕のあるスペースと控えめなボーダーを使えば快適なコントラストに。使用のコツ：チェリーは主要アクションだけに絞り、二次アクションはグレーで。

media.ioで生成したピューターチェリーのイメージ例

6) コンクリートカベルネ

HEX： #f7f5f2 #c9c6c2 #7a7773 #6b1f2b #262524

雰囲気：ムーディー・素朴・高級

おすすめ用途：ワインラベルやグルメパッケージ

コンクリートグレーとカベルネレッドは、セラーの壁やオーク樽、深いベリーの香りを連想させます。クラフト感と上質さがありワインやスペシャルティコーヒーや小規模食品のパッケージにぴったり。クリーム色の用紙やクラシックなセリフ書体と合わせて伝統感を強調。使用のコツ：ブランドロゴにカベルネを使い、品種名などのテキストは暗いグレーにして読みやすく。

media.ioで生成したコンクリートカベルネのイメージ例

7) スチールブラッシュ

HEX： #ffffff #d9dee5 #8a94a3 #e39a9a #2e3440

雰囲気：エアリー・優しい・現代的

おすすめ用途：ビューティーブランド・ミニマルルックブック

エアリーなスチールグレーとブラッシュレッドは、磨かれた金属に柔らかな光が差すような印象。スキンケアやコスメ、落ち着いた自信を表したいルックブックにぴったり。ミニマルな写真や細いルール、広めの余白と組み合わせて高級感に。使用のコツ：ブラッシュは見出しやバッジの背景のみに使い、本文には使わない。

media.ioで生成したスチールブラッシュのイメージ例

8) ストーミーコーラル

HEX： #f4f6f8 #b7bec7 #59626b #f05b5b #1b1f24

雰囲気：エネルギッシュ・シャープ・ハイコントラスト

おすすめ用途：キャンペーングラフィック・SNSテンプレート

ストーミーグレーとコーラルレッドは、速報ニュースバナーやキャンペーン開始の緊張感を表現。グレー×レッドの色合いは、大胆な見出しやカウントダウン投稿、シャープなアイコンセットに最適。重量感ある書体やシンプルな形でコーラルを際立たせ、混沌とせずクリーンに。使用のコツ：レイアウトごとにコーラルは主役1つだけ、サポート情報はミッドグレーに任せましょう。

media.ioで生成したストーミーコーラルのイメージ例

9) スモークマルサラ

HEX： #f1efee #c2bdbb #7c7674 #7a2e3a #2a2526

雰囲気：成熟・居心地・文学的

おすすめ用途：雑誌特集・エディトリアルレイアウト

スモーキーなニュートラルとマルサラレッドは、使い込まれたレザーや紙の質感、静かな読書スペースを思わせます。奥行きや階層、引用文などさりげないアクセントがほしいエディトリアルに最適。温かみのある写真やセリフ見出しと組み合わせてタイムレスな雰囲気を。使用のコツ：長文は中濃度グレーで目の負担を減らしつつ、コントラストを確保。

media.ioを使用して生成されたスモークマルサラの画像例

10）シルバーポピー

HEX： #f8f8f8 #d0d3d6 #888f97 #d63b3b #24272b

雰囲気： フレッシュ、自信、クリア

おすすめ用途： プレゼンテーションデッキとピッチ用テンプレート

シルバーグレーとポピーレッドは、シャープなキーノートと自信のある強調を感じさせます。このグレーとレッドの組み合わせは、スライドを読みやすくしつつ、重要な数字やセクション見出しを際立たせます。シンプルなチャート、細い仕切り線、十分なホワイトスペースと組み合わせて視覚的なノイズを避けましょう。使い方のコツ：ポピーレッドはハイライトのみ使い、ダイアグラムは主にニュートラルにして一貫性を保つ。

media.ioを使用して生成されたシルバーポピーの画像例

11）アイアンベリー

HEX： #e9eaec #b3b5ba #5b5f66 #8f1d2c #1a1b1e

雰囲気： タフ、スポーティ、集中

おすすめ用途： スポーツブランディングとイベントプロモーション

アイアングレーと深いベリーレッドは、スタジアムのライトや真剣なトレーニングのエネルギーを喚起します。コントラストは十分強く、遠くからでも視認性が高いユニフォームやサイン、イベントポスターに最適です。圧縮された書体やインパクトのある写真と組み合わせて力強く競争的な雰囲気を出します。使い方のコツ：背景は暗く、ライトグレーをテキスト周辺にバッファーとして使い読みやすさを向上させる。

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

12）ムーンリットメルロー

HEX： #f5f4f7 #c8c4cf #6b6773 #5a1f33 #201a1f

雰囲気： ミステリアス、エレガント、夜

おすすめ用途： 音楽アプリUIとナイトライフのブランディング

ムーンリットグレーとメルローレッドは、ベルベットのカーテンやほの暗いプレイリストバーのような印象です。暗いニュートラルがアルバムアート向けの滑らかな背景を作り、メルローがアクティブな状態のラグジュアリーアクセントになります。さりげないグラデーションや丸みのあるコンポーネントと組み合わせてインターフェースを親しみやすく。使い方のコツ：メルローは選択や進捗インジケーターに限定し、ユーザーがフォーカスすべき場所が分かりやすくなる。

media.ioを使用して生成されたムーンリットメルローの画像例

13）ダウンタウンルビー

HEX： #f7f7f6 #cfd2d6 #7b8088 #c1122e #2a2e34

雰囲気： アーバン、シャープ、目を引く

おすすめ用途： ウェブサイトヘッダーとヒーローセクション

シャープなダウンタウングレーとルビーレッドは、ガラスのビルを背景にしたストリートサインの印象。強いヒーローバナーやナビゲーション状態、タイポグラフィの主張に最適です。クリーングリッドと抑えたアイコンスタイルと組み合わせ、モダンな雰囲気を維持。使い方のコツ：ルビーレッドは主なボタンに使い、ホバーや下線など小さなディテールで補強する。

media.ioを使用して生成されたダウンタウンルビーの画像例

14）ダスティクランベリー

HEX： #f3f0ee #d6cfca #8c8683 #a2323a #322b2a

雰囲気： 居心地よい、手作り、ノスタルジック

おすすめ用途： 季節のクラフトやスモールビジネスのブランディング

ダスティグレーとクランベリーレッドは、編み物のスカーフ、クラフト紙、手書きメモのような印象です。キャンドルやソープ、職人製品にぴったりで「温かみ」が重要です。オフホワイトの紙、テクスチャ背景、親しみやすいセリフ体と組み合わせて迎え入れる雰囲気に。使い方のコツ：クランベリーをスタンプのようなアクセントにし、ほとんどの面は明るく保つことでブティック感を演出。

media.ioを使用して生成されたダスティクランベリーの画像例

15）グラナイトペッパー

HEX： #f9f9f9 #c1c4c8 #6a6e73 #9e2f2f #111214

雰囲気： ミニマル、自信、グラフィック

おすすめ用途： タイポグラフィックポスターやアナウンスメント

グラナイトとペッパーのダークカラーに控えめなレッドアクセントはシャープで現代的な印象。ニュートラルカラーが大文字構成に強いストラクチャーを作り、レッドは正確な下線やスタンプとして機能します。単一書体とタイトなスペースでデザイン性ある見た目に。使い方のコツ：レッドは句読点のように少量だけ使い、大きなブロックは塗りつぶさないこと。

media.ioを使用して生成されたグラナイトペッパーの画像例

16）ウィンター・スカーレット

HEX： #ffffff #e2e4e7 #9aa1a8 #cc1f2f #2b2f33

雰囲気： 祝祭、シャープ、冬らしい

おすすめ用途： ホリデーカードや季節のメールバナー

アイシーグレーとスカーレットレッドは新雪と明るいリボンのような印象です。緑を使わずに祝祭感が出るため、現代的なホリデーキャンペーンに最適です。ミニマルイラストや細い線アイコン、必要ならきらめきのテクスチャを加えると良いでしょう。使い方のコツ：スカーレットは挨拶や重要日付に使い、ライトグレーには背景の形を任せる。

media.ioを使用して生成されたウィンター・スカーレットの画像例

17）アーバンワイン

HEX： #f4f3f1 #cfcac6 #7d7876 #7c2231 #2d2a2b

雰囲気： 居心地よい、洗練、グルメ感

おすすめ用途： レストランメニューとカフェのブランディング

アーバンニュートラルにワインレッドは、薄暗いビストロやチョークボードメニュー、テーブルの温かいグラスを連想させます。グレーがレイアウトを整理し、ワインレッドが食欲とクラフト感を加えます。クリーム紙やテクスチャペーパー、クラシックなタイポグラフィと組み合わせて洗練されたメニューシステムに。使い方のコツ：レッドはセクション見出しや小さなアイコンに使い、材料リストには使わない。

media.ioを使用して生成されたアーバンワインの画像例

18）ソフトエンバー

HEX： #f7f3f1 #d7d1cf #9b9493 #c84a3b #3a3332

雰囲気： 優しい、アーシー、安心感

おすすめ用途： ボタニカルイラストやウェルネスコンテンツ

ソフトエンバーレッドと穏やかなグレーは、乾いた花びらや粘土、朝のティースチームのような印象。ウェルネス投稿や日記ページ、ボタニカルビジュアルにぴったりの温かさです。手描きの線と微妙な紙テクスチャと組み合わせてオーガニックな雰囲気に。使い方のコツ：エンバーは水彩のウォッシュ、ディテールは暖かいグレーで描き、純粋な黒は避ける。

media.ioを使用して生成されたソフトエンバーの画像例

19）モダンカルミン

HEX： #f2f2f2 #c5c7cc #7a7f88 #b0182a #20242a

雰囲気： 自信、モダン、高インパクト

おすすめ用途： 製品広告とランディングページセクション

モダングレーとカルミンレッドは、パワフルなフォーカルポイントのクリーンなスタジオ広告の印象。ニュートラルカラーが製品写真や仕様を支え、レッドがプロモーションや限定販売に緊急感を与えます。シャープな影、シンプルな形、明確な階層でコンバージョン重視のレイアウトに。使い方のコツ：カルミンは価格タグや主要ボタンに使い、サポートUIはミッドグレーにする。

media.ioを使用して生成されたモダンカルミンの画像例

20）クアリー・レッドバッド

HEX： #fbfaf9 #dad7d5 #85807d #b6404a #2f2c2b

雰囲気： ナチュラル、バランス、控えめ

おすすめ用途： ポートフォリオサイトやケーススタディページ

採石場のようなグレーにレッドバッドの暖かさは、穏やかで地に足がついたクリエイティブ感。ニュートラルなフレームに控えめアクセントで作品サンプルを引き立てたいポートフォリオやケーススタディにぴったりです。温かいホワイト、広めのスペース、控えめ写真処理と組み合わせて一貫性を出します。使い方のコツ：レッドバッドはリンクやセクションマーカーなど小さなUI要素に繰り返し使い、作品への注目を維持。

media.ioを使用して生成されたクアリー・レッドバッドの画像例

グレー×レッドに合う色は？

ニュートラルカラーは最も簡単な追加要素です。ホワイト、オフホワイト、ほぼ黒はグレーの範囲を広げ、タイポグラフィ用のクリーンスペースになります。クリーミーなホワイトはブリック、ワイン、ガーネットレッドを暖かく見せ、明るいホワイトならスカーレットやルビーを現代的に見せます。

より柔らかいライフスタイル感なら、グレーとレッドに温かいベージュや淡いトープ、ブラッシュピンクを組み合わせましょう。よりシャープでテックっぽい印象なら、クールブルー（スレート、スチール、アイシーブルー）は自然にグレーと馴染み、レッドをすっきり保ちます。

高級感を出したい場合は、ゴールド（箔、アイコン、小さなディテール）を濃いレッド（カベルネやメルロー）に少し加えると効果的です。ミニマルにして洗練した印象を損なわないようにしましょう。

リアルなデザインにグレー×レッドパレットを使う方法

グレーは「基礎」として使います。背景、カード、仕切り、長文テキストなど。そしてレッドはCTA、ハイライト、エラー、価格タグ、印刷レイアウトのフォーカルエレメントなど「注目させたい」場所で使いましょう。

配分を調整しましょう。実用的なルールはニュートラル80～90%、レッドアクセント10～20%（特にUIやプレゼンで）。これにより読みやすくなり、レッドの攻撃的な印象を防げます。

目的に合ったレッドを選びましょう：明るいレッド（スカーレットやポピー）は緊急感やエネルギー向け。深いレッド（ガーネットやメルロー）はラグジュアリー感やムード向け。控えめなレッド（ローズやブラッシュ）は穏やかなエディトリアルやライフスタイル向け。

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

コンセプトを提案する場合、パレットをコンテキストで見せることはHEXコードと同じくらい重要です。ポスター、パッケージング、UI、招待状などの素早いモックアップを生成すると、ステークホルダーが方向性を素早く「体感」できます。

Media.ioならシンプルなプロンプトをブランドらしいビジュアルにすぐ変換可能。ライティング、素材、タイポグラフィの雰囲気やレッドの強度を調整しつつ、グレーの構造は一貫したまま反復できます。

上記プロンプトから始めて、プロジェクトに合わせてシーンを変更し、選んだHEXセットを手元に置いておけば出力がページやアセットで統一されます。

次へ： ゴールドカラーパレット