20選 赤・オレンジ・黄色系の人気カラーパレットとHEXコード

赤、オレンジ、黄色はクラシックな「暖色系」—速く、明るく、目を引く色合いです。現代のデザインでは、それらはエネルギー、食欲、緊急性、楽観主義を表現する近道となります。

以下は、HEXコード付きの20種類の赤・オレンジ・黄色のカラーパレット案と、ブランディング、ポスター、UIなどでの配色、コントラスト、実際の使い方に関する実用的なヒントです。

赤オレンジ黄色パレットがうまく機能する理由

赤、オレンジ、黄色のパレットはカラーホイール上で隣り合っているため、自然な一体感があります。この調和により、グラデーションや大胆なブロック、イラストの陰影に使っても「ランダム」に見えず簡単にまとまり感を出せます。

また、これらの色は「熱」「太陽光」「動き」「食欲」など強い感情的な印象を持っています。そのため、暖色系パレットは食品ブランド、スポーツプロモーション、CTA重視のランディングページなどで多く使われます。

ポイントは「コントロール」。これらの色はエネルギーが高いため、現代のデザインでは、タイポグラフィを読みやすくして余白を確保するために、暗めのアンカー色（チャコールやネイビー）や明るい中性色（クリーム）と組み合わせて使うことが一般的です。

20種類以上の赤オレンジ黄色カラーパレット（HEXコード付き）

1）サンセットマーケット

HEX： #D62828 #F77F00 #FCBF49 #EAE2B7 #2A2A2A

ムード： 活気ある、暖かい、屋台のような賑やかさ

おすすめ用途： フードフェスのポスターデザイン

活気あふれる太陽の光を思わせるカラーで、ゴールデンタイムのネオンサインやジューシーな屋台をイメージさせます。この赤オレンジ黄色のパレットは、ポスターやメニュー、イベント看板で食欲を一瞬で引き出すのに最適です。クリームと合わせて余白を作り、チャコールで見出しやアイコンを引き締めましょう。使用ポイント：一番濃い赤色は見出しやCTAに使い、明るい黄色がレイアウトを圧迫しないように配慮しましょう。

media.ioを使って生成したサンセットマーケットの画像例

Media.io

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

今すぐ無料で試す

2）シトラスポップUI

HEX： #FF3B30 #FF7A00 #FFD400 #FFF2D8 #111827

ムード： エネルギッシュ、クリア、モダン

おすすめ用途： フィットネスアプリの2D UIモックアップ

爽やかでパンチがある配色は、氷の上に搾ったシトラスのようなイメージです。UIに使えば、コントラストの効いたボタンやバッジ、進捗表示もネオンのようなゴチャゴチャ感なしで表現できます。暖色と深いインク色を組み合わせることでテキストやアイコンの視認性を確保し、淡いクリームをメインの背景にしましょう。使用ポイント：黄色はハイライトやマイクロインタラクションに限定し、明るい背景でも見やすくします。

media.ioを使って生成したシトラスポップUIの画像例

3）デザートロードトリップ

HEX： #C1121F #F26419 #F6BD60 #F7EDE2 #283618

ムード： 焼けた大地、冒険的、ノスタルジック

おすすめ用途： 旅行パンフレットの表紙

燦々と降り注ぐ太陽や、埃っぽいハイウェイ、ヴィンテージのポストカード、夕方の暑さを喚起させる色合いです。子どもっぽくならず、温かみが必要な旅行パンフレットやツアーカバー、目的地のランディングページに最適です。控えめな緑と合わせて落ち着いたコントラストを作り、柔らかい紙色を余白に使うと良いでしょう。使用ポイント：明るい背景に微細なグレインテクスチャを足して、印刷物風のレトロ感をプラスできます。

media.ioを使って生成したデザートロードトリップの画像例

4）スパイシーロゴマーク

HEX： #B80C09 #E85D04 #FFBA08 #FAF3DD #3D3D3D

ムード： ボールド、自信、パンチ力

おすすめ用途： ブランドロゴやアイコン

大胆で自信に満ち、チリのスパイスと太陽の輝きを感じる色合い。ロゴやアプリアイコン、パッケージマークなど、小さいサイズでもパワフルに見せたい場合に最適です。温かみのあるオフホワイトや落ち着いたダークグレーと組み合わせましょう。使用ポイント：アイコンはグレースケールでも確認し、イエローは本当に必要なポイントだけで使いましょう。

media.ioを使って生成したスパイシーロゴマークの画像例

5）ハニードミニマル

HEX： #A4161A #E36414 #F4D35E #FFF8E7 #4A4A4A

ムード： クリーン、温かみ、プレミアム感

おすすめ用途： 商品パッケージのラベル

クリーンで温かみがあり、ハチミツがトーストにかかるようなイメージです。友好的でありながら派手すぎない大人のパッケージデザインに向いています。クリーム系や白色と合わせて、抑えたタイポグラフィや十分な余白をとり、色の意図を感じさせる構成にしましょう。使用ポイント：黄色インクは照明の種類で色味が変わるため、印刷の際はコントラスト確認のために試し刷りをおすすめします。

media.ioを使って生成したハニードミニマルの画像例

6）秋の教室

HEX： #9B2226 #EE6C4D #F9C74F #F1FAEE #1D3557

ムード： フレンドリー、勉強熱心、親しみやすい

おすすめ用途： 教育用スライドテーマ

親しみやすく勉強熱心な印象で、教室の暖かな光やカラフル付箋を思わせる配色です。レッスン用のスライドやワークショップ資料、コースのグラフィックにおすすめ。柔らかいほぼ白系をメインとし、深い青で見出しや図を、オレンジで強調ポイントを作ります。使用ポイント：黄色は短いフレーズの背後ハイライトに使い、長い文章には使わないようにするのがプレゼン資料には効果的です。

media.ioを使って生成した秋の教室の画像例

7）カーニバルライト

HEX： #D00000 #FF5400 #FFBD00 #FFF3B0 #001D3D

ムード： 遊び心、明るい、夜＆ネオン

おすすめ用途： SNSプロモ広告

遊び心あふれる明るさで、夜空に光るカーニバルの電球を連想させます。SNSプロモ、期間限定オファー、目を引く見出しに効果的。ネイビーと淡い黄を組み合わせて読みやすさを確保し、一番鮮やかなオレンジをボタンに使いましょう。使用ポイント：赤は少量だけ道しるべに使い、オレンジと競合しないよう注意しましょう。

media.ioを使って生成したカーニバルライトの画像例

8）レトロダイナー・タイル

HEX： #C81D25 #FF6D00 #FFCA3A #F7FFF7 #2D1E2F

ムード： レトロ、ポップ、ハイコントラスト

おすすめ用途： 雑誌特集のレイアウト

レトロで茶目っ気があり、ダイナーのボックス席やタイル模様、ヴィンテージサインを思い出させます。大胆なセクション区切りやアイキャッチ、賑やかなインフォグラフィックを作りたい編集レイアウトにおすすめです。深いプラム色はテキストの安定したアンカー役、淡い白色はページ全体を軽く見せます。使用ポイント：黄色はモチーフや箇条書きに繰り返し使い、誌面にリズムを加えましょう。

media.ioを使って生成したレトロダイナー・タイルの画像例

9）ソラーグラデーション

HEX： #AD2831 #F35B04 #F7B801 #FDEEDC #0B132B

ムード： シャープ、輝き、テクノロジー感

おすすめ用途： アプリのスプラッシュ画面・オンボーディング

シャープで輝く印象は、太陽フレアが闇に溶け込むようなデザイン。スプラッシュ画面やオンボーディングイラスト、ヒーローグラデーションに最適で、温かみを出しつつ現代的に見せたい場合に効果的です。ライトピーチとミッドナイトカラーのコントラストを活かし、オレンジをメイングラデーションに使いましょう。使用ポイント：グラデーションは控えめにし、古いディスプレイやアクセシビリティのためにフラットカラーの代替も用意すると安心です。

media.ioを使用して生成されたソーラーグラデーションの画像例

10) サフランとブリック

HEX： #8D0801 #E85D04 #F48C06 #FEC89A #F8F9FA

ムード： 居心地よい、アース感、家庭的

おすすめ用途： インテリアデザインのムードボード

居心地よく、アース感があり、ブリックの壁やサフランのテキスタイル、漆喰に柔らかな日差しを想起させます。インテリアのムードボードやカフェのブランディング、温かみと職人の雰囲気を求めるライフスタイル投稿に活用できます。淡いニュートラルをベースにして、最も深い赤はラベルやトリムなど小さな触感のアクセントに使うと良いでしょう。利用のコツ:暖色ブロックと余白をバランス良く配置し、パレットが洗練されて感じられるようにしましょう。

media.ioを使用して生成されたサフランとブリックの画像例

11) タンジェリン・ワークアウト

HEX： #D00000 #FF8800 #FFB703 #FFF1E6 #14213D

ムード： やる気、スポーティー、エネルギッシュ

おすすめ用途： スポーツイベントのチラシ

やる気を促しスポーティーな雰囲気は、ホイッスルの音やスタジアムのライトを感じさせます。この色調はイベントチラシやトレーニングプログラム、緊急性が大切なアナウンスに適しています。ダークネイビーとライトクリームを組み合わせて、読みやすい詳細を表現し、オレンジを主なバナー色にしてください。利用のコツ:黄色は重要な数字や日付に使い、情報の階層を明確に保ちましょう。

media.ioを使用して生成されたタンジェリン・ワークアウトの画像例

12) キネティック・ウォームス

HEX： #B5179E #E63946 #F77F00 #F9C74F #F8F9FA

ムード： 表現豊か、アーティスティック、エネルギッシュ

おすすめ用途： クリエイティブスタジオのウェブサイトヒーロー

表現豊かでアーティスティック、モーショングラフィックスやペイントのスワイプ、スタジオのエネルギーを喚起します。レッドオレンジイエローに実験的な要素を加えたい場合、この組み合わせは遊び心あるマゼンタも加わり、通常の暖色トリオを超えます。明るいニュートラルをベースにし、最も明るい色はヒーローの形状やボタンに使用します。利用のコツ:マゼンタは希少なアクセントとして使うことで、暖色の核となる部分を一貫させましょう。

media.ioを使用して生成されたキネティック・ウォームスの画像例

13) パプリカ・ピクニック

HEX： #A11D33 #F25C54 #F6AA1C #FCEFE3 #2B2D42

ムード： 明るく、カジュアル、親しみやすい

おすすめ用途： サマー・パーティー招待状

明るくカジュアルで、ピクニックブランケットに新鮮な果物やスパークリングドリンクを連想させます。招待状やRSVPページ、両方プリントとデジタルで歓迎感を与えるパーティーグラフィックに適しています。ボディテキストはクールで深いトーンを使い、ピーチ色の背景で柔らかさを保ちます。利用のコツ: メイン見出しは赤、オレンジは場所や時間などサブの情報に使うと効果的です。

media.ioを使用して生成されたパプリカ・ピクニックの画像例

14) マリーゴールドスタジオ

HEX： #7F1D1D #EA580C #F59E0B #FEF3C7 #111827

ムード： プロフェッショナル、温かい、構造的

おすすめ用途： プロダクトのワンシート・スペックシート

プロフェッショナルかつ温かく、マリーゴールドのインクとテクスチャペーパー、しっかりしたダークの見出しを連想させます。ワンシートやプロダクトスペック、価格ページなど構造が重要な場面に最適です。淡い黄色をセクションの背景にし、深いインクは表や細かい説明に使うと良いでしょう。利用のコツ: オレンジはチャートやアイコンに使い、情報が多くてもページがすっきり見えるよう配慮しましょう。

media.ioを利用して生成されたマリーゴールドスタジオの画像例

15) ファイアライトランディング

HEX： #B91C1C #F97316 #FACC15 #FFFBEB #0F172A

ムード： 暖かい、説得力、モダン

おすすめ用途： SaaSランディングページデザイン

暖かく説得力があり、ファイアライトが洗練された画面に反射するイメージです。これらの暖色組み合わせは、明確なCTAやメリットカード、価格切り替えがあるランディングページにぴったり。ナビゲーションや本文にはダークスレートを使い、黄色は信頼バッジや重要な指標のハイライトに限定しましょう。利用のコツ:各セクションごとに主な暖色を一つ選び、ページ全体がレインボーにならないようにします。

media.ioを使用して生成されたファイアライトランディングの画像例

16) ゴールデンアワー・ボタニカルズ

HEX： #9A031E #FB8B24 #ECA400 #F4E9CD #5F0F40

ムード： ロマンティック、ナチュラル、日差しのよう

おすすめ用途： 水彩画ボタニカルイラスト

ロマンティックで日差しを感じさせ、マリーゴールドやポピー、ガーデンの遅い時間の輝きが思い浮かびます。ボタニカルプリントやステーショナリー、季節のSNSグラフィックにもぴったりです。パーチメント色を紙に見立て、深いベリー色で影や茎に深みを加えましょう。利用のコツ:境界を柔らかく重ねて、暖色が自然に混ざるようにしましょう。

media.ioを使用して生成されたゴールデンアワー・ボタニカルズの画像例

17) チリとバター

HEX： #C1121F #F3722C #F9C74F #FFF3D6 #2F3E46

ムード： 心地よく、美味しい、親しみやすい

おすすめ用途： レシピカードテンプレート

心地よく美味しい、チリフレークをバタートーストにふりかけたイメージ。レシピカードや料理ブログのグラフィック、食事準備ラベルに最適です。メイン背景はソフトクリーム色、クールダークトーンは材料リストや手順番号に使います。利用のコツ:オレンジは主なアクセントに、赤はスパイスレベルやバッジなど小さなマークに使いましょう。

media.ioを利用して生成されたチリとバターの画像例

18) サンライズ・インフォグラフィック

HEX： #D1495B #F79256 #FBD1A2 #FFEECA #1B263B

ムード： 明快、楽観的、データフレンドリー

おすすめ用途： ビジネスインフォグラフィック

明快で楽観的、柔らかな朝焼けから穏やかな地平線に消えていく印象です。ビジネスインフォグラフィックや年次スナップショット、スライドチャートで、暖かさを親しみやすく表現したい時におすすめ。ダークブルーは軸やラベルに、コーラルやオレンジは主要なデータ系列色に使いましょう。利用のコツ:最も明るい色は背景やコールアウトパネルに使い、データのコントラストを高く保ちます。

media.ioを利用して生成されたサンライズ・インフォグラフィックの画像例

19) アンバー・ナイトクラブ

HEX： #8A0000 #FF4D00 #FFB000 #FFE8B6 #0A0A0A

ムード： 劇的、ナイトライフ、ハイコントラスト

おすすめ用途： DJイベントポスター

劇的でナイトライフの雰囲気、アンバースポットライトが暗い部屋を切り裂くイメージです。DJポスターやコンサート告知、大胆なタイポグラフィーのレイアウト向き。舞台はブラック、オレンジはメイン見出し、黄色は日付や会場に使いましょう。利用のコツ:オレンジ要素にさりげないグロー効果を加え、タイポのエッジはシャープに保つことで視認性を高めます。

media.ioを使用して生成されたアンバー・ナイトクラブの画像例

20) マンゴーソルベ

HEX： #E63946 #FF7F11 #FFD166 #FFF7E6 #264653

ムード： 遊び心、甘い、子供向け

おすすめ用途： 子供向けイラストとステッカーセット

遊び心があり甘く、マンゴーソルベが太陽の下で溶けるようなイメージです。子供向けイラストやステッカーセット、元気なオンボーディングマスコットにおすすめ。ソフトクリーム色をベースに、テール色はキャラクターのアウトラインに使うと、明るい面でも可読性が維持できます。利用のコツ:黄色は細いラインより大きな形に使い、明るい背景上でも消えないようにしましょう。

media.ioを利用して生成されたマンゴーソルベの画像例

赤・オレンジ・黄色と相性が良い色は？

赤、オレンジ、黄色のバランスを取るには、コントラスト用の「重み」となる色（チャコール、ブラック、ダークネイビー、ダークスレート）が最も信頼できます。暖色パレットが騒がしくなりすぎず、タイポグラフィーやアイコンのアクセシビリティを保つ効果があります。

クリームやパーチメント、暖色系オフホワイトなどの明るいニュートラルは、暖色が呼吸できる余白を生みます。これらのベースは、黄色をより濃く豊かに見せ、色が薄まるのを防ぎます。

現代的なひねりを加えるなら、テールや抑えたオリーブ、深いブルーグリーンなどのクールなアクセントを小さく加えましょう。クールなアクセントはセクション分けや深みを与え、暖色パレットのストーリーを壊さずに効果的です。

赤オレンジ黄色カラーパレットを実際のデザインで使うには？

レイアウトセクションごとに主な暖色を一つ選び、残りの暖色はサポート（バッジ、ハイライト、ミニグラフィック）として使いましょう。これでデザインが無秩序な「虹」にならず、パレットのエネルギー感を維持できます。

可読性は役割分担で守ります: テキストやアウトラインには暗い色、背景には明るいニュートラル、黄色は主にハイライトや大きな形で。黄色は特にコントラスト追加が必要——特にUIラベルや細い線の場合注意しましょう。

媒体ごとにテストしましょう。暖色パレットは画面や印刷で変化しやすく、黄色は温かい照明やプロジェクター下だと最初に判読性を失うので、コントラストやエクスポートプレビューを早めに確認しましょう。

AIで赤オレンジ黄色パレットのビジュアルを作ろう

これらの暖色トーンの「実際の利用」を見たいなら、プロンプトからモックアップやコンセプトビジュアルを直接生成してください。モダンかレトロか、コントラストや黄色の使える範囲をすぐ検証できます。

シンプルなシーン（ポスター、UIカード、パッケージラベル）から始め、各色の役割（見出しに赤、CTAにオレンジ、ハイライトに黄色、テキストにダーク、ベースにクリーム）を指定します。一度に一つだけ色の役割を調整して繰り返しましょう。

次へ： ピンクフラミンゴ配色パレット