Palette

Coral Reef Play

A lighthearted and whimsical blend of soft corals, pinks, and creams, inspired by playful reef inhabitants.

pastelplayful5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FC6D7E#FF9B9B#FFC6AF#FFEBBE#E5F3B4

Palette guide

How to use Coral Reef Play

Overview

The Coral Reef Play palette is a lighthearted and whimsical collection, inspired by playful reef inhabitants and soft, tropical aesthetics. It features a delightful blend of pastel and soft tones, starting with a bright pink coral, #FC6D7E, which offers a gentle pop of color. This is beautifully complemented by a delicate light pink, #FF9B9B, and a warm peach, #FFC6AF, creating an inviting and tender feel. An airy cream, #FFEBBE, provides a soft, neutral base, while a refreshing pale lime, #E5F3B4, introduces a subtle, unexpected touch of natural freshness. This palette is ideal for projects seeking a comforting, playful, and subtly energetic feel.

Best used for

Baby and children's product branding
Pastel-themed wedding stationery
Boutique fashion for spring/summer
Sweet treat packaging and bakery branding
Soft, inviting web and mobile app interfaces
Illustration for whimsical stories

Suggested color roles

primary

#FC6D7E - Use this bright pink coral for main calls-to-action, prominent headings, or key brand elements to convey playfulness and warmth.

secondary

#FF9B9B - A soft light pink, excellent for supporting graphical elements, subheadings, or as a background for lighter, inviting sections.

accent

#E5F3B4 - This refreshing pale lime provides a subtle, unexpected accent, ideal for small interactive elements or to add a touch of natural freshness.

background

#FFEBBE - A very airy cream, perfect for clean, serene backgrounds that allow other colors to stand out gently without overwhelming the user.

text

#FC6D7E - For body text, the bright pink coral can work against very light backgrounds. Consider dark charcoal for general body text or a very dark brown/black for contrast on lighter elements.

Accessibility notes

Ensure sufficient contrast when using #FF9B9B, #FFC6AF, #FFEBBE, or #E5F3B4 for text against similar light backgrounds.
#FC6D7E (bright pink coral) may require darker text (e.g., dark charcoal or black) for optimal readability.
Avoid using lighter palette colors like #FFEBBE or #E5F3B4 for small text due to potential low contrast.
For text on #FFEBBE, consider #FC6D7E or a dark charcoal for better legibility.

Recommended combinations

Playful Dawn

Ideal for soft, inviting headers or hero sections, blending warm pinks with a gentle, airy cream backdrop.

#FC6D7E · #FF9B9B · #FFEBBE

Reef Whimsy

Effective for creating a playful and fresh feel, using peach and lime with a coral accent for vibrancy.

#FFC6AF · #E5F3B4 · #FC6D7E

Gentle Drift

Perfect for soft, harmonious UI elements or subtle backgrounds, offering a calm and comforting feel.

#FFEBBE · #FFC6AF · #FF9B9B

CSS variables

:root {
  --coral-reef-play-1: #FC6D7E;
  --coral-reef-play-2: #FF9B9B;
  --coral-reef-play-3: #FFC6AF;
  --coral-reef-play-4: #FFEBBE;
  --coral-reef-play-5: #E5F3B4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coral-reef-play": {
        1: "#FC6D7E",
        2: "#FF9B9B",
        3: "#FFC6AF",
        4: "#FFEBBE",
        5: "#E5F3B4",
      }
    }
  }
}

Hex values

Color 1#FC6D7E

Color 2#FF9B9B

Color 3#FFC6AF

Color 4#FFEBBE

Color 5#E5F3B4

Accessibility

Contrast checker

1.4:1Fail

1.8:1Fail

2.3:1Fail

1.4:1Fail

1.3:1Fail

1.7:1Fail

1.8:1Fail

1.3:1Fail

2.3:1Fail

1.7:1Fail

1.3:1Fail

1:1Fail

2.3:1Fail

1.7:1Fail

1.3:1Fail

1:1Fail

Similar palettes

More like Coral Reef Play

Coral Reef Play

See it in context.

Ready when you are.

Built with Coral Reef Play.

How to use Coral Reef Play

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Playful Dawn

Reef Whimsy

Gentle Drift

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coral Reef Play