Red カラー

赤 — 緊急性とエネルギーの色

#FF0000Red

カラー値

HEX#FF0000

RGBrgb(255, 0, 0)

HSLhsl(0°, 100%, 50%)

CSSred

シェードパレット

#FFF5F5

100

#FED7D7

300

#FC8181

500

#F56565

700

#C53030

900

#742A2A

補色

↔

#00FFFF

Cyan

類似色

#FF4500

OrangeRed

#FF0080

Rose

CSS使用例

CSS

/* By name */
color: red;
background-color: red;

/* By HEX */
color: #FF0000;
background-color: #FF0000;

/* By RGB */
color: rgb(255, 0, 0);

/* By HSL */
color: hsl(0deg, 100%, 50%);

/* With opacity */
color: rgba(255, 0, 0, 0.8);
color: hsl(0deg 100% 50% / 80%);

純粋な赤(#FF0000)は彩度が高すぎてテキストに使うと目が疲れやすくなります。テキストには#DC2626や#EF4444のような少し暗いバリエーションを使うことをお勧めします。

赤(#FF0000)はRGBカラーモデルの純粋な赤で、人間の目が最も素早く認識する色の一つです。警告・危険・緊急性を直感的に伝えるため、エラーメッセージ、警告アイコン、CTAボタンに広く使われています。純粋な赤は彩度が非常に高いため、背景よりもアクセントカラーとして使うのが効果的です。コカ・コーラ、ネットフリックス、ユーチューブなど多くのグローバルブランドが赤を採用しています。

主な使用例

▸エラーメッセージと警告 — 問題を即座にユーザーに伝える
▸CTAボタン — '今すぐ購入'、'始める'などの行動喚起
▸通知バッジ — 未読件数の表示
▸必須フィールドの表示 — フォームの*マークとバリデーションエラー
▸ブランドアイデンティティ — コカ・コーラ、Netflix、YouTube
▸停止・キャンセル状態 — 無効化されたUI要素

Red カラー

CSS使用例

主な使用例

関連カラー