赤は何を表す？
赤は次のような概念と関連づけられることが多いです。
- エネルギー
- 情熱
- 愛
- 力
- 権力
- 行動
- 勇気
- 危険
- 緊急性
- 感情
意味は文化や文脈で変わりますが、ほぼ世界中で瞬時に注意を引く色です。
赤色とは？
赤は可視スペクトルの中で最も強く、目を引く色の一つです。エネルギー、情熱、行動、力と結びつきます。
注目を強く集めるため、重要な要素の強調、CTAの作成、感情の即時伝達によく使われます。
赤の色彩心理
色彩心理では、赤は最も強い感情反応を引き起こす色の一つです。
熱意、決意、自信を伝えられますが、彩度が高いと緊急性や警告にもなります。
そのため、次の場面でよく見られます。
- 購入ボタン
- セールと割引
- スポーツ
- 食品
- 自動車
- テックブランド
- 警告サイン
- エディトリアルデザイン
デジタルUIでは、重要な操作、通知、他の内容から際立たせる必要がある要素に予約されることが多いです。
赤はどこで使われる？
赤はデジタルでも印刷でも最も使われる色の一つです。特に次の分野でよく見られます。
- ウェブデザイン
- モバイルアプリ
- コーポレートブランディング
- ロゴ
- 広告
- パッケージ
- ソーシャルメディア
- マーケティング
- ポスター
- サイン
注目を集める力があるため、ボタン、プロモーション、コンバージョン要素を目立たせるのに優れています。
赤のトーン
赤には膨大なニュアンスがあります。よく使われるトーンには次があります。
| 名前 | サンプル | Hex | RGB | HSL | OKLCH |
|---|---|---|---|---|---|
| IndianRed | |||||
| LightCoral | |||||
| Salmon | |||||
| Crimson | |||||
| FireBrick | |||||
| Red | |||||
| DarkRed | |||||
| Maroon | |||||
| Tomato | |||||
| Coral |
トーンごとに印象が異なります。鮮やかな赤はよりダイナミック、暗い赤は優雅さと洗練を加えます。
HTMLカラー赤と合う色
赤は主役の色ですが、他の色と組み合わせてバランスの取れた構図を作りやすいです。よくある組み合わせは次のとおりです。
- 白
#FFFFFF - 黒
#111111 - グレー
#9CA3AF - アイボリー
#FFFFF0 - ベージュ
#F5F5DC - ネイビー
#001F3F - ペトロールブルー
#0E4D5C - オリーブグリーン
#556B2F - ソフトピンク
#F8C8DC - ゴールド
#D4AF37
選択は目指すビジュアルスタイル次第です：モダン、エレガント、クラシック、または大胆。
赤の補色
赤の補色はMatizのカラーホイールと同じ計算（HSLで180°回転）で求めます。純赤（#FF0000）の結果はシアン（#00FFFF）です。補色の組み合わせはコントラストが非常に高く、重要な要素の強調、視覚的バランス、インパクトのある構図によく使われます。
Red#DC2626
#28DCDC
赤のカラーハーモニー
このページのハーモニーは、Matizのカラーホイールとパレットジェネレーターと同じロジック（HSL回転）を使います。よく使われるのは次のとおりです。
類似色
オレンジや赤オレンジなど近い色と赤を組み合わせ、暖かく自然な構図を作ります。
補色
赤と青緑を組み合わせ、最大の視覚コントラストを得ます。
分裂補色
補色の両隣の2色を使い、補色スキームのコントラストを保ちつつよりバランスの取れた結果にします。
三色
色相環上で均等に配置された3色の組み合わせ。イラスト、ブランディング、クリエイティブデザインでよく使われます。
四色
2組の補色ペアからなる4色を使い、複雑なプロジェクト向けの充実したパレットを作れます。
赤のバリエーション
バリエーションはMatizスタジオと同じ関数（HSL上のティント、トーン、シェード）で生成されます。よくあるのは次のとおりです。
ティント（白を加える）
トーン（グレーを加える）
シェード（黒を加える）
彩度のバリエーション
色のスケール
これらの調整により、視覚的一貫性を保ちながら同じ色をUIの異なる要素に適応できます。
赤のカラーパレット
赤ベースのパレットは、伴う色によってエネルギーから優雅さまで伝えられます。人気の組み合わせには次があります。
赤 + 白 + グレー
3 色
赤 + 黒 + シルバー
3 色
赤 + ベージュ + 茶
3 色
赤 + ネイビー + 白
3 色
赤 + ピンク + ボルドー
3 色
ウェブデザインでは、視覚的に強すぎる印象を避けるため、赤をニュートラルとバランスさせるのがおすすめです。
パレットコントラストとアクセシビリティ
テキストやボタンに赤を使うときは、背景とのコントラストを確認することが重要です。
WCAGのアクセシビリティ推奨に従うと、特に明るい／彩度の高いトーンでも、すべてのユーザーにとって読みやすくなります。
UIで色を使う前に、白背景と黒背景でのコントラスト比を確認するのがよいでしょう。
赤テキスト / 白背景
4.99:1AA ✓
白テキスト / 赤背景
4.99:1AA ✓
黒テキスト / コーラル背景
7.56:1AA ✓
赤テキスト / 黒背景
5.77:1AA ✓
赤のグラデーション
赤は豊かな色味のおかげでグラデーションに特に向いています。よくあるグラデーションは次のとおりです。
- 赤 → オレンジ
#FF0000 → #FF8C00 - 赤 → ピンク
#FF0000 → #FF69B4 - 赤 → 紫
#FF0000 → #8B008B - 赤 → ボルドー
#FF0000 → #7F1D1D - 赤 → 黒
#FF0000 → #111111
これらのグラデーションは背景、モダンなUI、強調要素でよく使われます。
グラデーションジェネレーターウェブデザインにおける赤
HEXコードを超えて、赤はUIで具体的な役割を持ちます。ボタン、状態、フォーム、ブランディングなど実際のコンポーネントでの働きを見てみましょう。
- CTAボタン
- エラー色
- 危険状態
- 背景
- テキスト
- フォーム
- ブランディング
- アクセシビリティ
よくある質問
赤はエネルギー、情熱、力、行動、主役感を象徴します。文脈によっては緊急性、危険、警告も表せます。
赤は白、黒、グレー、ネイビー、ベージュ、アイボリー、オリーブグリーン、ゴールドと特によく合います。
補色は青緑やシアンの範囲にあり、色相環で最も強いコントラストの一つを生みます。
CTAボタン、プロモーション、重要メッセージ、エラー表示、ブランディング、ユーザーの注意を素早く引く要素に使われます。