HomeColor Encyclopedia
Red · 💻 CSS

Red

#FF0000

A medium vivid red with warm undertones. CSS standard color "red", widely used in web design and development.

Generate palette with this color →

Emotion & Mood

Emotion
BalancedVibrantWarm
Mood
EnergeticDynamic

Personality & Symbolism

ConfidentStrongAssertive
Recommended Use

Suitable for accent colors and attention-grabbing elements.

Color Harmonies

Complementary
#ff0000
+
#00ffff
Split Complementary
#00ff80
#ff0000
#007fff
Darker Shades
Lighter Tints

Visual Analysis

Hue0°
Saturation100%
Lightness50%
This is a medium-toned color with high saturation. It falls in the red hue family (0°).

Technical Values

HEX#FF0000
RGBrgb(255, 0, 0)
HSLhsl(0, 100%, 50%)
CMYK0%, 100%, 100%, 0%
ContrastDark
CSSbackground: #ff0000;

Accessibility — WCAG Contrast

White Text Sample
The quick brown fox jumps.
4.00:1
AA AAA
Black Text Sample
The quick brown fox jumps.
5.25:1
AA AAA

WCAG 2.1 requires a contrast ratio of ≥4.5:1 for AA (normal text) and ≥7:1 for AAA. Best text color for this background: black (#000000).

Color Psychology

Color Temperature

This warm-toned color (hue 0°) triggers psychological responses associated with energy, comfort, and action. Warm colors appear to advance towards the viewer, making elements feel closer and more prominent.

Visual Weight

This mid-range lightness (50%) creates a balanced visual presence — neither heavy nor ethereal. It works well for both text and interactive elements.

Saturation Impact

The high saturation (100%) creates a vibrant, attention-demanding presence. Highly saturated colors are processed faster by the human brain — reaction time decreases by approximately 50ms compared to desaturated variants.

Design Applications

Food & Beverage

Stimulates appetite and conveys urgency — ideal for restaurant branding, food packaging, and sale promotions.

Health & Vitality

Represents life energy and passion — great for fitness brands, health apps, and wellness products.

CTAs & Accents

High saturation draws attention — use for primary buttons, notification badges, and important interactive elements.

Similar Colors

Greyish Gray (or Stony Grey)
#919191
Grayish Lavender
#998F8F
Dark Grayish Adamsite (Fictional name, based on the hex code)
#ADADAD
Light Greyish Beige
#E1DEDE
Light Beige
#FBF2F2
梅鼠 (Umenezumi)
#9E7A7A
鴇 (Toki)
#EEA9A9
鉛 (Namari)
#787878