Coral Color

Coral — The Color of Warmth and Vitality

#FF7F50Coral

Color Values

HEX#FF7F50

RGBrgb(255, 127, 80)

HSLhsl(16°, 100%, 66%)

CSScoral

Shade Palette

#FFF0EB

100

#FFD5C7

300

#FFA380

500

#FF7F50

700

#CC4A1A

900

#7A1F00

Complementary Color

↔

#007FAF

Cerulean

Analogous Colors

#FF6347

Tomato

#FFA07A

Light Salmon

CSS Usage

CSS

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

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

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

/* By HSL */
color: hsl(16deg, 100%, 66%);

/* With opacity */
color: rgba(255, 127, 80, 0.8);
color: hsl(16deg 100% 66% / 80%);

Coral (#FF7F50) may not meet WCAG AA contrast requirements on white backgrounds when used as text. Use darker variants like #E8572A or #CC4A1A for text, and reserve coral itself for backgrounds or decorative buttons.

Coral (#FF7F50) sits between red and orange, offering a warm, energetic, and friendly hue. Named after the vibrant colors of coral reefs, it conveys energy, playfulness, warmth, and creativity. Coral was named Pantone's Color of the Year for 2019 (Living Coral), bringing it wide attention in design. In UI design, coral works well for CTA buttons, highlighted text, and accent colors in lifestyle and consumer-facing products.