Palette

Coral Reef

Soft, muted corals and pinks reflecting the vibrant yet delicate ecosystem of an underwater reef.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coral Reef reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Coral Reef.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#FF7F50#FFB6C1#FFDAB9#F08080#E9967A

Palette guide

How to use Coral Reef

Overview

The Coral Reef palette is a warm and inviting collection of soft corals, pinks, and peaches, reflecting the gentle beauty of an underwater ecosystem. Featuring the vibrant yet tender #FF7F50 (Coral), delicate #FFB6C1 (Light Pink), and the creamy #FFDAB9 (Peach Puff), it's anchored by the slightly deeper #F08080 (Light Coral) and #E9967A (Dark Salmon). This palette is perfect for designers and developers seeking to evoke a sense of calm, warmth, and natural elegance. Its harmonious blend is ideal for feminine branding, soft UI designs, or any project aiming for a friendly, approachable, and comforting aesthetic.

Best used for

Feminine beauty and lifestyle brands
Wedding and event planning websites
Baby and children's apparel or products
Dessert shops and confectionery branding
Soft, inviting e-commerce platforms
Health and wellness blogs

Suggested color roles

primary

Use #FF7F50 as a warm, prominent primary for headings, call-to-action buttons, or key branded elements.

secondary

Apply #F08080 for secondary navigation, interactive elements, or as a slightly deeper shade for emphasis.

accent

Highlight important details or create a delicate pop with #FFB6C1, adding a touch of sweetness.

background

Utilize #FFDAB9 for light, airy backgrounds, providing a soft and welcoming canvas.

text

For body text, a dark brown or charcoal (e.g., #4A2C2C or #333333) is recommended. White text works well on #FF7F50 and #F08080.

Accessibility notes

Ensure sufficient contrast when using #FF7F50 or #F08080 for text against very light backgrounds like #FFDAB9.
Avoid using #FFB6C1 or #FFDAB9 for small text, as their lightness makes them difficult to read without very dark contrast.
White text on #FF7F50 and #F08080 generally provides good contrast.
When using these colors in UI, ensure hover and active states are clearly distinguishable, perhaps by a slight darkening or border.

Recommended combinations

Soft Elegance UI

Creates a gentle, sophisticated interface for feminine or wellness applications.

#FFDAB9 · #F08080 · #FF7F50

Warm Accents

Ideal for highlighting important information or adding a touch of warmth to designs.

#FFB6C1 · #E9967A · #FF7F50

Reef Gradient

Forms a subtle, natural gradient for backgrounds or large visual elements.

#FFDAB9 · #F08080 · #E9967A

CSS variables

:root {
  --coral-reef-2-1: #FF7F50;
  --coral-reef-2-2: #FFB6C1;
  --coral-reef-2-3: #FFDAB9;
  --coral-reef-2-4: #F08080;
  --coral-reef-2-5: #E9967A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coral-reef-2": {
        1: "#FF7F50",
        2: "#FFB6C1",
        3: "#FFDAB9",
        4: "#F08080",
        5: "#E9967A",
      }
    }
  }
}

Hex values

Color 1#FF7F50

Color 2#FFB6C1

Color 3#FFDAB9

Color 4#F08080

Color 5#E9967A

Accessibility

Contrast checker

1.5:1Fail

1.9:1Fail

1:1Fail

1.1:1Fail

1.5:1Fail

1.3:1Fail

1.6:1Fail

1.4:1Fail

1.9:1Fail

1.3:1Fail

2:1Fail

1.8:1Fail

1:1Fail

1.6:1Fail

2:1Fail

1.1:1Fail

1.4:1Fail

1.8:1Fail

1.1:1Fail

Similar palettes

More like Coral Reef

Coral Reef

See it in context.

Ready when you are.

Built with Coral Reef.

How to use Coral Reef

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Soft Elegance UI

Warm Accents

Reef Gradient

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coral Reef