Back to palettes

Palette

Coral Reef Serene

Soft, delicate colors found in a sun-drenched coral reef, peaceful and full of life under clear waters.

vibrantnatural5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coral Reef Serene 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 Serene.

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

Data visualization

#FF6F61#FF9B8C#FFCDB2#FFC0CB#E69A8D

Palette guide

How to use Coral Reef Serene

Overview

The Coral Reef Serene palette is a soft and delicate collection of pastel corals and pinks, evoking the peaceful beauty of a sun-drenched, tranquil underwater world. Featuring the gentle Living Coral #FF6F61, the rosy #FF9B8C, and the very light #FFCDB2, complemented by a soft Pink #FFC0CB and a muted Rosy Brown #E69A8D, this palette is perfect for designs that require a calm, natural, and inviting atmosphere. It's exceptionally well-suited for subtle branding, elegant web interfaces, or artistic projects that aim for a gentle, serene aesthetic.

Best used for

  • Spa and wellness branding
  • Baby product designs
  • Wedding invitations and decor
  • Delicate fashion accessories
  • Photography portfolios (soft focus)
  • Gentle skincare product packaging

Suggested color roles

primary

Use Living Coral #FF6F61 for key visual elements or headings that need a touch of warmth.

secondary

#E69A8D provides a slightly deeper tone for sub-sections or grounding elements.

accent

Soft Pink #FFC0CB can highlight delicate details or provide a gentle contrast.

background

#FFCDB2 is an excellent choice for a light, airy, and serene background.

text

A medium-dark gray or charcoal for body text, ensuring readability against the light colors.

Accessibility notes

  • All colors in this palette are very light; rely on dark text for contrast.
  • #FFCDB2 and #FFC0CB will have extremely poor contrast with white or light gray text.
  • Even #FF6F61 might not meet WCAG AA with white text for small font sizes.
  • Ensure sufficient contrast for all interactive elements and text.

Recommended combinations

Gentle Gradient

Ideal for soft backgrounds, subtle branding elements, or artistic illustrations.

#FF6F61 · #FF9B8C · #FFCDB2

Muted Harmony

Excellent for creating a cohesive, understated look in UI or print designs.

#FFC0CB · #E69A8D · #FF9B8C

Subtle Depth

Use for layered designs where a gentle distinction between elements is desired.

#FF6F61 · #E69A8D · #FFCDB2

CSS variables

:root {
  --coral-reef-serene-1: #FF6F61;
  --coral-reef-serene-2: #FF9B8C;
  --coral-reef-serene-3: #FFCDB2;
  --coral-reef-serene-4: #FFC0CB;
  --coral-reef-serene-5: #E69A8D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coral-reef-serene": {
        1: "#FF6F61",
        2: "#FF9B8C",
        3: "#FFCDB2",
        4: "#FFC0CB",
        5: "#E69A8D",
      }
    }
  }
}

Related searches

serene coral palettepastel ocean colorssoft pink peach schemetranquil reef designdelicate natural palette

Palette colors

Hex values

Color 1#FF6F61
·
Color 2#FF9B8C
·
Color 3#FFCDB2
·
Color 4#FFC0CB
·
Color 5#E69A8D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.9:1Fail
1.8:1Fail
1.2:1Fail
2
1.3:1Fail
1.4:1Fail
1.3:1Fail
1.1:1Fail
3
1.9:1Fail
1.4:1Fail
1.1:1Fail
1.6:1Fail
4
1.8:1Fail
1.3:1Fail
1.1:1Fail
1.5:1Fail
5
1.2:1Fail
1.1:1Fail
1.6:1Fail
1.5:1Fail

Similar palettes

More like Coral Reef Serene

View all vibrant