12 Shades of Coral with Hex Codes

Named Coral Colors and Their Hex Codes

Ordered darkest to lightest. Names marked CSS are color keywords you can write directly in a stylesheet; the rest are common design and print names. Select any swatch for its full breakdown.

CoralColor Chart: Hex, RGB, HSL & CMYK

Every coral above in all four common formats. CMYK is a mathematical approximation for planning; confirm production print colors with your printer and ICC profile.

Coral Scale from Light to Dark

A 12-step lightness scale built from the core coral hue, holding hue and saturation constant. This is the shape of a design-system color ramp. Select any swatch for the full breakdown of that color.

Need a perceptually even ramp with semantic roles and contrast evidence? Generate coral design tokens.

What Coral Communicates

Coral is the friendliest warm color available. It has orange's energy without its intensity and pink's warmth without its associations, which is why it became a default for consumer apps wanting to feel approachable. It also occupies a useful position for charts: coral stays distinguishable from both red and orange for most viewers.

Where coral works well

• Consumer apps and lifestyle brands wanting warmth without shouting
• Calls to action against teal or navy
• Chart series needing a warm hue distinct from pure red
• Summer and tropical palettes alongside turquoise

Colors that pair with coral

Copy the Coral Palette as CSS

Every shade on this page as CSS custom properties, ready to paste into a stylesheet.

:root {
  --coral-persimmon: #EC5800;
  --coral-deep-coral: #FF4040;
  --coral-tomato: #FF6347;
  --coral-living-coral: #FF6F61;
  --coral-lightcoral: #F08080;
  --coral-salmon: #FA8072;
  --coral-coral: #FF7F50;
  --coral-coral-pink: #F88379;
  --coral-darksalmon: #E9967A;
  --coral-papaya: #FF9E80;
  --coral-lightsalmon: #FFA07A;
  --coral-blush-coral: #FFB2A6;
}

Coral Color Questions