Palette

Seaside Coral Garden

Soft, gentle hues found in a serene underwater garden, with delicate corals and calm water.

pastelcalm5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Seaside Coral Garden 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 Seaside Coral Garden.

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

Data visualization

#F2959D#F2B1B7#FDECEF#C1D0DA#A2B9C7

Palette guide

How to use Seaside Coral Garden

Overview

The Seaside Coral Garden palette offers a delicate collection of soft, gentle hues, reminiscent of a serene underwater garden with delicate corals and calm water. This pastel palette includes hex codes like #F2959D (Coral Pink), #F2B1B7 (Light Coral), #FDECEF (Near White), #C1D0DA (Pale Ocean Blue), and #A2B9C7 (Muted Ocean Blue). It's an exquisite choice for designers and developers aiming to create interfaces that are soft, feminine, and subtly vibrant. The harmonious blend of warm corals and cool blues, anchored by a very pale background, evokes a sense of tranquility and understated elegance, perfect for projects desiring a gentle yet captivating aesthetic.

Best used for

Baby product branding or children's apparel websites
Wedding invitations, event design, or bridal services
Skincare or beauty product packaging and marketing
Children's book illustrations or educational materials
Lifestyle blogs with a feminine, soft, or serene aesthetic
Spa or wellness clinic branding and digital presence

Suggested color roles

primary

Use #F2959D (Coral Pink) as a vibrant yet soft focal point, ideal for calls to action, important headings, or graphic accents.

secondary

Employ #A2B9C7 (Muted Ocean Blue) to provide a calming, cool contrast, suitable for navigation, secondary text, or background elements that need stability.

accent

Apply #F2B1B7 (Light Coral) for subtle highlights, hover states, or to add warmth without overwhelming the delicate design.

background

Utilize #FDECEF (Near White) as a very pale, warm background that provides a clean, delicate, and expansive canvas for all content.

text

A dark charcoal like #333333 or #A2B9C7 ensures good readability for main body text on #FDECEF. Use #F2959D for headings that require prominence.

Accessibility notes

Most pastel colors in this palette, especially #F2B1B7 and #C1D0DA, will require very dark text (e.g., black or dark charcoal) for readability.
#F2959D and #A2B9C7 will generally have good contrast against #FDECEF for larger text sizes.
Avoid using #F2B1B7 or #C1D0DA for small text on #FDECEF due to insufficient contrast, which can hinder readability.
Always check color combinations with a contrast checker to ensure WCAG AA compliance for all text and interactive elements.

Recommended combinations

Coral Reef

A warm, inviting combination perfect for hero sections, feminine branding, or elements requiring a soft, lively touch and gentle energy.

#F2959D · #F2B1B7 · #FDECEF

Ocean Depths

Creates a serene, watery ambiance, excellent for background layers, subtle borders, or information blocks where tranquility is key.

#A2B9C7 · #C1D0DA · #FDECEF

Undersea Bloom

A balanced blend of warm and cool, ideal for creating visual interest in infographics, product features, or social media graphics.

#F2959D · #A2B9C7 · #FDECEF

CSS variables

:root {
  --seaside-coral-garden-1: #F2959D;
  --seaside-coral-garden-2: #F2B1B7;
  --seaside-coral-garden-3: #FDECEF;
  --seaside-coral-garden-4: #C1D0DA;
  --seaside-coral-garden-5: #A2B9C7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "seaside-coral-garden": {
        1: "#F2959D",
        2: "#F2B1B7",
        3: "#FDECEF",
        4: "#C1D0DA",
        5: "#A2B9C7",
      }
    }
  }
}

Hex values

Color 1#F2959D

Color 2#F2B1B7

Color 3#FDECEF

Color 4#C1D0DA

Color 5#A2B9C7

Accessibility

Contrast checker

1.2:1Fail

1.9:1Fail

1.4:1Fail

1.1:1Fail

1.2:1Fail

1.6:1Fail

1.1:1Fail

1.9:1Fail

1.6:1Fail

1.4:1Fail

1.8:1Fail

1.4:1Fail

1.1:1Fail

1.4:1Fail

1.3:1Fail

1.1:1Fail

1.8:1Fail

1.3:1Fail

Similar palettes

More like Seaside Coral Garden

Seaside Coral Garden

See it in context.

Ready when you are.

Built with Seaside Coral Garden.

How to use Seaside Coral Garden

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Coral Reef

Ocean Depths

Undersea Bloom

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Seaside Coral Garden