Back to palettes

Palette

Coral Lagoon Harmony

A cheerful and vibrant blend of minty greens and coral oranges, inspired by bustling tropical lagoons.

vibrantplayful5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#7FFFD4#FF7F50#F0F8FF#40E0D0#DAA520

Palette guide

How to use Coral Lagoon Harmony

Overview

The Coral Lagoon Harmony palette is a lively and eclectic mix, capturing the vibrant energy of a tropical paradise. It skillfully combines a bright aquamarine #7FFFD4 (Aquamarine) and a vivid turquoise #40E0D0 (Turquoise) with the warm, inviting tones of #FF7F50 (Coral) and a sunny #DAA520 (Goldenrod). The inclusion of a crisp, almost-white #F0F8FF (Alice Blue) provides a clean canvas to balance the bolder hues. This palette is perfect for designers and developers aiming for a cheerful, exotic, and playful aesthetic, ideal for projects related to travel, tropical themes, or anything needing a burst of joyful color.

Best used for

  • Tropical resort or travel agency branding
  • Summer event promotions and invitations
  • Children's educational apps or games
  • Food and beverage packaging (e.g., juice, snacks)
  • Beachwear or swimwear fashion lines
  • Creative personal blogs or portfolios

Suggested color roles

primary

Use #FF7F50 as a cheerful, energetic primary for headers, hero sections, or prominent calls-to-action.

secondary

Apply #7FFFD4 or #40E0D0 for secondary elements, navigation, or to introduce a refreshing contrast to the coral.

accent

Highlight key features or interactive elements with #DAA520 for a sunny, attention-grabbing pop.

background

Utilize #F0F8FF for clean, expansive backgrounds, allowing the vibrant colors to truly stand out.

text

For body text, a dark grey or black (e.g., #222222) is essential. White text works well on #FF7F50 and #DAA520.

Accessibility notes

  • Ensure good contrast when pairing #FF7F50 or #DAA520 with #F0F8FF for text; white text is suitable on these.
  • Avoid using #7FFFD4 or #40E0D0 for small text on a white or light background, as contrast may be insufficient.
  • The vibrancy of #DAA520 can be intense; use it sparingly for accents rather than large text blocks.
  • Always check contrast for text on backgrounds; a light background like #F0F8FF needs very dark text for readability.

Recommended combinations

Tropical Splash

Creates a vibrant, eye-catching design for summer themes or playful interfaces.

#F0F8FF · #FF7F50 · #40E0D0

Sunny Accents

Highlights key information with bright, cheerful accents against a clean backdrop.

#7FFFD4 · #DAA520 · #F0F8FF

Exotic Harmony

Combines warm and cool tones for a balanced yet energetic visual appeal.

#FF7F50 · #7FFFD4 · #DAA520

CSS variables

:root {
  --coral-lagoon-harmony-1: #7FFFD4;
  --coral-lagoon-harmony-2: #FF7F50;
  --coral-lagoon-harmony-3: #F0F8FF;
  --coral-lagoon-harmony-4: #40E0D0;
  --coral-lagoon-harmony-5: #DAA520;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coral-lagoon-harmony": {
        1: "#7FFFD4",
        2: "#FF7F50",
        3: "#F0F8FF",
        4: "#40E0D0",
        5: "#DAA520",
      }
    }
  }
}

Related searches

tropical coral mint palettevibrant summer colorsplayful ocean theme palettebright exotic web designcheerful lagoon color scheme

Palette colors

Hex values

Color 1#7FFFD4
·
Color 2#FF7F50
·
Color 3#F0F8FF
·
Color 4#40E0D0
·
Color 5#DAA520
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
1.1:1Fail
1.3:1Fail
1.8:1Fail
2
2:1Fail
2.3:1Fail
1.5:1Fail
1.1:1Fail
3
1.1:1Fail
2.3:1Fail
1.5:1Fail
2.1:1Fail
4
1.3:1Fail
1.5:1Fail
1.5:1Fail
1.4:1Fail
5
1.8:1Fail
1.1:1Fail
2.1:1Fail
1.4:1Fail

Similar palettes

More like Coral Lagoon Harmony

View all vibrant