25 Modern Red and Blue Color Palettes with Hex Codes

赤と青は現代デザインにおける最も信頼できる組み合わせのひとつです。十分に大胆で注目を集める一方、構造的で信頼性も感じさせます。

以下では、UI・ブランディング・ポスターなどに使えるHEXコード付きの赤青カラーパレットのアイデアと、コントラストやアクセント、読みやすい文字組の実践的なヒントをご紹介します。

赤青パレットがよく機能する理由

赤と青は自然に強いビジュアル階層を作り出します。青は安定感や「構造的」な印象を与え、赤は注目を集め、行動を促す色です。両者を組み合わせることで、レイアウトから見出し、アクションへの導線が分かりやすくなります。

赤青の配色は温度感や感情の幅も持ちます。青はクールで落ち着き、赤は活気ある雰囲気をもたらすため、彩度や明度、中間色の使い方次第で、プロフェッショナルにも遊び心のある印象にも調整できます。

アクセシビリティの観点からも、多くの赤と青の組み合わせは高いコントラストを作ることができます。特にブラック、オフホワイト、グレーをサポートカラーにすると、赤青トーンはUIやサイン、ポスターのタイポグラフィでも実用的な選択肢となります。

20種類以上の赤青カラーパレットアイデア（HEXコード付き）

1) クリムゾンネイビー

HEX： #C1121F #003049 #2B2D42 #EDF2F4 #8D99AE

雰囲気： 力強い・クラシック・自信に満ちた

おすすめ用途： 企業ブランディングやウェブサイトのヘッダー

夜空に映えるテーラードジャケットのように、太くクラシックな印象で自信と権威を感じさせます。背景には深いネイビーを、アクション箇所にはクリムゾンを使い、しっかりとコントラストを保ちましょう。クールグレーや十分な余白と組み合わせることで、うるさくならず高級感をキープできます。使用のコツ：最も明るい赤は画面ごとに1箇所までに留めて視覚疲労を防いでください。

media.ioで生成したクリムゾンネイビーの画像例

Media.io

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

今すぐ無料で試す

2) チェリーアイス

HEX： #E11D48 #1D4ED8 #93C5FD #FCE7F3 #0F172A

雰囲気： 新鮮・遊び心・高コントラスト

おすすめ用途： SNSテンプレートやクリエイターのサムネイル

チェリーソルベとクラッシュアイスのように、フレッシュ＆ポップな配色ですがネオン調にはなりません。明るいブルーは大きな形に、チェリーレッドはバッジや価格、キーワードなどにアクセントとして使いましょう。ソフトピンクやライトブルーが安全な背景カラーの役割を果たします。使用のコツ：淡色上に文字を載せるときは、細いダークアウトラインを加えて読みやすさを保ちましょう。

media.ioで生成したチェリーアイスの画像例

3) レトロアスレチック

HEX： #D90429 #2B2D42 #4361EE #F7F7FF #FFB703

雰囲気： エネルギッシュ・スポーティ・ヴィンテージ

おすすめ用途： スポーツポスターやチームグッズのグラフィック

ヴィンテージスコアボードのような雰囲気で、活気あふれるスポーティな配色です。大きな文字には濃いチャコールを、鮮やかな赤とブルーはアクセントとして競い合う要素に使いましょう。暖かい黄色は数字やアイコン、ステッチのハイライトに最適です。使用のコツ：グラデーションは控え、ハードエッジなデザインでレトロ感を保ってください。

media.ioで生成したレトロアスレチックの画像例

4) ハーバーライツ

HEX： #EF233C #001F54 #034078 #A9D6E5 #F8F9FA

雰囲気： 船舶風・シャープ・現代的

おすすめ用途： 旅行系LPやホテルのブランドカラー

夜の水面に反射した港の光のようなシャープな組み合わせで、清潔感と現代的な印象です。広いセクションやナビゲーションには深いブルー、予約ボタンなど重要ポイントにのみ赤をアクセントとして使いましょう。淡いアクアブルーが爽やかな印象を与え、ページを重くしません。使用のコツ：ブルーの主役を一つ決め、他はホバーステートやセカンドパネル用に使い分けると良いです。

media.ioで生成したハーバーライツの画像例

5) ベルベットフラッグ

HEX： #B80C09 #0B1320 #1C77C3 #E5E5E5 #7D8597

雰囲気： ムーディ・洗練・ドラマチック

おすすめ用途： 雑誌のレイアウトや書籍カバー

ステージのスポットライトに照らされたベルベットカーテンのような、ムーディで洗練されたカラーです。レイアウトの土台にはほぼ黒を、ブルーは罫線やキャプション、引用など構造的な要素に。赤はタイトルやイラストのワンポイントに最適です。使用のコツ：ボディテキストは真っ白よりライトグレー上に載せることで、長い文章でも目が疲れにくくなります。

media.ioで生成したベルベットフラッグの画像例

6) ウィンターサンライズ

HEX： #F94144 #277DA1 #1D3557 #F1FAEE #A8DADC

雰囲気： 楽観的・爽やか・落ち着き

おすすめ用途： ウェルネスアプリやオンボーディング画面

凍った湖に昇る冬の朝日のように、穏やかさとやる気を両立した配色です。クールブルーをメインUIに、赤は進行状況や確認、バッジに使いましょう。ミントアクアと淡いオフホワイトでオンボーディング画面も親しみやすく、呼吸しやすいイメージに。使用のコツ：アクセシビリティのため、赤文字はオフホワイト上だけにしアクアの上には置かないでください。

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

7) ネオンアーケード

HEX： #FF0054 #00A6FB #001845 #F7F7FF #FFD60A

雰囲気： エレクトリック・若々しい・ハイエナジー

おすすめ用途： イベントフライヤーや音楽ポスター

深夜に光るアーケードサインのように、電撃的で若々しい配色がすぐに注目を集めます。明るいブルーは大きな背景に、ホットレッドを見出しや日付に使いましょう。黄色の小さなアクセントがチケットのようなきらめきを加えます。使用のコツ：テキストブロックはダークネイビー上にのせて、ビビッドカラーが見やすくなるようにしましょう。

media.ioで生成したネオンアーケードの画像例

8) ローズデニム

HEX： #E63946 #457B9D #1D3557 #F1FAEE #FFC6D9

雰囲気： ソフト・スタイリッシュ・親しみやすい

おすすめ用途： ファッションルックブックやライフスタイルブログ

ローズカラーのスカーフと使い込まれたデニムのように、ソフトで現代的、親近感のあるパレットです。ナビやサイドバーにはデニムブルー、赤の見出しがセクションの目線誘導に役立ちます。ピンクがかった背景は商品グリッドや引用カードの背後にも最適で、写真の邪魔もしません。使用のコツ：写真は彩度を控えめにし、カラーパレットを主役に引き立てましょう。

media.ioで生成したローズデニムの画像例

9）マリナーラ・ベイ

HEX： #D62828 #003049 #1D6A96 #F77F00 #FCBF49

雰囲気： 温かみがあり、食欲をそそり、活気がある

おすすめ用途： 食品パッケージやレストランメニュー

マリナーラソースが海辺の涼風とともに煮込まれるような温かみと美味しさを感じさせる配色で、見た目も生き生きとして大胆です。メニューの構成にはネイビーやオーシャンブルーを使い、赤でおすすめ料理や価格を強調します。オレンジは辛さのレベルや注目ポイント、カテゴリタブなどのアクセントに最適です。使用のコツ：印刷テストが重要なので、非コート紙で赤がにじむ場合は少し濃く調整しましょう。

media.ioで生成したマリナーラ・ベイの画像例

10）ロケットポップ

HEX： #FF3B30 #007AFF #0A0F2C #FFFFFF #C7C7CC

雰囲気： クリーン、パンチが効いている、テクノロジー感

おすすめ用途： アプリアイコンセットやUIコンポーネント

夏の暑さの中のロケットポップのようにクリーンでインパクトがある配色で、クリアで瞬時に読み取れます。鮮やかな青と赤は、プライマリー、デストラクティブ、ハイライトといった状態に最適な赤青の組み合わせです。ダークネイビーをテキスト用に、グレーはコンポーネント間の静かなスペースカラーに使います。使用のコツ：角丸を一貫させて、強い色がまとまりのある印象になるよう配慮しましょう。

media.ioで生成したロケットポップの画像例

11）キャニオンダスク

HEX： #C81D25 #233D4D #5DA9E9 #EAE2B7 #0B090A

雰囲気： 落ち着いた、シネマティック、アウトドア風

おすすめ用途： アドベンチャーブランドのアイデンティティやアウトドア広告

日暮れのキャニオンの影のような落ち着きと映画的な雰囲気を持つパレットで、頑丈ながら洗練されています。ロゴやタイポには濃いスレートやブラックを、空のようなハイライトやセカンダリーシェイプには明るいブルーを使いましょう。砂色のベージュは自然な背景色として赤の強さを和らげます。使用のコツ：ざらつきのある紙やグレインオーバーレイと組み合わせると、よりアウトドアらしい仕上がりになります。

media.ioで生成したキャニオンダスクの画像例

12）スタジオコントラスト

HEX： #E10600 #0057B8 #111827 #F9FAFB #6B7280

雰囲気： シャープ、モダン、プロフェッショナル

おすすめ用途： プロダクトランディングページやSaaSウェブサイト

スタジオ照明の下で撮影されたプロダクト写真のように、シャープで現代的、プロ感と統制が感じられるコントラストです。青は主なアクションカラー、赤は警告や期間限定タグ、または一つの印象的なディテールに活用しましょう。チャコール、ホワイト、ミッドグレーで堅牢なタイポグラフィシステムを作り、長いページもサポートします。使用のコツ：鮮やかな色を同じボタン行で併用しないことで、アクションが競合するのを防ぎましょう。

media.ioで生成したスタジオコントラストの画像例

13）ボタニカル・タイド

HEX： #E63946 #1E6091 #184E77 #D8F3DC #2D6A4F

雰囲気： フレッシュ、ボタニカル、バランスの取れた

おすすめ用途： 水彩イラストや春のキャンペーン

雨上がりの葉や野花のように爽やかで、調和が取れて明るい印象のトーンです。グリーンやミントで広いウォッシュを作り、青で陰影や構造を加えましょう。赤は小さな花のポイントに使うと自然な仕上がりになります。使用のコツ：水彩スタイルではミントを最も明るいトーンにして、細部の可読性を保ちましょう。

media.ioで生成したボタニカル・タイドの画像例

14）オペラハウス

HEX： #B5172E #14213D #3A86FF #F1F1F1 #C0C0C0

雰囲気： ドラマチック、エレガント、舞台のような

おすすめ用途： 劇場ポスターや文化イベントのブランディング

ベルベットのカーテンをスポットライトが照らすようなドラマチックかつエレガントな色調で、プレミアにふさわしい雰囲気です。ポスター全体には深いネイビーを使用し、明るいブルーは補足情報のブロックに使いましょう。赤い見出しを控えめに使うことで、タイポグラフィを圧倒せず強さを出します。使用のコツ：ネイビーの上に明るい文字を配置する時はレタースペーシングを広めにし、上品な印象にしましょう。

media.ioで生成したオペラハウスの画像例

15）シグナルシステム

HEX： #DC2626 #2563EB #0F172A #E5E7EB #22C55E

雰囲気： 明快、機能的、システム化された

おすすめ用途： デザインシステムとアクセシビリティ重視UI

分かりやすく、機能的なコントロールパネルのように、一目で把握できる配色です。赤青カラーの組み合わせにより、UIセマンティクスが強調されます：青が主なアクション、赤はデストラクティブな状態、グリーンは成功通知です。ほぼ黒のテキストと明るいグレーの面で、各コンポーネントをはっきり分けます。使用のコツ：色覚バリアフリーのために、色だけでなくアイコン形状も組み合わせて使いましょう。

media.ioで生成したシグナルシステムの画像例

16）ピクニック・ノーティカル

HEX： #F03E3E #1971C2 #0B1F3A #FFF5F5 #FFE066

雰囲気： 陽気、夏らしい、親しみやすい

おすすめ用途： パーティー招待状やピクニックチラシ

浜辺のピクニックブランケットのように明るく陽気で、親しみやすさを感じさせるトーンです。レイアウトとタイポグラフィにはブルーを、イベント名やRSVPラインの強調には赤を使いましょう。クリーミーピンクとサニーイエローが淡い印象にならず、子供向けにも適した明るい仕上がりです。使用のコツ：印刷物では黄色は小さなアクセントとして使い、ほとんどの用紙でも読みやすさを保ちましょう。

media.ioで生成したピクニック・ノーティカルの画像例

17）ナイトシフト

HEX： #FF2D55 #0A84FF #1C1C1E #2C2C2E #F2F2F7

雰囲気： シャープ、夜間、ハイコントラスト

おすすめ用途： ダークモードのダッシュボードや分析UI

夜勤中の都会の明かりのようにスリークで夜間向け、暗い環境でも明快な配色です。二色のダークグレーをベースにし、データ内容に応じて青または赤を主要ハイライトとして選びましょう。オフホワイトは主要な数値やラベルだけに使い、ダッシュボードに余白感を持たせます。使用のコツ：チャートのアクセント色は最大2色に抑え、分析画面での視覚ノイズを防ぎます。

media.ioで生成したナイトシフトの画像例

18）コーラル・ブループリント

HEX： #FF4D6D #2F5DFF #0B2545 #F8F9FA #48CAE4

雰囲気： クリエイティブ、クリーン、エネルギッシュ

おすすめ用途： スタートアップのブランディングやピッチデック

コーラルインクのブループリントのように、エネルギッシュで整理された配色です。赤青の組み合わせはデック内の階層付けに特に有効で、青は構造、コーラルレッドは主要なポイントの強調に最適。アクアは図や二次的なハイライトに控えめに使い、スライドがごちゃつかないようにしましょう。使用のコツ：全体で指標ごとにアクセントカラーを1色ずつに揃え、チャートの一貫性を保ちます。

media.ioで生成したコーラル・ブループリントの画像例

19）グレイシャーチェリー

HEX： #C81E1E #1E3A8A #60A5FA #F3F4F6 #111827

雰囲気： クール、クリスプ、自信に満ちた

おすすめ用途： テック製品の広告やWebバナー

氷河のような冷たさとチェリーのパンチが融合し、自信にあふれるテック系の印象です。中間の青は大きめの図形に、淡い青は商品周りのグローなハイライトに使いましょう。赤は価格や機能タグ、アイコンにピンポイントで使うのが効果的です。使用のコツ：ダークグレーの控えめな影を加えて要素を分離しつつ、全体のクリーンさは保ちましょう。

media.ioで生成したグレイシャーチェリーの画像例

20）ミニマル・パトリオット

HEX： #D00000 #003566 #001D3D #EDEDED #FFFFFF

雰囲気： ミニマル、力強い、時代を超えた

おすすめ用途： 非営利団体のキャンペーンや市民向け告知

明るい日のはためくバナーのようにミニマルで力強く、普遍的な印象のカラーです。深いブルーを見出し・バーベースにし、赤は緊急のアクションや寄付の呼びかけにのみ使いましょう。十分な余白で信頼感と見やすさを保ちます。使用のコツ：コントラストを和らげたい場合は、純白背景の代わりに淡いグレーを使い、フォントウェイトも統一しましょう。

media.ioで生成したミニマル・パトリオットの画像例

21）フェスティバル・バッジ

HEX： #E01E37 #1F7A8C #022B3A #E1E5F2 #FF9F1C

雰囲気： フェスティブ、手作り感、アップビート

おすすめ用途： イベントバッジやステッカーパック

デニムジャケットに付けたエナメルピンのような祝祭感と手作り感のあるラインナップで、明るく魅力的です。ティールブルーがレッドの印象をクラシック過ぎないものにしてくれます。オレンジは星や縁取り、限定ラベルのワンポイントに最適。使用のコツ：深いネイビーでバッジの輪郭をはっきりさせ、ライトなステッカー用紙でも形状が読み取りやすいようにしましょう。

media.ioで生成したフェスティバル・バッジの画像例

22）セラミック・コースト

HEX： #D7263D #1B3A57 #4EA8DE #F4F1DE #9A8C98

雰囲気： 芸術的、沿岸風、やさしくモダン

おすすめ用途： ホームデコブランディングや商品パッケージ

日差しの棚の上の釉薬陶器のようなアーティスティックで沿岸らしいソフトモダンな配色です。パッケージにはクリーム色を基調とし、濃いネイビーのタイポグラフィと淡いブルーのパターンでバランスを取ります。赤を控えめに加えることで、ロゴや封印に手作り感が生まれ、企業的になりすぎません。使用のコツ：パターンは1つのスケールに絞り、赤いアクセントがごちゃごちゃした中で埋もれないようにしましょう。

media.ioで生成したセラミック・コーストの画像例

23）コード＆チェリー

HEX： #F43F5E #2563EB #111827 #F3F4F6 #A1A1AA

雰囲気： テクノロジー系、フレンドリー、エネルギッシュ

おすすめ用途： 開発者ツールのUIとドキュメントサイト

テクノロジー系でフレンドリー、クリーンなコードにチェリーハイライトを加えたような印象で、このセットは騒がしくなくエネルギッシュです。リンクやプライマリーボタンには青を使い、通知や重要な状態には赤を使いましょう。グレーは長いドキュメントやテーブルに落ち着いた読書面をつくります。使い方のコツ: インラインコードブロックは淡いグレーに濃い文字色で表示し、アクセントの意味を分かりやすくしましょう。

コードとチェリーの画像例（media.ioで生成）

24）エアショーポスター

HEX： #D00000 #1D4ED8 #0A122A #F8FAFC #94A3B8

雰囲気： ダイナミック、太字、空をテーマ

おすすめ用途： 航空ショーポスターとプロモーションバナー

ジェット機が澄んだ青空を切り裂くようなダイナミックかつ力強い配色で、スピード感と決断力が感じられます。余白のために明るい背景を使い、力強い文字にはネイビーを、動きのラインやシェイプには青を重ねましょう。赤のワンポイントアクセントは重要な情報を際立たせます（特に日付やチケット情報）。使い方のコツ：1つのレイアウトにつき2つの主要色に抑えて、タイポグラフィの主導権を保ちましょう。

エアショーポスターの画像例（media.ioで生成）

25）ライブラリーランタン

HEX： #B91C1C #1E40AF #0F172A #FAFAF9 #D6D3D1

雰囲気： 学術的、暖かい、信頼できる

おすすめ用途： 教育ブランディングやコースページ

静かな図書館で灯るランタンのように学術的で暖かく信頼できる配色です。見出しやナビゲーションにネイビーを使用して安定した骨組みを作り、重要な申込ボタンや締め切り強調には赤を加えてください。柔らかなオフホワイトやストーングレーが長いページでも快適な読書を実現します。使い方のコツ：アクセントの赤は1種類の動作だけに一貫して適用し、シグナルの混在を避けましょう。

ライブラリーランタンの画像例（media.ioで生成）

赤青と相性の良い色は？

ニュートラルカラーは赤や青と最も合わせやすいです。パキッとした白、ソフトなオフホワイトや涼しげなグレーが視覚ノイズを減らし、配色全体の可読性を保ちます。ダーク系のレイアウトなら、ほぼ黒やチャコールを使うことで赤・青アクセントが意図的な印象になり、どぎつさを和らげます。

黄・オレンジ・コーラルのような暖色のアクセントは「スパーク（きらめき）」を加え、情報の階層を区切るのに役立ちます。特にポスターやメニュー、ハイライトバッジにおすすめです。ただし暖色アクセントは小さく抑えて、赤や青のメインテーマと競合しないようにしましょう。

グリーン（特にティール、ミント、フォレスト）は、フレッシュさやバランスの取れた印象にしたい時や、UIステータスカラー（成功・エラー等）が必要な時に最適です。グリーンは補助的に使い、形やアイコン（色だけに頼らない）と組み合わせましょう。

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

まず役割で考えましょう。ブルーは主な面やリンク用、レッドは注意喚起（CTAやセール、アラート）専用。残りはニュートラルで余白やタイポグラフィ用に。これで赤×青配色が画面横断でもスケールしやすくなります。

「鮮やか×鮮やか」を制御：赤も青も鮮やかな場合は、暗色やニュートラル上に置くか白で区切って色が「振動」しないように。特にモバイルで重要です。

読みやすい文字には、ボディテキストはオフホワイトや淡いグレー上に、鮮やかな赤青は見出しやタグ、ボタン用にとっておくこと。細字や小さいUIアイコンは必ずコントラストをチェックしましょう。

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

すでにお気に入りのHEXコードがあるなら、ポスター・UI画面・パッケージ・SNSテンプレートなどでリアルなモックアップを作るのが最速の検証方法です。

Media.ioなら、短いプロンプトからブランドに合わせたビジュアルを生成でき、ミニマル・ヴィンテージ・エディトリアル・ネオン等キーワードを調整しながら赤・青基調はそのまま素早く検証が可能です。

パレットごとに複数パターン（ライトモード・ダークモード・ハイコントラスト等）を生成し、オーディエンスやプラットフォームで最も読みやすい組み合わせを見つけましょう。

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