オレンジとグレーのモダンな配色20選｜ヘックスコード付き

オレンジとグレーのカラーパレットは現代的な定番です。オレンジはエネルギーと個性をもたらし、グレーはコントロール、明快さ、そして高級感のあるニュートラルな基盤を加えます。

以下にHEXコード付きの20種類のオレンジグレーパレットと、ブランド、UI、パッケージ、インテリアでの活用方法を紹介します。

なぜオレンジグレーパレットはこんなに優れているのか

オレンジとグレーの組み合わせは温度と感情を自然にバランスさせます。オレンジは温かみや活動的、人間味を感じさせ、グレーはクールで安定し、プロフェッショナルな印象を与えます。

このコントラストによってデザインに即座に階層が生まれます。グレーはタイポグラフィ、グリッド、面を支え、オレンジはCTAやハイライト、重要な情報のアクセントとして活躍します。

また、業界を問わず柔軟な組み合わせです。フィンテックからファッションまで、彩度を調整すれば雰囲気を変えられます。明るいオレンジはエネルギッシュ、焦げたオレンジは高級感、やわらかいアプリコットは穏やかさを感じさせます。

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

1) エンバーコンクリート

HEX: #ff7a18 #ffb26b #f2efe9 #8a8f98 #2f3238

雰囲気: 大胆、落ち着き、現代的

適した用途: ブランドアイデンティティシステム、ウェブサイトのヒーローバナー

エンバーの温かさとコンクリートのニュートラルで、濡れた舗道に輝く街の灯りのような印象。ヘッドラインには深いチャコール、UI構造には中間的グレー、レイアウトを呼吸しやすくするにはやわらかいオフホワイト。鮮やかなオレンジはボタンやバッジ、重要なデータのアクセントに最適です。ポイント：オレンジの使用率を15％未満に保つと、プレミアムで現代的な印象を維持できます。

media.ioで生成されたエンバーコンクリートの画像例

Media.io

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

無料で今すぐ試す

2) サンライズスレート

HEX: #ff6f3c #ffd1a6 #e6e9ef #6b7280 #111827

雰囲気:新鮮、楽観的、クリア

適した用途:ダッシュボードUI、分析ビジュアル

夜明けのトーンとスレートの影で、明るく早朝の清潔感が際立ちます。オレンジグレーカラーパレットとして、淡いピーチをパネルに、濃いネイビー・チャコールでナビゲーションを引き締めましょう。鮮やかなオレンジは主なCTAやチャートのハイライトに使うと効果的。ポイント：細いアイコンや余裕のあるスペースを合わせて、インターフェースをエアリーに保ちましょう。

media.ioで生成されたサンライズスレートの画像例

3) シトラススチール

HEX: #ff8a00 #ffc857 #d9dde3 #5c6670 #1f2933

雰囲気:エネルギッシュ、工業的、シャープ

適した用途:テック製品ランディングページ、特集セクション

シトラスの鮮やかさとスチールグレーの組み合わせは、金属の安全マークのような印象。ゴールドはセカンダリーのハイライトに、一番明るいオレンジは画面ごとに主なアクションに。淡いクールグレーはカードの背景に最適で、ダークスレートはヘッドラインを視認しやすくします。ポイント：中間グレーで1pxの仕切りを加え、エンジニアらしい精密感を維持しましょう。

media.ioで生成されたシトラススチールの画像例

4) テラコッタフォグ

HEX: #d9633a #f3b39b #faf7f2 #9aa0a6 #3c4043

雰囲気:やわらかい、居心地よい、エレガント

適した用途:ウェディング招待状、イベント文具

淡いフォグに漂うテラコッタは、ロマンティックで手触り感もあり、まるで粘土やリネン。クリーミーホワイトを紙のベースに、深いグレーで本文テキスト。落ち着いたオレンジはモノグラムやボーダー、小さな花モチーフに美しく映えます。ポイント：背景に少し質感を加え、タイポグラフィは上品かつミニマルに。

media.ioで生成されたテラコッタフォグの画像例

5) アプリコットグラファイト

HEX: #ff9f66 #ffd8c2 #f7f7f5 #7a7f87 #2b2f36

雰囲気:暖かい、ミニマル、洗練された

適した用途:モダンインテリア、ホームデコムードボード

アプリコットとグラファイトの組み合わせは、日差しの差す部屋にマットな石のディテールをあしらったよう。やわらかいピーチはテキスタイルやアート、小物にアクセント。グラファイトは広い面や家具の輪郭を引き締めます。ほぼ白のトーンはシーンを清潔かつ現代的に保ちます。ポイント：中間グレーを2～3箇所で繰り返し、視覚のリズムを作りましょう。

media.ioで生成されたアプリコットグラファイトの画像例

6) パンプキンアッシュ

HEX: #ff6a00 #ffad66 #ececec #9b9b9b #3a3a3a

雰囲気:自信、パンチ、ストリート感

適した用途:SNSストーリー広告、プロモグラフィック

パンプキンの鮮やかさとアッシュグレーの組み合わせは、ネオンの下の街ポスターのような印象。オレンジグレーの色合わせは、一番濃いグレーでタイポグラフィを支え、明るいオレンジは値札や期間限定ラベルに。淡いグレーはデザインに余白を作ってスマホでも読みやすく。ポイント：コントラストを高めて太字のタイプを使い、小さなサイズでもインパクトを維持。

media.ioで生成されたパンプキンアッシュの画像例

7) カッパーペブル

HEX: #c65a2e #e8a37a #f1f0ee #a3a6ab #44474d

雰囲気:アーティザン、アーシー、洗練

適した用途:コーヒーパッケージ、クラフト製品ラベル

カッパーとペブルグレーの組み合わせは、焙煎豆や陶器、手押しの紙を思わせます。クリーム色のニュートラルはラベルのベース、濃いグレーで成分や法的表記。カッパーはロゴマークや印章に最適で、穏やかな質感と合わせると特に際立ちます。ポイント：細いカッパーラインでレイアウトを囲み、製品名が目立つようにしましょう。

media.ioで生成されたカッパーペブルの画像例

8) タンジェリンストーム

HEX: #ff5f1f #ffb199 #dfe3ea #748092 #212a33

雰囲気:ダイナミック、エッジー、テック志向

適した用途:ゲームバナー、配信オーバーレイ

タンジェリンが嵐のグレーを切り取る構図は素早く、大きく、映画的。ダークブルーグレーはメイン背景に使うとオレンジのハイライトがまばゆく映えます。淡いトーンはチャットや統計のパネルをやわらかくまとめ、全体の統一感を保ちます。ポイント：微妙な斜め形状を加え、動きの感覚を強調しましょう。

media.ioで生成されたタンジェリンストームの画像例

9) 柿スモーク

HEX: #e85d2a #ffb38a #f5f1ea #8b8f95 #2a2d31

雰囲気:穏やか、ブティック、招きやすさ

適した用途:スキンケアブランド、ブティックEC

スモーキーなニュートラルと柿の温かさは、控えめな照明のスパラウンジのような印象。背景や商品グリッドはクリーミートーン、タイポグラフィはほぼ黒で視認性高く。柿のアクセントはカート追加ボタンや評価、小さなアイコンに輝きます。ポイント：グラデーションを控え、明快な色ブロックでハイエンド感を演出。

media.io を使用して生成した柿の煙イメージ例

10) マリーゴールド・チャコール

HEX: #ff9a1f #ffd36a #f4f3ef #6a6f77 #1c1f24

雰囲気: 明るい、編集風、自信に満ちた

適した用途: プレゼンテーション資料やキーノートテンプレート

マリーゴールドのアクセントがチャコールに映えると、暗いステージに当たるスポットライトのような瞬間が感じられます。タイトルスライドや区切りにはチャコールを使い、マリーゴールドはコールアウトやアイコン、チャートに使います。薄いニュートラルカラーは、内容の多いスライドも落ち着いて読みやすくします。コツ：一貫したマリーゴールドのアクセントスタイル（下線や小さなブロックなど）を全ページで統一させましょう。

media.io を使用して生成したマリーゴールド・チャコールの画像例

11) バーントシエナ・ドリフト

HEX: #b84e2a #e58f6a #f6efe8 #9097a1 #333842

雰囲気: ヘリテージ、アウトドア風、頑丈

適した用途: アウトドアギアのラベルとタグ

バーントシエナと流れるような涼しいグレーは、渓谷の道や使い込まれたキャンバスを思わせます。濃いグレーは文字やバーコード用、シエナはブランドの刻印や織りラベルの色に最適です。温かみのある中間色はクラフト紙やマットな仕上げとよく合います。コツ：無骨で実用的な雰囲気には太めの凝縮書体を選びましょう。

media.io を使って生成したバーントシエナ・ドリフトの画像例

12) アンバー・アロイ

HEX: #ff7f11 #ffbf69 #f8f5f0 #7b8794 #2d3439

雰囲気: 洗練、プレミアム、バランス

適した用途: フィンテックアプリとオンボーディング画面

滑らかなアンバーと合金のようなグレーは、信頼感と暖かさを感じさせます。このオレンジグレーの配色では、濃いグレーがナビゲーションを支え、アンバーは進行状況や主要なアクションに活かすと特に効果的です。ライトニュートラルを背景に使うことで目が疲れにくくなります。コツ：シャドウは控えめにし、余白やコントラストを使って階層感を出しましょう。

media.io を使って生成したアンバー・アロイの画像例

13) オレンジピール・ミニマル

HEX: #ff8c2b #ffe0c2 #ffffff #b0b4bb #22262b

雰囲気: クリーン、フレンドリー、モダン

適した用途: SaaS UIキットとコンポーネントライブラリ

クリーンなホワイト上の鮮やかなオレンジピールのアクセントは新鮮でシンプル、使いやすさ抜群です。テキストにはほぼ黒、ボーダーにはライトグレー、ほのかな状態（ホバーや選択タブ）にはピーチトーンを使います。オレンジは主なボタンやトグルなど、ひとつの要素に絞ると効果的です。コツ：小さなラベルのコントラストもテストしてアクセシビリティを確保しましょう。

media.io を使って生成したオレンジピール・ミニマルの画像例

14) ラスト＆レインクラウド

HEX: #cc5a2e #f0a67a #e8eef3 #6e7b88 #253040

雰囲気: ムーディー、建築的、洗練

適した用途: 建築ポートフォリオとケーススタディページ

ラストの温もりと雨雲のようなブルー・グレーは建築的で静かなドラマを演出します。淡いブルーグレーはページ背景、本文はディープスレートでくっきりと。ラストはセクション番号やリンク、プロジェクトタグの強いアクセントに。コツ：大きな写真や細いグリッドラインと組み合わせることで構造感が強調されます。

media.io を使って生成したラスト＆レインクラウドの画像例

15) コーラルシンダー

HEX: #ff6b5a #ffb3aa #f2f2f2 #8d939a #2b2b2f

雰囲気: 遊び心、トレンディ、親しみやすい

適した用途: ビューティー商品広告とSNS投稿

コーラルのエネルギーとシンダーグレーは遊び心がありつつ洗練されています。大きなカラーフィールドには柔らかいコーラルを、見出しには濃いグレーを使って甘くなりすぎないように。淡いニュートラルが商品写真を引き立てます。コツ：シンプルなラウンド形状を足して、コーラルトーンのフレンドリーさを強調しましょう。

media.io を使って生成したコーラルシンダーの画像例

16) サフラン・アーバナイト

HEX: #f28c00 #ffd08a #f7f6f3 #7c828a #30343a

雰囲気: 都会的、暖かい、自信

適した用途: レストランメニューとカフェブランディング

サフランの温かみと都会的なグレーは、にぎやかな通りにひっそり佇むカフェを思わせます。少し黄味寄りの白をメニューのベースに、各セクションは濃いグレーで分けると見やすくなります。サフランはカテゴリー見出しや小さなアイコン、強調線に最適です。コツ：写真も温かみのあるトーンで統一し、サフランと合わない寒色系写真は避けましょう。

media.io を使って生成したサフラン・アーバナイトの画像例

17) パパイヤ・ストーン

HEX: #ff7a3d #ffc4a3 #f1ede6 #9aa3ad #39414a

雰囲気: 明るい、ナチュラル、リラックス

適した用途: ホーム用品のパッケージとライフスタイルラベル

パパイヤの鮮やかさとストーンニュートラルは、リネンエプロンや日差し降り注ぐキッチンのようなリラックス感を演出します。ここではパパイヤを小さなバッジやパターンに使い、商品名は濃いスレートカラーに。温かみのあるベージュがオーガニックでテック過ぎない雰囲気にまとめます。コツ：マット素材や最小限のインクで落ち着いたサステナブルな印象を。

media.io を使って生成したパパイヤストーン画像例

18) ファイアライト・セメント

HEX: #ff5a1f #ffb07c #f5f5f5 #7f8790 #20252b

雰囲気: ハイコントラスト、モダン、ドラマチック

適した用途: イベントポスターと音楽ナイトのプロモーション

ファイアライト・オレンジとセメントグレーは、スポットライトが煙を切るようなドラマ性を感じさせます。ほぼ黒は太字の文字、ミッドグレーは補足情報、淡いグレーは余白のために。オレンジはアーティスト名や日付、強いグラフィック要素に使いましょう。コツ：厳密なグリッドを使い、読みやすく力強くまとめましょう。

media.io を使って生成したファイアライト・セメント画像例

19) オータム・シグナル

HEX: #e76f00 #ffbe73 #f9f3e8 #80868f #151a20

雰囲気: 季節感、自信、クラシック

適した用途: ニュースレターヘッダーとブログ画像

オータムシグナルの色は爽やかな空気と暖かいニット、クリーンな書体を感じさせます。見出しや長文にはダークなほぼ黒、背景は明るいクリーム色でページ全体を支えます。鮮やかなオレンジはリンクや箇条書き、セクションタグのちょっとしたアクセントに最適です。コツ：写真は落ち着いた色調で、飽和しすぎた画像は避けてパレットの調和を保ちましょう。

media.io を使って生成したオータム・シグナル画像例

20) ネオン・セーフティ・グレー

HEX: #ff4d00 #ff9b5e #f0f2f5 #9ea4ad #2a2f36

雰囲気: スポーティー、目立つ、現代的

適した用途: スポーツウェアのブランディングとラベルシステム

ネオンオレンジとクリーングレーは、スポーツやトレーニングセット、明るいスタジアムライトの下のようなエネルギーを演出します。ロゴや文字は一番濃いグレーで、ネオンはサイズ表記やジッパープル、タグの角のような目立たせたい場所だけに使用します。クールなライトグレーでシステム全体が現代的にまとまります。コツ：ネオンがきちんと意図されたものになるよう、たっぷり余白を使いましょう。

media.io を使って生成したネオン・セーフティ・グレー画像例

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

オレンジとグレーは、クリーンで現代的なベース作りにピッタリなパリッとしたホワイトや柔らかなオフホワイトと合わせやすい色です。タイポグラフィやアクセシビリティで強いコントラストが必要なときはブラックやディープチャコールを組み合わせましょう。

よりナチュラルに見せたい場合は、ベージュやサンド、クラフトのような暖色系ニュートラルカラーを取り入れます。これでオレンジが“テック”すぎず、オーガニックな印象に。クールな雰囲気にしたい場合はブルーグレーの背景やスモーキーなネイビーアクセントが、落ち着いた構成感を保ちます。

もう一段階ポップさを出したいなら、少量のティール、ミント、アイスブルーなどをサブアクセントに使うとオレンジと喧嘩せず映えます。ただし必ず主役はオレンジにしましょう。

オレンジグレーカラーパレットをリアルなデザインで使う方法

グレーをシステムのメインカラーとして使ってください（背景、ナビゲーション、サーフェス、タイポグラフィに）。オレンジはアクション（主要ボタン）、強調（タグ）、キー指標（チャート）など、注目させたいポイントにだけ使います。

コンポーネント全体でひとつのオレンジの彩度に統一すれば、視覚的なノイズを防ぎます。どうしても複数のオレンジが必要な場合は、一番明るいものを最重要アクションに限り、淡いトーンはホバーや選択、背景ステート用にしましょう。

印刷物やパッケージでは、マットなグレーやオフホワイトでオレンジがより上質に見えます。用紙の質感やソフトなシャドウなどテクスチャを考慮し、成分表記や法的コピーには高いコントラストを維持してください。

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

HEXコートが手元にあれば、ポスターやUI画面、パッケージ、インテリアのリアルなモックアップもAI画像生成で素早く統一感のあるビジュアルが作れます。

Media.io なら「ダッシュボードカード」「コーヒーバッグのラベル」「イベントポスター」など、欲しいレイアウトを言葉で指示でき、オレンジ×グレーのバランスを企画からエクスポートまで一貫させられます。

次へ： ハンターグリーンカラーパレット