Back to palettes

Palette

Oceanic Reef Delight

A joyful explosion of bright teals and aquas, inspired by the diverse, colorful life of a vibrant coral reef.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Oceanic Reef Delight 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 Oceanic Reef Delight.

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

Data visualization

#00CED1#66CDAA#20B2AA#40E0D0#00FA9A

Palette guide

How to use Oceanic Reef Delight

Overview

The Oceanic Reef Delight palette is a vibrant celebration of tropical waters, brimming with bright teals and aquas. Featuring the luminous #00CED1, the refreshing #66CDAA, and the energetic #20B2AA, alongside the dazzling #40E0D0 and #00FA9A, this collection radiates joy and vitality. It's an excellent choice for designers and developers looking to inject projects with a lively, energetic, and playful spirit. The palette is particularly effective for creating designs that evoke tropical paradises, youthful exuberance, or dynamic, engaging digital experiences.

Best used for

  • Tropical resort and travel branding
  • Children's product packaging and websites
  • Summer event promotions and marketing
  • Interactive educational apps and games
  • Fashion and swimwear collections
  • Health and fitness app interfaces

Suggested color roles

primary

Use #00CED1 as a lively primary color for main sections or prominent brand elements, establishing a bright tone.

secondary

Apply #20B2AA for supporting content blocks, navigation, or secondary headings, maintaining vibrancy.

accent

Highlight calls to action or key interactive features with #00FA9A or #40E0D0 to ensure maximum impact and energy.

background

The softer #66CDAA can serve as a refreshing background for content, providing a subtle base for brighter elements.

text

For optimal readability, use a dark charcoal or black text on any of these bright colors. White text may struggle for contrast.

Accessibility notes

  • All colors in this palette are very bright; use dark text (black or charcoal) for optimal contrast.
  • Avoid using light-colored text on these hues, as it will likely fail WCAG contrast requirements.
  • Ensure sufficient contrast for interactive elements, especially if they rely on color alone for distinction.
  • Consider using larger font sizes for text on these vibrant backgrounds to improve readability.

Recommended combinations

Reef Shimmer

Creates a shimmering, dynamic, and energetic aquatic feel, ideal for headers or hero sections.

#00CED1 · #20B2AA · #40E0D0

Tropical Splash

Emphasizes freshness and vibrant life, perfect for playful and engaging content.

#00FA9A · #66CDAA · #00CED1

Aqua Spectrum

Offers a harmonious gradient of teals and aquas, suitable for backgrounds or data visualization.

#20B2AA · #40E0D0 · #66CDAA

CSS variables

:root {
  --oceanic-reef-delight-1: #00CED1;
  --oceanic-reef-delight-2: #66CDAA;
  --oceanic-reef-delight-3: #20B2AA;
  --oceanic-reef-delight-4: #40E0D0;
  --oceanic-reef-delight-5: #00FA9A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-reef-delight": {
        1: "#00CED1",
        2: "#66CDAA",
        3: "#20B2AA",
        4: "#40E0D0",
        5: "#00FA9A",
      }
    }
  }
}

Related searches

vibrant teal aqua palettetropical reef colorsbright ocean design schemeenergetic marine palettelively blue green branding

Palette colors

Hex values

Color 1#00CED1
·
Color 2#66CDAA
·
Color 3#20B2AA
·
Color 4#40E0D0
·
Color 5#00FA9A
·

Accessibility

Contrast checker

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

Similar palettes

More like Oceanic Reef Delight

View all vibrant