ブルー・レッド・オレンジ配色20選＋HEXコード一覧

青、赤、オレンジのカラーパレットはエネルギッシュな組み合わせです。青は信頼感と構造を、赤とオレンジは緊急性、温かみ、動きをもたらします。自信に満ち、大胆で目立ちやすい印象を求めるブランドにとって、現代的な選択肢です。

以下には、すぐに使えるHEXコード付きの青・赤・オレンジの20のカラーパレット例と、デザインのコツ、各パレットをレイアウトで素早く可視化するためのAIプロンプトを紹介します。

青・赤・オレンジのパレットが優れている理由

青・赤・オレンジのパレットがうまく機能するのは、クールな安定感と温かい強さのバランスがとれるからです。青はナビゲーション、背景、タイポグラフィなどで信頼できるベースを作り、赤とオレンジは自然に注目を集めたいアクションに使えます。

デザイン実務の観点からは、階層を素早く明確に構築しやすくなります：構造や可読性には青、緊急時（エラーや「期間限定」）には赤、友好的な強調（ハイライトやバッジ、主要リンク）にはオレンジです。

彩度をうまく管理すればデジタルにも印刷にも再現性が高いのも利点です。ニュートラル（白・クリーム・明るいグレー）を取り入れると、暖色がレイアウトを圧倒せず効果的になります。

20以上の青・赤・オレンジ配色アイデア（HEXコード付き）

1）ハーバーエンバー

HEX： #0B3D91 #1E6FD9 #D62828 #F77F00 #F3E9D2

雰囲気： 力強い、航海的、活気ある

最適な用途： スポーツブランドやヒーローバナー

力強く航海的なエネルギーは、夕焼けの光芒に包まれた深い海のようです。この配色ではネイビーとアズールをレイアウトの基調に、赤とオレンジを強いアクションへのアクセントに使うのが最適。背景には砂色やオフホワイトを合わせると、文字が読みやすく目の疲れも防げます。使い方のコツ：オレンジはセクションごとに1つのメインボタンやハイライトのみに絞ると、階層がはっきりします。

media.ioで生成したハーバーエンバーの画像例

Media.io

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

今すぐ無料で試す

2）ネオントランジット

HEX： #102A43 #2F80ED #EB5757 #F2994A #F2F2F2

雰囲気： アーバン、パンチの効いた、モダン

最適な用途： アプリのオンボーディングUI画面

都会的かつパンチがあり、夜行列車の窓から流れるシティライトのような印象。濃いスレートブルーがナビゲーションをしっかり支え、明るい青は導線や進捗の視線誘導に。赤は警告、温かいオレンジはバッジやヒントなどの強調に活用し、余白をたっぷりでクリーンに。使い方のコツ：強い赤はエラーや破壊的アクションのみに限定し、落ち着いたUIを保ちましょう。

media.ioで生成したネオントランジットの画像例

3）オータムレガッタ

HEX： #0A2342 #3A7CA5 #C81D25 #FF7A00 #FFF3E0

雰囲気： 冒険的、秋らしい、自信に満ちた

最適な用途： イベントポスター・レースプロモ

冒険心と秋の雰囲気が、冷たい空気を切る帆と地平線の温かな輝きを想起させます。タイトルには濃い青、補助ブロックにはやや柔らかい青、強調には赤とオレンジを活用。クリーミーなオフホワイトでポスターに呼吸感と可読性を。コツ：幅広い青のヘッダーバーの上に、オレンジの強調は日付や重要なアクションだけに。

media.ioで生成したオータムレガッタの画像例

4）スタジオポップ

HEX： #0F2D52 #2D9CDB #FF3B30 #FF9500 #FAFAFA

雰囲気： ポップ、ハイコントラスト、明るい

最適な用途： SNS用タイル・プロモーション画像

ポップでコントラストの効いたカラーが、クリーンなスタジオの壁に貼られたステッカーデザインのよう。短いプロモで瞬時に目を引かせクリアな焦点を作りたいときにおすすめ。青で背景形状を固定し、主な訴求に赤、アイコンや価格などの補助強調にオレンジが最適。コツ：文字は濃紺〜黒系で、赤・オレンジを小さい文字の背後に重ねないこと。

media.ioで生成したスタジオポップの画像例

5）デザートシグナル

HEX： #133B5C #1C77C3 #C1121F #FB8500 #FFE8D6

雰囲気： 日差しを浴びた、ワイルド、活力ある

最適な用途： 旅行ブログやサムネイルカバー

日差しとワイルドな印象は、広大な道、青空、そして地平線の熱気を連想させます。タイトルバーは深い青、リンクやバッジには明るい青で構造を明確に。赤とオレンジはカテゴリや場所、特集記事のアクセント向き。コツ：オレンジは「続きを読む」など繰り返し出てくる要素のみに使い、サイト全体の一貫性と識別性を高めましょう。

media.ioで生成したデザートシグナルの画像例

6）レトロアーケード

HEX： #0B132B #3F88C5 #E84855 #F9A03F #F7F7FF

雰囲気： ノスタルジック、エレクトリック、楽しい

最適な用途： ゲーム配信用オーバーレイUI

ノスタルジックでエレクトリック、暗めの部屋の中で光るゲーム筐体のような雰囲気。ミッドナイトブルーで上質なオーバーレイを、明るいブルーでタブ・ラベル・進捗バーを。この赤はライブ中の表示、オレンジは報酬や強調に、ライトニュートラルでコントラスト確保を。使い方のコツ：インタラクティブ要素以外は彩度を落として、ゲーム画面の邪魔にならないように。

media.ioで生成したレトロアーケードの画像例

7）サンライズワークショップ

HEX： #14213D #1D4ED8 #DC2626 #F97316 #FFEDD5

雰囲気： やる気を引き出す、温かみ、整理された

最適な用途： ワークショップのチラシ・申込1ページ

やる気と清潔感が両立し、日の出の光が整理されたデスクに差し込むイメージ。見出しや本文にネイビー、セクション区切りやリンクに明るい青で視線を誘導。赤は締切に、オレンジで主な申込アクションを強調してもきつい印象になりません。コツ：オレンジは1つのメインバッジ（例えば「席数限定」など）にだけ使い、コンバージョンを高めつつ見た目はクリーンに。

media.ioで生成したサンライズワークショップの画像例

8）セラミックマーケット

HEX： #0E3A5D #4EA8DE #B80C09 #F45D01 #F6F1E9

雰囲気： ハンドメイド、親しみやすい、職人風

最適な用途： 商品パッケージ・ラベル

ハンドメイドで親しみやすく、鮮やかな絵付けの陶器を思わせます。柔らかなニュートラルでラベルベースにし、ブランド名は濃い青で信頼感と職人のこだわりを表現。オレンジはフレーバーやバリアントの印に、赤は数量限定など大きなアクセント向け。コツ：赤は印や小アイコン等ピンポイントで使い、パッケージが上品な印象を保つように。

media.ioで生成したセラミックマーケットの画像例

9）アークティックフレームUI

HEX： #0A2A66 #2E7CF6 #E11D48 #FF6B00 #F8FAFC

雰囲気： クリア、スピーディ、テック感

最適な用途： フィンテックダッシュボード・分析UI

氷のようなクリアさと、鮮やかな動きが同居。青で信頼・構造のベースを作り、暖色アクセントで重要指標へ視線誘導する配色。赤はリスクやマイナス変動、オレンジはニュートラルなアラートやアクティブフィルターに使い過剰警告を回避。コツ：グラフは主に青系、赤とオレンジは外れ値や閾値など強調したい部分のみに。

media.ioを使って生成されたアークティックフレームUIの画像例

10) マウンテンリレー

HEX： #0B2545 #247BA0 #D00000 #F48C06 #EAE2B7

雰囲気： アウトドア風、決意、力強い

最適な用途： アウトドアブランドのロゴやワッペン

アウトドアの決意がブルーの稜線にあるトレイルマーカーのように現れます。最も暗いブルーをメインの印に使い、生地や看板でもしっかりとした印象にし、ティールブルーはセカンダリとして塗りつぶします。レッドやオレンジは、小さなアクセントとして旗やルート点などエネルギーの表現に最適です。使用のコツ：まず単色でロゴをテストし、シルエットが見分けられる場合のみ温かみのある色味を加えましょう。

media.ioで生成されたマウンテンリレーの画像例

11) シトラスブループリント

HEX： #112A46 #1B74E4 #E63946 #FF9F1C #F1FAEE

雰囲気： 賢い、活気ある、構造的

最適な用途： インフォグラフィックスとプレゼン資料

明快な構造にシトラスのアクセントが加わったブループリントのような活気。ヘッダーや軸にはネイビーを、より明るいブルーはほとんどのデータ系列用に使います。レッドとオレンジは特に注目点や注釈、重要ポイントに最適。使うコツ：暖色は1～2カテゴリだけに割り当てて比較が分かりやすいようにしましょう。

media.ioで生成されたシトラスブループリントの画像例

12) シーサイドカーニバル

HEX： #083D77 #2A9DF4 #DA1E37 #FF8800 #FFF7E6

雰囲気： 祝祭的、風を感じる、親しみやすい

最適な用途： フェスティバルの招待状とデジタルフライヤー

祝祭感と爽やかさ、夕暮れ時のあたたかい照明が灯る海辺のバンティングのよう。ブルーはレイアウトをクリーンかつ読みやすく保ち、レッドとオレンジが日程やチケット、アイコンにお祭り感を加えます。クリーミーな中立色でコントラストを柔らかくし、全体を歓迎する印象に。コツ：オレンジをチケットのストライプ等として繰り返し使い、招待状全体に統一感を。

media.ioで生成されたシーサイドカーニバルの画像例

13) ミッドナイトアペリティフ

HEX： #081F3A #1F6FEB #B11226 #FF6A00 #F4F1DE

雰囲気： ムーディ、スタイリッシュ、高級感

最適な用途： カクテルバーメニューとナイトライフポスター

ムーディでスタイリッシュ、屋内のダークなバーで灯るネオンサインを想起させます。このブルー・レッド・オレンジの配色はネイビーバックの高級メニューや、特別メニュー部分として明るいブルーが使われます。レッドは辛口の注意書きや警告に少量、オレンジは特集カクテル・価格強調に。コツ：選んだ用紙でオレンジの刷り色をチェック、暗所だと暖色インクが変わる場合があります。

media.ioで生成されたミッドナイトアペリティフの画像例

14) クラフトスタジオウォール

HEX： #0C2D48 #3282B8 #F44336 #FF7F11 #F5F5F5

雰囲気： クリエイティブ、手作り感、エネルギッシュ

最適な用途： エディトリアル誌面やメイカーニュースレター

クリエイティブで手を動かすエネルギーは、スタジオの壁に貼られたカラースウォッチのよう。ブルー系はグリッドやキャプション、繰り返し使う要素用、赤はプルクォート、オレンジは区切りや号数など、リズムを作るのに有効。コツ：アクセントの暖色は各ページ1色のみを主役にして、混沌を避ける。

media.ioで生成されたクラフトスタジオウォールの画像例

15) キッズサイエンスフェア

HEX： #114B8C #4CC9F0 #EF233C #FFB703 #FFF1CC

雰囲気： 好奇心、明るい、親しみやすい

最適な用途： 学校のポスターやクラス配布資料

好奇心いっぱいで明るく、教室の中にポスターやステッカー、大きな見出しが溢れる雰囲気。濃いブルーはタイトルや枠線に最適、明るいシアンブルーは副見出し用。赤は重要なお知らせ、暖かい黄オレンジは楽しいアイコンや受賞強調に。コツ：大きなカラーブロックとシンプルな形で、遠くからでもはっきり見えるデザインに。

media.ioで生成されたキッズサイエンスフェアの画像例

16) シグナル＆スカイ

HEX： #0B1F3B #3B82F6 #E11D48 #F97316 #E5E7EB

雰囲気： クリーン、開放的、エネルギッシュ

最適な用途： ウェブサイトヘッダーイラスト

清潔感とシャープなシグナル感が現代的なウェブヘッダーに最適。明るいブルーで主要イラスト形状を描き、濃いネイビーは文字やナビゲーションでコントラストを確保。赤とオレンジは矢印やスパーク、動き方向の小さな指標に最適。コツ：まず2色のブルーで構成し、最後に暖色アクセントを加えましょう。

media.ioで生成されたシグナル＆スカイの画像例

17) ラヴァコーストライン

HEX： #06283D #1363DF #D90429 #F77F00 #F8F4E3

雰囲気： 劇的、映画的、強烈

最適な用途： アルバムカバーやプロモーションポスター

劇的で映画的、海の深みにマグマの轍が交わるようなイメージ。最も暗いブルーを背景にしてムードを与え、明るいブルーでタイポグラフィやラインを際立たせます。レッドとオレンジはアーティスト名やツアー日程、ステッカーなどに強烈なインパクトを。コツ：グラデーションは控えめに、ソリッドな色面主体で現代的に。

media.ioで生成されたラヴァコーストラインの画像例

18) ボールドプライマリーミックス

HEX： #0A3D62 #1E90FF #FF2D55 #FF7A00 #FFFFFF

雰囲気： 自信、目立つ、転換重視

最適な用途： EC商品広告

自信があり転換にフォーカス、きれいなセットと力強い見出しにスポットライトが当たる印象。ブルーはプロダクトへの信頼感を、レッド・オレンジは差し色で緊急感を強調。ブルー・レッド・オレンジの組み合わせは期間限定オファーやバッジ、価格訴求に特に有効。コツ：背景は白で、暖色はディスカウントバッジや「購入」ボタンなど2カ所に限定。

media.ioで生成されたボールドプライマリーミックスの画像例

19) ウォームデータビズ

HEX： #0B2F6B #2F6FED #E5383B #FF8C42 #F1F5F9

雰囲気： 分析的、親しみやすい、明快

最適な用途： レポートやデータ可視化ダッシュボード

分析の明快さと親しみやすい暖かみが、複雑なデータもとっつきやすくします。2色のブルーで大部分のチャート系列やUIをまとめ、統一感を出します。レッドは重要閾値用、オレンジは強調や選択部分のハイライトに。コツ：暖色はアラート、寒色は基準と凡例でまとめ、認知負荷を下げましょう。

media.ioで生成されたウォームデータビズの画像例

20) ファイヤーワークミニマル

HEX： #0A2463 #247BFF #C81D25 #FB6107 #F7FFF7

雰囲気： ミニマル、祝祭的、現代的

最適な用途： ブランドカードとシンプルなランディングページ

ミニマルで祝祭感があり、派手なパターン無しでも花火を思わせます。ディープブルーはベースや文字に、明るいブルーはリンクや小さなUIインジケーターに。レッドやオレンジは微妙なアクセントとしてドットやアンダーライン、小さなアイコンで個性を加えます。コツ：レイアウト全体は単色のブルーをベースにし、各要素ごとに1つの暖色アクセントを。

media.ioで生成されたファイヤーワークミニマルの画像例

青・赤・オレンジに合う色は？

ニュートラルカラー（白、オフホワイト、クリーム、ライトグレー）は、鮮やかなブルー・レッド・オレンジのHEX配色をクリーンで読みやすく見せる最も簡単な方法です。調和が取りにくい場合はコントラスト調整より中立色スペースを増やしましょう。

より深く高級感を出したいなら、チャコール、ディープネイビー、ウォームブラックを合わせて色味を落ち着かせ、アクセントに意図を持たせるのがコツ。柔らかい雰囲気には、ベージュやサンドのようなカラーもブルーとオレンジの橋渡しになります。

さらにサポート色が必要な時は、穏やかなティールや淡いスカイブルー、ソフトなブラッシュピンクなどを。サチュレーションの低いものにして暖色アクセントと競合しないようにしましょう。

青・赤・オレンジ配色を実際のデザインで使う方法

まず役割分担から始めましょう：ブルーはUIベース色（背景、ナビ、見出し）、レッドは「ストップ」要素（エラー、重大警告、締切）、オレンジは「ゴー」要素（プライマリーボタン、特集バッジ、強調メトリクス）用に。

ポスターやプロモ用途なら、暖色どちらかを主役にし、もう一方は補助アクセントとして使います。例：日付・CTAにオレンジ、スタンプや緊急ラベルにレッド、ブルーはグリッドやタイポグラフィ役。

ブランドシステムではアクセシビリティを初期からテスト：明るい中立色地にはテキストを置き、暖色ボタンは十分なコントラストを。クリーム地のやや濃いブルー文字がモダンに見せることも。

AIで青・赤・オレンジのパレットビジュアルを作成

このブルー・レッド・オレンジ配色を素早く検証したい時は、AIプロンプトでポスターやダッシュボード、パッケージ、ヒーローバナーモックアップを自動生成してみましょう。コントラスト・ムード・階層など、本格的デザインシステム構築前に確認できます。

Media.ioでは、任意のプロンプト（上記例など）を貼り付けて、「ミニマルグリッド」や「主にネイビー＋小さいオレンジ強調」指定でバランス調整も反復可能。ベストショットを保存し最終レイアウトの参考にしましょう。

次へ： シアンカラーパレット