Back to palettes

Palette

Tropical Reef Shimmer

An explosion of clear, effervescent colors, mirroring the lively fish and vibrant corals of a sunlit tropical reef.

vibrantplayful5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Tropical Reef Shimmer 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 Tropical Reef Shimmer.

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

Data visualization

#00CED1#48D1CC#20B2AA#7FFFD4#66CDAA

Palette guide

How to use Tropical Reef Shimmer

Overview

The Tropical Reef Shimmer palette offers an explosion of clear, effervescent colors, mirroring the lively fish and vibrant corals of a sunlit tropical reef. This palette is rich in refreshing aquas and teals, featuring a vibrant dark turquoise #00CED1, a slightly lighter medium turquoise #48D1CC, and a balanced light sea green #20B2AA. Completing the shimmering spectrum are a bright aqua marine #7FFFD4 and a soft medium aquamarine #66CDAA. It’s an excellent choice for designs that aim to be playful, refreshing, and full of life, perfect for dynamic branding or engaging user interfaces. Designers can leverage its harmonious cool tones, while developers will find clear distinctions for interactive elements.

Best used for

  • Playful children's products or services
  • Summer and beach-themed digital content
  • Casual gaming interfaces and assets
  • Refreshing beverage or snack branding
  • Interactive educational platforms
  • Social media graphics with a lively feel

Suggested color roles

primary

Use #00CED1 (Dark Turquoise) for main calls-to-action or prominent headings, establishing a vibrant and inviting focal point.

secondary

Apply #48D1CC (Medium Turquoise) for subheadings, navigation, or supporting information, maintaining a fresh and clear tone.

accent

Utilize #7FFFD4 (Aquamarine) sparingly for interactive elements, hover states, or small details that need a bright, sparkling pop.

background

Employ #66CDAA (Medium Aquamarine) as a soft, harmonious background, providing a subtle depth that complements the brighter hues.

text

For dark text, a deep teal like #0A5A5C works on #66CDAA. Pure white offers excellent readability on #00CED1, #48D1CC, #20B2AA, and #7FFFD4.

Accessibility notes

  • Ensure sufficient contrast when using #66CDAA as a background, especially with lighter text; dark text is generally preferred.
  • The subtle differences between #7FFFD4 and #66CDAA might be challenging for users with color vision deficiencies; use them thoughtfully.
  • White text on #00CED1, #48D1CC, and #20B2AA provides good contrast for headings and important information.
  • Avoid using #7FFFD4 as a primary text color due to its lightness and potential for low contrast.

Recommended combinations

Vibrant Depths

Creates a rich, layered aquatic feel, suitable for main sections, backgrounds, or branding that emphasizes depth and clarity.

#00CED1 · #20B2AA · #66CDAA

Shimmering Highlights

Ideal for interactive elements, feature showcases, or decorative accents, bringing a sparkling and lively energy.

#7FFFD4 · #48D1CC · #00CED1

Soft Reef Glow

Perfect for subtle backgrounds, informational panels, or sections where a gentle, harmonious, and refreshing feel is desired.

#66CDAA · #20B2AA · #48D1CC

CSS variables

:root {
  --tropical-reef-shimmer-1: #00CED1;
  --tropical-reef-shimmer-2: #48D1CC;
  --tropical-reef-shimmer-3: #20B2AA;
  --tropical-reef-shimmer-4: #7FFFD4;
  --tropical-reef-shimmer-5: #66CDAA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tropical-reef-shimmer": {
        1: "#00CED1",
        2: "#48D1CC",
        3: "#20B2AA",
        4: "#7FFFD4",
        5: "#66CDAA",
      }
    }
  }
}

Related searches

shimmering ocean colorsplayful reef paletteaquatic brights designlively turquoise schemerefreshing cool tones

Palette colors

Hex values

Color 1#00CED1
·
Color 2#48D1CC
·
Color 3#20B2AA
·
Color 4#7FFFD4
·
Color 5#66CDAA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1:1Fail
1.3:1Fail
1.6:1Fail
1:1Fail
2
1:1Fail
1.4:1Fail
1.5:1Fail
1:1Fail
3
1.3:1Fail
1.4:1Fail
2.1:1Fail
1.4:1Fail
4
1.6:1Fail
1.5:1Fail
2.1:1Fail
1.6:1Fail
5
1:1Fail
1:1Fail
1.4:1Fail
1.6:1Fail

Similar palettes

More like Tropical Reef Shimmer

View all vibrant
Aqua Coral Garden
Coral Garden Reef
Coral Lagoon Harmony
Coral Reef Shimmer
Ocean Reef Shimmer
Underwater Coral Garden