カラーコードとパレット
レッド系の色一覧
赤は行動、緊急性、愛情を連想させるエネルギッシュな色系統です。やわらかなローズのティントから深いバーガンディのシェードまでを収録し、UI、キャンペーン、ブランドシステムに活用できます。
レッド
#EF4444
カラー形式
同じベースカラーを主要な Web 形式で表しています。
濃淡
| カラー | 名前 | HEX | RGB | HSL | コピー |
|---|---|---|---|---|---|
| Rose | #FFF1F2 | 255, 241, 242 | 356, 100%, 97% | ||
| Light Pink | #FFE4E6 | 255, 228, 230 | 356, 100%, 95% | ||
| Blush | #FECDD3 | 254, 205, 211 | 353, 96%, 90% | ||
| Salmon Pink | #FDA4AF | 253, 164, 175 | 353, 96%, 82% | ||
| Coral | #FB7185 | 251, 113, 133 | 351, 95%, 71% | ||
| Rose Red | #F43F5E | 244, 63, 94 | 350, 89%, 60% | ||
| Crimson | #E11D48 | 225, 29, 72 | 347, 77%, 50% | ||
| Ruby | #BE123C | 190, 18, 60 | 345, 83%, 41% | ||
| Burgundy | #9F1239 | 159, 18, 57 | 343, 80%, 35% | ||
| Maroon | #881337 | 136, 19, 55 | 342, 75%, 30% | ||
| Cherry | #FCA5A5 | 252, 165, 165 | 0, 94%, 82% | ||
| Tomato | #F87171 | 248, 113, 113 | 0, 91%, 71% | ||
| Red | #EF4444 | 239, 68, 68 | 0, 84%, 60% | ||
| Scarlet | #DC2626 | 220, 38, 38 | 0, 72%, 51% | ||
| Fire Red | #B91C1C | 185, 28, 28 | 0, 74%, 42% | ||
| Blood Red | #991B1B | 153, 27, 27 | 0, 70%, 35% | ||
| Dark Red | #7F1D1D | 127, 29, 29 | 0, 63%, 31% | ||
| Rust | #B45309 | 180, 83, 9 | 26, 90%, 37% | ||
| Brick | #9A3412 | 154, 52, 18 | 15, 79%, 34% | ||
| Wine | #7C2D12 | 124, 45, 18 | 15, 75%, 28% |
CSS キーワード: red
CSS ではキーワード red で指定できます。
文字のコントラスト
これらの比率は WCAG の相対輝度の式で計算しています。
Aa 白い文字 3.76:1
AA · 大きなテキスト
Aa 黒い文字 5.58:1
AA
レッドの使い方
メインの CTA とアラート
食品・スポーツ・エンタメのブランディング
ニュートラルな背景に映える暖色のアクセント
レッド と相性のよい色
#EF4444 をもとにした色相環の配色。スウォッチをクリックしてコピーするか、カラーホイールで開けます。