Back to palettes

Palette

Azure Reef Dreams

A joyful burst of oceanic blues, greens, and corals, inspired by the colorful life of a vibrant coral reef.

vibrantplayful5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Azure Reef Dreams 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 Azure Reef Dreams.

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

Data visualization

#4ECDC4#C7F464#FF6B6B#FFE66D#1A535C

Palette guide

How to use Azure Reef Dreams

Overview

The Azure Reef Dreams palette is a joyful burst of oceanic blues, greens, and corals, inspired by the colorful life of a vibrant coral reef. It features the lively turquoise of #4ECDC4, the energetic lime green of #C7F464, the playful coral red of #FF6B6B, the sunny yellow of #FFE66D, and a grounding deep teal in #1A535C. Designers and developers will find this palette exhilarating for projects that demand dynamism, playfulness, and a strong connection to tropical life. Its unexpected yet harmonious blend of vibrant cool and warm tones provides ample opportunity for creating captivating visuals and energetic user experiences.

Best used for

  • Children's educational apps (nature)
  • Tropical resort branding
  • Summer fashion collections
  • Food and beverage (exotic)
  • Creative agency portfolios
  • Event promotion (festive/tropical)

Suggested color roles

primary

#4ECDC4 serves as a vibrant and inviting primary, ideal for main calls to action, brand logos, or important headers.

secondary

#1A535C provides a deep, grounding secondary, suitable for subheadings, navigation, or foundational elements.

accent

#FF6B6B delivers a bold, playful accent, perfect for high-impact calls to action, interactive elements, or eye-catching details.

background

#FFE66D creates a warm, sunny backdrop, ensuring content clarity and a lively, inviting feel.

text

Use #1A535C or black for body text on #FFE66D or #C7F464 backgrounds for optimal legibility.

Accessibility notes

  • Ensure #1A535C text on #FFE66D backgrounds meets WCAG AA contrast standards.
  • Exercise caution with #C7F464 and #FF6B6B for text; ensure sufficient contrast on any background.
  • Use #1A535C or #4ECDC4 for critical interactive elements, and #FF6B6B for key calls to action.
  • Avoid placing #C7F464 directly on #FFE66D for text due to low contrast.

Recommended combinations

Tropical Burst

Creates a vibrant, energetic gradient, ideal for hero sections or playful visual elements.

#FFE66D · #FF6B6B · #4ECDC4

Reef Life

Excellent for creating depth and contrast, moving from deep teal to vibrant green.

#1A535C · #4ECDC4 · #C7F464

Playful Contrast

A striking trio for clear visual hierarchy, combining a deep primary with a warm background and bold accent.

#1A535C · #FFE66D · #FF6B6B

CSS variables

:root {
  --azure-reef-dreams-1: #4ECDC4;
  --azure-reef-dreams-2: #C7F464;
  --azure-reef-dreams-3: #FF6B6B;
  --azure-reef-dreams-4: #FFE66D;
  --azure-reef-dreams-5: #1A535C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-reef-dreams": {
        1: "#4ECDC4",
        2: "#C7F464",
        3: "#FF6B6B",
        4: "#FFE66D",
        5: "#1A535C",
      }
    }
  }
}

Related searches

vibrant coral reef palettetropical blue green red colorsplayful ocean web designenergetic marine schemecolorful reef branding

Palette colors

Hex values

Color 1#4ECDC4
·
Color 2#C7F464
·
Color 3#FF6B6B
·
Color 4#FFE66D
·
Color 5#1A535C
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1.4:1Fail
1.5:1Fail
4.5:1AA18
2
1.5:1Fail
2.2:1Fail
1:1Fail
6.8:1AA
3
1.4:1Fail
2.2:1Fail
2.2:1Fail
3.1:1AA18
4
1.5:1Fail
1:1Fail
2.2:1Fail
6.9:1AA
5
4.5:1AA18
6.8:1AA
3.1:1AA18
6.9:1AA

Similar palettes

More like Azure Reef Dreams

View all vibrant
Coral Reef Symphony
Dragon Fruit Burst
Dragonfruit Sparkle
Exotic Feather Plumes
Exotic Feather Splendor
Exotic Fruit Basket