Coral Color — HEX, RGB, HSL, Palettes & Contrast

Coral (#ff7f50): Complete color reference with HEX, RGB, HSL values, tints & shades, complementary, analogous, triadic, split-complementary, and tetradic palettes, WCAG contrast recommendations, and ready-to-use CSS code.

#ff7f50
HEX #ff7f50
RGB rgb(255, 127, 80)
HSL 16°, 100%, 66%

Use Coral in Your Projects

🎨 Open in Color Picker 🌈 Generate Palette 👁️ Check Contrast 🔄 Convert Color 🌊 Use in Gradient

About Coral Color

Coral is a warm pink-orange hue that feels energetic yet friendly. It is widely used in summer-themed designs and social media graphics.

Use Cases for Coral

summer brandingsocial graphicsfriendly buttonstravel websitesfood apps

Shades & Tints of Coral

#ffffff
#ffdfd3
#ffbfa8
#ff9f7c
#ff7f50
#bf5f3c
#804028
#402014
#000000

Complementary Color

#ff7f50
#52d1ff

Analogous Colors

#ff527a
#ff7f50
#ffd752

Triadic Colors

#ff7f50
#52ff80
#8052ff

Split Complementary

#ff7f50
#52ffd7
#527aff

Tetradic Colors

#ff7f50
#d1ff52
#52d1ff
#8052ff

CSS Code

.coral-color {
  color: #ff7f50;
  background-color: #ff7f50;
}

/* As a CSS custom property */
:root {
  --color-coral: #ff7f50;
}

Accessibility Score

100 / 100
Rating: Excellent
✓ AA contrast on best text color (30 pts)
✓ AAA contrast on best text color (25 pts)
✓ Versatile lightness for backgrounds & text (25 pts)
✓ Not extreme black/white (20 pts)

A combined score based on WCAG contrast compliance, lightness versatility, and usable range. Higher scores mean the color works well in more design contexts.

Contrast Recommendations

Black text on Coral
Ratio: 8.4:1 ✓ Passes AA ✓ Passes AAA
White text on Coral
Ratio: 2.5:1 ✗ Fails AA ✗ Fails AAA

Related Colors

Tomato
Salmon
LightSalmon
DarkSalmon
PeachPuff

Related Tools

Frequently Asked Questions

What color is Coral?

Coral is represented by the hex code #ff7f50 and has RGB values of rgb(255, 127, 80). It falls under the Orange category.

How to use Coral in web design?

Coral works well for summer branding, social graphics, friendly buttons. Coral is a warm pink-orange hue that feels energetic yet friendly. It is widely used in summer-themed designs and social media graphics. Use it as a primary color, accent, or background depending on your design needs.

What colors go with Coral?

Colors that pair well with Coral include tomato, salmon, lightsalmon, darksalmon, peachpuff. For a complementary scheme, try #52d1ff. For an analogous scheme, use #ff527a and #ffd752. For a triadic scheme, combine with #52ff80 and #8052ff.