ホワイト＆レッドの配色一覧｜おすすめの組み合わせとHEXコード

白と赤は、時代を超えた組み合わせです。白はレイアウトを清潔で読みやすく保ち、赤は瞬時にエネルギーと注目を加えます。両者が合わさることで、現代的かつ印象的な高コントラストのデザインが生まれます。

以下に、ブランド、UI、印刷、イベント、季節キャンペーンで使える20の厳選された白赤カラーパレット（HEXコード付き）を紹介します。さらに、補助色の選び方や、素早くビジュアルを生成するコツも掲載しています。

白赤パレットが優れて機能する理由

白は空間と明瞭さ、“白紙”の感覚を生み、コンテンツを読みやすくします。赤は自然に視線を引き付けるため、小さなアクセントでも重要な要素へと誘導できます。

この組み合わせはスタイルにも適応しやすく、ミニマルなテックインターフェースから華やかなホリデーグラフィックまで、赤の強さを調整すればインパクトや上品な雰囲気を作り出せます。

実用的に、白赤パレットはデジタル・印刷の両方で発色良く再現できます。彩度やコントラストを管理すれば、オフホワイトや深い赤を組み合わせて大胆でありながら、強すぎない印象に仕上げられます。

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

1) スノードロップスカーレット

HEX： #ffffff #f5f1ef #d72638 #7a0c17 #d9c7c2

雰囲気： 清潔、シャープ、自信

最適な用途： ブランドアイデンティティ、ステーショナリー

シャープな白で新しい紙のような感覚、スカーレットが強く自信のあるアクセントを演出します。ロゴやレターヘッド、ミニマルなパッケージに最適で、一つの主役のアクセントが全体の雰囲気を引き立てます。深いワインカラーは細いルールや小さなタイポグラフィと組み合わせれば、ページを圧迫しません。コツ：最も明るい赤はアクション用に残し、残りは柔らかなオフホワイトでバランスを保ちましょう。

media.ioで生成したスノードロップスカーレットの画像例

Media.io

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

今すぐ無料で試す

2) フロステッドチェリー

HEX： #fff7f7 #ffe1e6 #ff3b5c #b3122d #f2c7cf

雰囲気： ロマンチック、ツヤ感、遊び心

最適な用途： 結婚式の招待状、ブライダルイベント

柔らかいブラッシュとフロストピンクはバラの花びらや華やかなお菓子を感じさせます。明るいチェリーカラーは名前やモノグラム、小さな装飾的なディテールに最適で、重くなりません。レイアウトは余白を多く取り、ダークレッドを細縁で構造にエコーしましょう。コツ：ブラッシュカラーはテクスチャー紙に印刷し、大胆な赤は一本のフォーカルラインに。

media.ioで生成したフロステッドチェリーの画像例

3) ミニマルルージュ

HEX： #ffffff #f2f2f2 #e63946 #1f1f1f #f7d6d9

雰囲気： モダン、エディトリアル、高コントラスト

最適な用途： ダッシュボードUI、SaaSランディングページ

白紙の上に強い赤は、現代誌の大胆な見出しのよう。インターフェースはほとんどニュートラルにし、赤は主にアクションや警告、ハイライトに使うと効果的です。テキストやアイコンにはチャコールを使うことで読みやすさが増します。コツ：赤はメインボタンのスタイル一つに絞り、淡いピンク系はホバーや選択など穏やかな状態用に。

media.ioで生成したミニマルルージュの画像例

4) ポピーリネン

HEX： #fffaf0 #f2e4d8 #ff2d2d #9b1c1c #c9b0a6

雰囲気： 温かみ、素朴、ウェルカミング

最適な用途： レストランメニュー、カフェポスター

クリーミーなリネンニュートラルとポピーの赤は、手描きサインのある居心地良いビストロのような印象。暖かいオフホワイトはテキストの大きなブロックに、明るい赤はセクションヘッダーや価格の強調に使えます。深い赤は区切りやフッターで重みを出し、レイアウトを安定させます。コツ：背景は純白より少し暖かい色味にすると印刷で赤がより鮮やかになります。

media.ioで生成したポピーリネンの画像例

5) クランベリークリーム

HEX： #fffefe #f8e9ea #c1121f #780000 #ead7d7

雰囲気： プレミアム、ぬくもり、贅沢感

最適な用途： スキンケアパッケージ、商品広告

クリーミーな白とクランベリーの赤は豊かさや心地良さ、少し高級感を感じさせます。淡いピンクニュートラルをラベルのメインに使い、商品名には濃い赤でプレミアムな印象を演出。最も深い色はシールや小さなバッジ、素材表記にぴったりです。コツ：クリーム系にはマット仕上げ、赤のタイポグラフィにはスポットグロスでコントラストを強調しましょう。

media.ioで生成したクランベリークリームの画像例

6) ローズクォーツミルク

HEX： #fffdfb #fbe0e6 #ff4d6d #ffcad4 #b21e35

雰囲気： 柔らかさ、軽やかさ、前向き

最適な用途： 春のイラスト、SNSグラフィック

ミルクのような白とローズトーンは春の光と新しい花のイメージ。明るいピンクレッドは花びらやリボン、ステッカースタイルのラベルなど小さなハイライトに最適です。淡いピンクはテキストの背面に使えば構成が優しくまとまります。コツ：濃いベリーカラーはポイント使いで、花の中心や見出しなどのフォーカルに。

media.ioで生成したローズクォーツミルクの画像例

7) バーガンディパール

HEX： #fcfbff #f0e7ee #a4161a #5e0b15 #c9c1c8

雰囲気： エレガント、ドラマティック、洗練

最適な用途： ワインラベル、上質なギフトボックス

パールのようなニュートラルとバーガンディでクラシカルかつキャンドルの灯りが映える洗練された雰囲気に。淡い色は余白や質感仕上げに、バーガンディはロゴやメインテキストを担います。最も濃い色は箔押しや細縁、カプセルディテールに最適です。コツ：タイポグラフィは少し凝縮して、深い赤を意図的に見せ重くならないよう調整されます。

media.ioで生成したバーガンディパールの画像例

8) ストロベリーショートケーキ

HEX： #ffffff #ffe8ea #ff1f3d #cc0022 #f7c3c9

雰囲気： 明るく、甘く、エネルギッシュ

最適な用途： ホリデー投稿、プロモーションバナー

クリーミーな色合いに鮮やかなイチゴレッドは、祭りのスイーツや賑やかな紙ふぶきのよう。白赤コンビは、価格や期間限定メッセージなど、瞬時のコントラストが欲しいSNS広告に輝きます。淡いピンクは大きな背景形状用、最も強い赤は見出しとボタンで一点使いが効果的。コツ：ピンク背景上の赤文字には細い白縁をつけるとモバイルでもシャープに見えます。

media.ioで生成したストロベリーショートケーキの画像例

9) ノルディックレッドアクセント

HEX： #f9fafb #e5e7eb #ef233c #8d99ae #2b2d42

雰囲気： クール、構造的、現代的

最適な用途： インテリアムードボード、現代プレゼンテーション

クールな白とブルーグレーは、スカンジナビアの部屋に映える赤いアクセントチェアのよう。グレーはチャートやレイアウトの穏やかな構造に使い、赤は強調や誘導として投入。深いネイビー色はヘッダーを引き締め、全体の成熟感を保ちます。コツ：赤は全体の10％程度のアクセントに抑えると空間が軽やかでモダンな印象になります。

media.ioを使って生成された北欧レッドアクセントのイメージ例

10）キャンディケンクラシック

HEX： #ffffff #fbe9ec #d00000 #9d0208 #f4c2c2

雰囲気： フェスティブ、ノスタルジック、ボールド

最適な用途： ギフトラップパターンやシーズンブランディング

明るいホワイトにクラシックなレッドを組み合わせると、キャンディケーンや冬のマーケット、ホリデーライトを彷彿とさせます。鮮やかなレッドはストライプやアイコンに、深いレッドはセカンダリーパターンに使うとデザインに奥行きが出ます。柔らかなピンクが繰り返しモチーフ間のトランジションを滑らかにし、特にリピート柄におすすめです。ポイント：パターンの間隔を広めにとり、レッドが遠目でちらついて見えないようにしましょう。

media.ioを使って生成されたキャンディケンクラシックのイメージ例

11）テラコッタチョーク

HEX： #fff8f4 #f0d9cf #d62828 #7f1d1d #b08968

雰囲気： アーシー、手作り感、居心地の良さ

最適な用途： 職人陶器やクラフトパッケージ

チョークのようなホワイトとテラコッタレッドが、焼かれた土や暖かなスタジオ棚を思わせます。ベージュやタンはニュートラルカラーとして、明るいレッドはスタンプやラベル、小さなイラストマークに使えます。深いマルーンは明るい背景の本文に最適で、ブラックより柔らかいコントラストが得られます。ポイント：無塗工紙や少しラフな線を試すことで、手作り感が増します。

media.ioを使って生成されたテラコッタチョークのイメージ例

12）ガーネットポーセリン

HEX： #ffffff #f3f4f6 #b80c09 #5a0002 #d7b7b7

雰囲気： クラシック、洗練、アサーティブ

最適な用途： 編集レイアウトや書籍カバー

磁器のようなホワイトとガーネットレッドは、クラシックな出版物や太字な表紙タイポグラフィを想起させます。白と赤のカラーパレットは、ページが明るく保たれ、赤がセクションの始まりにのみ使われる長文レイアウトにぴったりです。ブラックに近いワインカラーは、サブタイトルや引用文に使うと階層が保たれますが、強すぎるコントラストにはなりません。ポイント：余裕のあるマージンとセリフ体の見出しを組み合わせて編集的な雰囲気を強調しましょう。

media.ioを使って生成されたガーネットポーセリンのイメージ例

13）ブラッシュクリムゾンスタジオ

HEX： #fff5f7 #fde2e4 #ff0a54 #b7094c #2b2d42

雰囲気： クリエイティブ、パンチがある、スタイリッシュ

最適な用途： アプリのオンボーディングやマーケティング画面

ブラッシュグラデーションに鮮やかなクリムゾンを加えると、柔らかな紙にネオンインクが乗ったような印象になります。一番暗いネイビーは本文やナビゲーションに用いて、明るいトーンを遊び心いっぱいに保ち、アクセシビリティも損ないません。ホットレッドは全画面でプライマリーボタン色として最適です。ポイント：赤い要素の周りに十分な余白を設けることで、うるさくならずプレミアムな印象になります。

media.ioを使って生成されたブラッシュクリムゾンスタジオのイメージ例

14）ルビーコンクリート

HEX： #ffffff #f1f5f9 #e11d48 #334155 #cbd5e1

雰囲気： アーバン、スポーティー、ダイレクト

最適な用途： イベントフライヤーや告知

クールなホワイトとスレートカラーはコンクリートとスチールのような質感を与え、ルビーレッドがラウドスピーカーのように目立ちます。このような白×赤の配色はイベントの階層が明瞭で、ヘッドライン・日付・目立つバッジに最適です。本文や罫線にはスレートグレー、優先順位の高い情報にのみルビーを使いましょう。ポイント：赤が薄いグレーパネルでも読みやすいか、小さいサイズでもコントラストを必ず確認してください。

media.ioを使って生成されたルビーコンクリートのイメージ例

15）ワインコットン

HEX： #fffdfc #f2e8e4 #8b1e3f #3a0a0a #c7b0aa

雰囲気： ムーディー、親密、タイムレス

最適な用途： ファッションルックブックやブティックのブランディング

柔らかなコットンニュートラルとワインレッドは、ベルベットのカーテンや厳選されたワードローブのような印象です。明るい色味は写真の枠やキャプションの余白に、ワインはセクション区切りやカバーのタイトルに使うと効果的。ブラックだと強すぎる小さな文字も暗いワインなら美しく読めます。ポイント：ムードを暖かくするため、背景は純白でなく、ほんのりベージュがおすすめです。

media.ioを使って生成されたワインコットンのイメージ例

16）コーラルペーパー

HEX： #ffffff #fff1f2 #ff5d5d #d62828 #ffd6a5

雰囲気： フレンドリー、明るい、親しみやすい

最適な用途： ベーカリープロダクト広告やスモールビジネスプロモーション

コーラルレッドと柔らかなホワイトで、フレッシュなフロスティングや温かい輝きが感じられます。コーラルは元気な見出しに、深い赤はプライスタグやキープロダクト名に使います。ピーチアクセントは温かみを加え、バッジや背景シェイプにもぴったりです。ポイント：写真や商品のレンダリングは最小限に、暖色と競合しないようにしましょう。

media.ioを使って生成されたコーラルペーパーのイメージ例

17）桜コントラスト

HEX： #fffafa #ffe4e1 #e5383b #ba181b #f2b5d4

雰囲気： ロマンチック、鮮やか、フローラル

最適な用途： ボタニカルプリントや春の招待状

桜色×鮮烈なレッドは、明るい空に舞う花びらの印象です。ソフトなブラッシュは水彩のウォッシュに、強いレッドは花芯やタイポグラフィのアクセントに使います。ピンクの追加トーンはリボンや飾り罫線用のグラデーションにも便利。ポイント：レッドは小面積にとどめ、花のムードを軽やかに保ちましょう。

media.ioを使って生成された桜コントラストのイメージ例

18）赤い糸ニュートラル

HEX： #ffffff #f8fafc #dc2626 #64748b #e2e8f0

雰囲気： プロフェッショナル、落ち着き、明快

最適な用途： 企業向けスライド資料やレポート

クリーンなホワイトとソフトなグレーは信頼感があり、よく校正されたレポートのように1本の赤い糸が強調ポイントとして働きます。グレーブルーはグラフ、脚注、区切り線に使い、赤は重要な数値やセクションマーカーに。ライトグレーはテーブルの背景にも使いやすく、地味になりません。ポイント：赤は全スライドで一貫したハイライトに使い、認識力を高めましょう。

media.ioを使って生成された赤い糸ニュートラルのイメージ例

19）スカーレットタイポグラフィ

HEX： #fff7f0 #ffe0d6 #ff2e2e #111827 #f59e0b

雰囲気： ボールド、アーティスティック、ハイエナジー

最適な用途： タイポグラフィポスターやアルバムアート

スカーレットと暖かいニュートラルは、テクスチャーのある紙にスクリーン印刷インクを乗せたような雰囲気です。白×赤の配色は特にインパクトのあるタイポグラフィに最適で、ほぼ黒のレターとも好相性。アンバートーンは日付やステッカー、コーナーマークなどポイント使いでリズム感をアップします。ポイント：メイン見出しは黒またはダークで、レッドで補助ワードを目立たせましょう。

media.ioを使って生成されたスカーレットタイポグラフィのイメージ例

20）ベルベットレッドミニマル

HEX： #ffffff #f6f3f4 #c81d25 #6b0f1a #dcd2d6

雰囲気： スリーク、ラグジュアリー、ミニマル

最適な用途： ワイドなウェブサイトヒーローバナーや新製品ローンチ

ベルベットレッドとソフトホワイトは、スポットライトがシグネチャー商品を照らすような映画的でプレミアムな印象です。ペールなニュートラルで広々としたレイアウトを作り、主役としてベルベットレッドを1本のバーやボタン、見出しに据えます。深い色はセカンダリーテキストや細い罫線、小さなバッジに最適。ポイント：さりげないグラデーションとたっぷり余白で、ヒーローセクションを高級感ある雰囲気に。

media.ioを使って生成されたベルベットレッドミニマルのイメージ例

白赤と相性の良い色は？

ニュートラルはもっとも合わせやすい色です。チャコール、スレート、ウォームグレー、ソフトベージュは赤の強さを落ち着かせつつ、全体を洗練された印象にまとめます。シャープでモダンな雰囲気が欲しいなら、白×赤にクールグレーや黒に近いタイポグラフィを組合わせて。

暖かみのあるライフスタイル感なら、ブラッシュ・ピーチ・タン・クリーミーなオフホワイトを。コントラストが和らぎ、赤が印刷物でさらにリッチに見えます。反対にエディトリアルやスポーツ系のシャープさを加えたいときは、ネイビーやディープブルーグレーで見出しや長文をしっかり締めましょう。

3色目のアクセントが必要な場合はごく控えめに。プレミアムなハイライトにはゴールドやアンバー、柔らかな背景やホバーステートには淡いピンクがおすすめです。狙いは「赤」を“信号色”として保つこと、意味をもたせ続けることです。

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

レイアウトは白（またはオフホワイト）ベースから始め、どこに赤を目立たせるか決めましょう。プライマリーボタン、セールバッジ、警告、キーヘッディングなど、全体の構成で赤を目立たせる分量は少なめを心がけて、視線疲労を防ぎましょう。

メインレッド1色＋ダークレッド1色で階層をつけます。明るい赤はCTA（コールトゥアクション）向き、深い赤は仕切り線やラベル、ブラックだと強すぎるタイポグラフィでサポートに。

最後に、デバイスや印刷でコントラストを必ずチェック。赤は彩度が変化しやすいので、小さな文字サイズやボタンのアクセシビリティに注意し、印刷では暖かなホワイトを使って冷たすぎる見た目を避けましょう。

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

HEXコードがすでに決まっている場合は、モックアップを生成して用途に合わせたビジュアル（UI画面、パッケージ、ポスター、招待状、パターンなど）を素早く作成できます。

プロンプトには、レイアウトスタイル（ミニマル、エディトリアル、フェスティブ）、メディア種別（ベクター、スタジオ写真、水彩）と、どこに赤を使うか（ボタン、ストライプ、シール）を明記すると、AIが赤をアクセントカラーとして使いやすくなります。

Media.ioならバリエーション展開も簡単――レッドシェードの入替え、背景色の調整、ソーシャル/ウェブ/印刷用にアスペクト比を変えて量産できます。

次へ： グレーレッドのカラーパレット