グレーマルーン配色アイデア20選｜カラーコード付き

グレーとマルーンは現代的なクラシックです。クールなニュートラルカラーがレイアウトを清潔に保ち、ワインレッドの深みが感情、集中、ブランドの個性を加えます。

下記には、使いやすいHEXコード付きのグレーマルーンカラーパレットアイデアと、Media.ioで対応するビジュアルを生成できる実際のデザインプロンプトを紹介しています。

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

グレーは構造、バランス、読みやすさをもたらし、背景やタイポグラフィ、UI表面の信頼できるベースとなります。マルーンは鮮やかな赤ほど刺激的ではなく、コントラストと洗練を加えます。

これらを組み合わせることで「高級感がありつつ親しみやすい」印象を作り、ブランド・印刷・デジタル全てで活用できます。チャコール＋ワインでドラマチックに、ミスティグレー＋控えめバーガンディで軽やかに仕上げられます。

この組み合わせはスケールが簡単です。落ち着いた印象にはグレーを主役に、注目させたい箇所にはマルーンを見出しやボタン、ラベル、ヒーローアクセントなどに使いましょう。

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

1）スレートヴィンヤード

HEX： #2f343a #6b7076 #7a1e2b #b07a7d #f2efe9

雰囲気： 憂い、洗練された、エディトリアル

おすすめ： ファッションルックブック、高級ブランド、エディトリアルレイアウト

スレートと深いワイン色は、ぶどう畑の黄昏と使い込まれたレザー椅子のよう。マルーンはヘッドラインやヒーローアクセントに使い、グレーが構造を支えます。オフホワイトを組み合わせてデザインを呼吸させ、高級感を演出。ポイント：ブラッシュトーンは引用やバッジなど小さなアクセントに。

media.ioで生成したスレートヴィンヤードの画像例

Media.io

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

今すぐ無料で試す

2）フォギーメルロー

HEX： #d7d9dc #8a8f95 #5a1a24 #a45462 #f9f7f4

雰囲気：柔らかい、ロマンティック、穏やか

おすすめ：ウェディングアイテム、美容パッケージ、ライフスタイルブログ

フォググレーとメルロー、ローズの組み合わせは静かな朝とブランチの赤ワインのよう。淡いニュートラルは背景に、濃いワインは文字や細いラインに。暖かい紙の質感や微細なグレインを合わせるとより触感的に。ポイント：控えめなローズをアイコンや区切り線の統一カラーとして使いましょう。

media.ioで生成したフォギーメルローの画像例

3）ヘリテージライブラリー

HEX： #3c3f43 #9ea1a6 #8b2333 #c9b6a6 #f7f1e6

雰囲気：クラシック、学術的、温かみ

おすすめ：書籍カバー、博物館、ブティックカフェ

クラシックで読書的なこのトーンは、マホガニーの棚や古い紙、静かな読書室を連想させます。コントラスト重視のタイポグラフィ中心デザインで輝きます。羊皮紙のようなクリーム色はテクスチャ背景と組み合わせ、マルーンはタイトルや印章、紋章要素に。ポイント：タンはクールグレーとリッチワインをつなぐソフトブリッジとして使いましょう。

media.ioで生成したヘリテージライブラリーの画像例

4）コンクリートローズウッド

HEX： #44474c #7d8288 #6a1d2a #d3a7a0 #e9e5df

雰囲気：都会的、安定感、モダン

おすすめ：建築ポートフォリオ、インテリアムードボード、製品ランディングページ

安定したグレーとローズウッドマルーンは、木目で温められたコンクリート壁のよう。深い赤茶は主要CTAやセクションヘッダーに、ミドルグレーはレイアウトをクリーンかつ建築的に保ちます。マットブラックアイコンと組み合わせるとシャープなモダン感が出ます。ポイント：ブラッシュトーンは1～2コンポーネントだけに抑え、意図的かつ甘すぎない印象に。

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

5）ウィンターワイン

HEX： #1f2327 #5e646b #741b2d #c68a8d #f4f3f0

雰囲気：ドラマチック、居心地良い、高級感

おすすめ：ホリデーキャンペーン、キャンドルラベル、高級イベント

ダークチャコールとウィンターワインは、ベルベットのカーテンと柔らかなキャンドルの光のある寒い夜を連想させます。ほぼブラックの色は背景やヒーローセクションに、マルーンは注目部分に重ねましょう。暖かなオフホワイトで文字を読みやすくエレガントに。ポイント：ダスティピンクはリボンやタグ、イラストの二次アクセントとしてだけ使いましょう。

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

6）モダンビストロ

HEX： #3a3d40 #b8babd #7e2030 #e2c2b0 #c7a24b

雰囲気：親しみやすい、スタイリッシュ、活気

おすすめ：レストランメニュー、食品ブランド、SNSプロモーション

親しみとスタイリッシュさがあり、現代的ビストロの磨かれた金属、暖かい照明、大胆なワインリストのよう。マスタードアクセントがグレーマルーンの組み合わせにメリハリをつけ、特に価格やアイコン、注目箇所に最適。ブラッシュは食の写真と合わせるとコントラストを柔らかくレイアウトを親しみやすく。ポイント：マスタードは10%未満にして「署名的アクセント」にとどめ、主役にはしません。

media.ioで生成したモダンビストロの画像例

7）ダスティガーネット

HEX： #50545a #a5a8ad #861d3a #d19aa2 #f0ebe5

雰囲気：柔らかい、アーティスティック、バランス

おすすめ：ポートフォリオサイト、アートプリント、手作り製品

柔らかなグレーとダスティガーネット、ブラッシュの組み合わせは水彩のにじみや控えめな花柄のよう。ガーネットはボタンや見出しなど重要箇所に、淡いニュートラルが背景を支えます。自然の紙の質感や筆のパターンで手作り感を。ポイント：本文は濃いグレーで快適さと読みやすさを。

media.ioで生成したダスティガーネットの画像例

8）アッシュとプラム

HEX： #2b2d31 #6f737a #5d1a2f #8f5a7a #e6d9df

雰囲気：ミステリアス、ラグジュアリー、クリエイティブ

おすすめ：ミュージックポスター、ブティックブランド、ナイトライフプロモーション

ミステリアスなアッシュとプラム色は、舞台裏のライトやサテンファブリックの雰囲気。マルーンが強すぎる時はプラム色をサブアクセントに、特にグラデーションやオーバーレイにおすすめ。チャコール背景でタイポグラフィが際立ちつつ、コントラストがきつくなりません。ポイント：見出しをプラム～マルーンのグラデーションにして奥行きをプラス。

media.ioで生成したアッシュ＆プラムの画像例

9）チャコールクランベリー

HEX： #1d1f22 #4f545a #8a1f2e #d55b6a #f6f1ec

雰囲気：大胆、映画的、自信

おすすめ：アプリマーケティング、スポーツブランド、主張のあるウェブヘッダー

大胆なチャコールとクランベリーは、映画のタイトルカードや冷たい冬の空気を思わせます。クランベリーは深いニュートラルへのアクセントとして使うと一番効果的。クリーム色を多めに配してパレットの重さを感じなくさせましょう。ポイント：クランベリーはホバーステートやマイクロインタラクションで使い、高級感を演出します。

media.ioを使って生成されたチャコールクランベリーの画像例

10) ミスティバーガンディ

HEX： #c6c8cc #7a7f86 #6c1a2a #b06a75 #f8f4ef

雰囲気： エアリー、洗練された、現代的

おすすめ： ウェルネスブランド、ミニマリストプレゼンテーション、ブログテーマ

エアリーなグレーにバーガンディと控えめなローズを合わせると、石の上の霧や柔らかなカシミヤスカーフのような雰囲気になります。明るいグレーをメイン背景としてページを明るく保ち、バーガンディで構造や強調を加えます。クリーンなサンセリフタイポグラフィと十分なスペースで静かでモダンな印象に。ヒント：ローズはさりげないグラフやタグ、セカンダリーボタンに使いましょう。

media.ioを使って生成されたミスティバーガンディの画像例

11) ブティックベルベット

HEX： #383a3f #8d9096 #7b1c2f #e0c7c5 #f5f0ea

雰囲気： エレガント、ソフト、ラグジュアリー

おすすめ： ブティックロゴ、ジュエリーパッケージ、美容系UI

エレガントなベルベットトーンは、ブティックの試着室や柔らかな照明、洗練されたディテールを連想させます。グレーマルーンのカラーパレットは、ロゴマークにマルーンを、背景ウォッシュにブラッシュを使うことで特に高級感が増します。細いラインや小文字、ミニマルな装飾と合わせて現代的な雰囲気に。ヒント：マルーン部分に箔押しやスポットグロスを加えると、見た目が瞬時に格上げされます。

media.ioを使って生成されたブティックベルベットの画像例

12) インダストリアルカベルネ

HEX： #2a2c2f #61666d #7f2335 #c2b2b0 #f0e4d6

雰囲気： インダストリアル、真剣、信頼感

おすすめ： テック事例、B2Bサイト、データダッシュボード

カベルネのアクセントを効かせたインダストリアルグレーは、研磨された鉄や機械の自信に満ちた赤いアクセントを彷彿とさせます。一番濃いグレーをナビゲーションに、マルーンをアクティブステートに使い、ユーザーが迷いません。長文には温かみのあるクリーム背景で読みやすく、まぶしさを抑えます。ヒント：チャートは主に中立色で、マルーンは主要な系列のみに使い視覚的ノイズを避けましょう。

media.ioを使って生成されたインダストリアルカベルネの画像例

13) ストーンウォール・サングリア

HEX： #3e4045 #9a9ea4 #6f1f2d #b88b6a #f1ede6

雰囲気： アーシー、成熟、ウェルカム

おすすめ： ホームデコブランド、家具カタログ、職人製品

アーシーな石色グレーにサングリアとタンを添えることで、石灰岩の壁や素焼きの陶器、温かなキッチンテーブルを連想させます。タンをサポートブロックやキャプションに使い、全体のコントラストを和らげます。ナチュラルな写真と暖色系の照明で、ヒューマンな雰囲気をキープ。ヒント：サングリアは小さなラベルやカテゴリーチップに使うと控えめで上品な印象に。

media.ioを使って生成されたストーンウォールサングリアの画像例

14) ソフトハース

HEX： #5b5e63 #cfd1d4 #7a2231 #f0d6d0 #2f6b6a

雰囲気： 居心地が良い、モダン、招き入れる雰囲気

おすすめ： インテリアデザインムードボード、居心地の良いブランド、季節のプロモーション

暖かなマルーン、ソフトなブラッシュ、意外性のあるティールエンバーで、家庭的な暖炉の雰囲気を表現。グレーマルーンの色合わせは、アイコンやステッチ、小さなイラストにティールをアクセントとして僅かに使うのが効果的です。明るいグレーと多くの余白で静かなヒュッゲ風レイアウトに。ヒント：マルーンは最も大きなカラーブロックに使用し、ティールに注意が奪われないようにしましょう。

media.ioを使って生成されたソフトハースの画像例

15) ギャラリーナイト

HEX： #111214 #3f4247 #792033 #b089a0 #e8e0ea

雰囲気： ドラマティック、アーティスティック、上質

おすすめ： アートギャラリーポスター、イベントチケット、ラグジュアリーニュースレター

ドラマティックで芸術的なトーンは、夜のギャラリーオープニングとスポットライトのフレームを感じさせます。ネアブラックは大胆な背景に使い、マルーンでタイトルや重要なディテールを強調。淡いラベンダーグレーを合わせて現代的なアクセントを。ヒント：遠くからでも読みやすいようにクリームで大きなタイポグラフィを使ってみましょう。

media.ioを使って生成されたギャラリーナイトの画像例

16) リネン＆クラレット

HEX： #e8e5df #9b9da1 #6b1d2e #b07c66 #f7f5f2

雰囲気： 明るい、ナチュラル、洗練された

おすすめ： スキンケアブランド、ミニマルなパッケージ、落ち着いたWebサイト

淡いリネンニュートラルにクラレットや温かなクレイを添えると、日差しあふれるアトリエや自然素材を思わせる仕上がりに。クラレットはラベルやボタンに控えめに使い、重くならない洗練感を出します。さりげないシャドウや丸みのあるコーナーで優しさをプラス。ヒント：温かなクレイはセカンダリーセクション用にして、パレットをエアリーに保ちましょう。

media.ioを使って生成されたリネン＆クラレットの画像例

17) アーバンブリック＆スモーク

HEX： #303235 #777b82 #8a2432 #c66a4a #e5d7c9

雰囲気： グリッティ、温かみ、ストリート感

おすすめ： コーヒーロースター、ストリートウェア、クリエイティブスタジオ

グリッド感のあるスモークグレーに、レンガ色とワインを加えることで、都会の路地や暖かなネオン、手作り看板を思い起こさせます。グレーマルーン配色は、バッジやセカンダリーCTAsにレンガのアクセントを使うことで個性が増します。力強いコンデンスドフォントやシンプルなアイコンでストリート感のある仕上がりに。ヒント：クリームはダークグレーの重いブロックの間の落ち着いたバッファーとして使いましょう。

media.ioを使って生成されたアーバンブリック＆スモークの画像例

18) ミニマルマルサラUI

HEX： #f7f7f8 #b0b3b8 #751d2f #2f3237 #d9b9bf

雰囲気： クリーン、モダン、フォーカス

おすすめ： SaaS用UIキット、ダッシュボード、オンボーディングフロー

クリーンなニュートラルにマルサラとインクグレーを合わせた配色は、整理されたワークスペースやすっきりとしたインターフェースのような集中感を与えます。プライマリーボタンやステータスハイライトにはマルサラを使い、表面はほぼホワイトに保ちます。テキストやナビゲーションには濃いグレーを使ってアクセシビリティを確保。ヒント：ブラッシュティントを選択状態やカードに加えて、見やすさを損なわず柔らかさをプラス。

media.ioを使って生成されたミニマルマルサラUIの画像例

19) ラスティックセラー

HEX： #2e2f2c #6a6a65 #6e1b2b #a8744f #efe7dc

雰囲気： ラスティック、温かみ、伝統的

おすすめ： ワインラベル、ファーム・トゥ・テーブルブランド、クラフトパッケージング

ラスティックで温かみのある色合いは、セラードアやオーク樽、手書きラベルを思わせます。ボーダーやエンブレムに温かみのあるブラウンをアクセントとして使用。テクスチャードペーパーやビンテージ調イラストと組み合わせれば伝統感アップ。ヒント：ラベルのディテールをくっきり見せるため、余白には明るいクリームを使いましょう。

media.ioを使って生成されたラスティックセラーの画像例

20) ブライダルモーヴグレー

HEX： #f3eff2 #b9bcc1 #6c1c2a #c08b98 #4a4d52

雰囲気： ロマンティック、ソフト、タイムレス

おすすめ： ブライダルブランド、招待状、フォトアルバムカバー

ロマンティックなモーヴとソフトグレーは、シルクリボンや繊細な花柄のように時を超えた雰囲気。深いマルーンは名前やモノグラム、キーラインに、淡い色調で全体をエアリーに仕上げます。繊細な花のイラストやエンボス加工と合わせれば高級感もアップ。ヒント：小型文字などはダークグレーにし、マルーンは主役ポイントに限定すると良いでしょう。

media.ioを使って生成されたブライダルモーヴグレーの画像例

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

温かみのあるオフホワイトやクリームは、マルーンおよびグレーと最も相性が良く、上品な雰囲気を損なわずに明るさを加えます。また、テキストが多いレイアウトやUI画面での可読性も向上します。

アクセントカラーには、くすんだブラッシュやダスティピンク、温かいタンが柔らかく高級な印象を保ちます。さらに強調したい場合は、マスタードゴールドや深いティールのようなメリハリのある色をポイント使いしましょう。

配色の一貫性を保つには、「くすみ感」のあるアクセントを選び、マルーンが主役であり続けるようにします。明るく彩度の高い色と競り合わないように注意しましょう。

グレーマルーンカラーパレットを実際のデザインで使う方法

ニュートラルの比率から始めてください。グレーやオフホワイトで大部分（背景、カード、スペース）を担い、最も重要な要素（見出しやCTAボタン、価格強調、主要なUIステートなど）にマルーンを割り当てます。

複数のグレーを組み合わせて階層を作りましょう。テキストやナビにダークグレー、区切り線にミッドグレー、パネルにライトグレーを使うことで、構造が整い、マルーンは自信に満ちたアクセントとして活躍します。

印刷物やブランディングでは、マルーンはシールやモノグラム、高級パッケージなどに美しく映えます。一方グレーが全体を現代的かつクリーンに保ちます。紙の風合いや僅かなノイズ感を加えれば、くすみ色のリッチさが増します。

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

既にHEXコードがある場合は、メニューやUIキット、パッケージ、ポスター、ムードボードなどのモックアップを生成して、マルーンがアクセントか主役かを確認できます。

Media.ioでは、パレットを貼り付けるか説明し、デザインタイプ、タイポグラフィスタイル、レイアウト（ミニマル、エディトリアル、ヴィンテージなど）を指定します。必要な結果に応じて「フラットなグラフィックデザイン」か「リアルなスタジオショット」かを明確にプロンプトに記載してください。

数パターンできたら、1つの変数（背景の明るさ、マルーンの彩度、アクセントカラーの割合など）だけを調整して微修正し、ブランド全体で統一感を持たせましょう。

次へ： ターコイズグリーンのカラーパレット