Back to palettes

Palette

Coral Lagoon Whisper

A bright, inviting blend of pinks, oranges, and teals, like a sunlit coral reef under a clear lagoon.

vibrantnatural5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coral Lagoon Whisper 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 Lagoon Whisper.

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

Data visualization

#F29595#FAD7A0#AADCE2#7FBBCF#5789A5

Palette guide

How to use Coral Lagoon Whisper

Overview

The Coral Lagoon Whisper palette is a delightful fusion of soft, inviting corals and serene, cool blues, reminiscent of a peaceful underwater world. The gentle pinkish-coral #F29595 and warm peach #FAD7A0 provide a friendly, approachable feel, perfectly complemented by the refreshing teals and blues like #AADCE2, #7FBBCF, and the deeper #5789A5. This palette is excellent for designers and developers seeking to create a balanced, harmonious, and natural aesthetic. It's versatile for branding, web design, or digital illustrations that need to evoke a sense of calm, natural beauty, and subtle vibrancy.

Best used for

  • Eco-friendly or sustainable brand identities
  • Nature-inspired wellness and beauty products
  • Coastal living or travel blogs
  • Children's clothing or toy brands
  • Relaxing spa or therapy service websites
  • Soft, inviting e-commerce platforms

Suggested color roles

primary

Use #F29595 as a warm, inviting primary color for banners, headers, or prominent UI elements.

secondary

Apply #7FBBCF for secondary sections, navigation, or to introduce a refreshing, calming contrast.

accent

Highlight key calls-to-action or important information with #5789A5, providing a deeper, grounding accent.

background

Utilize #AADCE2 for light, airy backgrounds, creating a soft, expansive canvas for content.

text

For body text, a dark grey or deep teal (e.g., #333333 or #3A5A6A) is recommended. White text works well on #5789A5.

Accessibility notes

  • Ensure sufficient contrast when using #5789A5 for text against lighter backgrounds like #FAD7A0 or #AADCE2.
  • The lighter coral and peach shades (#F29595, #FAD7A0) may have insufficient contrast with white text; always use dark text.
  • When using #AADCE2 for a background, ensure text color is dark enough to meet WCAG contrast guidelines.
  • Distinguish interactive elements clearly, as the subtle shifts between #AADCE2 and #7FBBCF might be too close for some.

Recommended combinations

Natural Flow UI

Creates a balanced, inviting interface with clear visual hierarchy.

#AADCE2 · #F29595 · #5789A5

Sunset Lagoon

Ideal for creating warm, serene backgrounds or visual narratives.

#FAD7A0 · #F29595 · #7FBBCF

Coastal Accents

Highlights important information or features with a blend of natural tones.

#AADCE2 · #5789A5 · #FAD7A0

CSS variables

:root {
  --coral-lagoon-whisper-1: #F29595;
  --coral-lagoon-whisper-2: #FAD7A0;
  --coral-lagoon-whisper-3: #AADCE2;
  --coral-lagoon-whisper-4: #7FBBCF;
  --coral-lagoon-whisper-5: #5789A5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coral-lagoon-whisper": {
        1: "#F29595",
        2: "#FAD7A0",
        3: "#AADCE2",
        4: "#7FBBCF",
        5: "#5789A5",
      }
    }
  }
}

Related searches

coral blue nature palettesoft vibrant ocean colorsnatural harmonious color schemecoastal inspired web designmuted tropical palette

Palette colors

Hex values

Color 1#F29595
·
Color 2#FAD7A0
·
Color 3#AADCE2
·
Color 4#7FBBCF
·
Color 5#5789A5
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
1.5:1Fail
1:1Fail
1.7:1Fail
2
1.6:1Fail
1.1:1Fail
1.5:1Fail
2.8:1Fail
3
1.5:1Fail
1.1:1Fail
1.4:1Fail
2.5:1Fail
4
1:1Fail
1.5:1Fail
1.4:1Fail
1.8:1Fail
5
1.7:1Fail
2.8:1Fail
2.5:1Fail
1.8:1Fail

Similar palettes

More like Coral Lagoon Whisper

View all vibrant