Palette

Coral Garden Reef

A breathtaking dive into a vibrant coral reef, teeming with exotic colors and marine life.

vibrantplayful5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coral Garden Reef 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 Garden Reef.

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

Data visualization

#2B575D#5EA3A7#AADCDA#F5B099#F27863

Palette guide

How to use Coral Garden Reef

Overview

The Coral Garden Reef palette offers a breathtaking dive into a vibrant coral reef, teeming with exotic colors and marine life. Featuring deep #2B575D (Dark Teal) and #5EA3A7 (Seafoam Green), this collection provides designers with a dynamic and immersive range. The lighter #AADCDA offers a refreshing highlight, while the warm #F5B099 (Coral Peach) and #F27863 (Bright Coral) introduce a lively contrast, ensuring versatility. Developers can leverage these hues to create user interfaces that feel playful, sophisticated, and engaging, perfect for eco-tourism, marine conservation, or any project aiming for a vibrant and natural aesthetic. This palette is exceptionally versatile, blending cool tranquility with warm vibrancy, ideal for creating compelling and engaging digital experiences.

Best used for

tropical resort website design
marine life educational materials
eco-tourism branding
children's app interfaces
aquatic-themed product packaging
summer fashion collections

Suggested color roles

primary

#2B575D (Dark Teal) provides a strong, mysterious, and calming base, ideal for main headers, navigation, or deep background sections.

secondary

#5EA3A7 (Seafoam Green) offers a rich, cool complement, suitable for subheadings, secondary content blocks, or elegant branding elements.

accent

#F27863 (Bright Coral) acts as a vibrant, luminous highlight. Perfect for calls-to-action, interactive elements, or to draw attention to key information with a playful pop.

background

#AADCDA (Light Aqua) offers a versatile, light background that supports content with a subtle coolness and freshness.

text

#2B575D (Dark Teal) offers excellent readability against lighter colors like #AADCDA or #F5B099. For darker backgrounds, consider white or a near-white.

Accessibility notes

Ensure #2B575D text has high contrast against #AADCDA or #F5B099 for optimal readability, meeting WCAG AA standards.
Avoid using #5EA3A7 and #AADCDA for text and background combinations due to their similar luminosity.
When using #F27863 for text, pair it with a significantly dark background to ensure legibility, especially for small text.
Check contrast ratios for all interactive elements, ensuring they are clearly distinguishable against adjacent colors.

Recommended combinations

Reef Depths

Creates a serene, cool, and immersive brand identity, excellent for marine-themed logos and primary web sections.

#2B575D · #5EA3A7 · #AADCDA

Coral Pop

Ideal for vibrant accents and calls-to-action, bringing a lively and playful energy to content areas.

#F5B099 · #F27863 · #AADCDA

Dynamic Contrast

Effective for high-impact headlines or calls-to-action against a light background, providing clear hierarchy and vibrancy.

#2B575D · #F27863 · #5EA3A7

CSS variables

:root {
  --coral-garden-reef-1: #2B575D;
  --coral-garden-reef-2: #5EA3A7;
  --coral-garden-reef-3: #AADCDA;
  --coral-garden-reef-4: #F5B099;
  --coral-garden-reef-5: #F27863;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coral-garden-reef": {
        1: "#2B575D",
        2: "#5EA3A7",
        3: "#AADCDA",
        4: "#F5B099",
        5: "#F27863",
      }
    }
  }
}

Hex values

Color 1#2B575D

Color 2#5EA3A7

Color 3#AADCDA

Color 4#F5B099

Color 5#F27863

Accessibility

Contrast checker

2.8:1Fail

5.3:1AA

4.4:1AA18

2.9:1Fail

2.8:1Fail

1.9:1Fail

1.6:1Fail

1.1:1Fail

5.3:1AA

1.9:1Fail

1.2:1Fail

1.8:1Fail

4.4:1AA18

1.6:1Fail

1.2:1Fail

1.5:1Fail

2.9:1Fail

1.1:1Fail

1.8:1Fail

1.5:1Fail

Similar palettes

More like Coral Garden Reef

Tropical Reef Shimmer

Coral Reef Bloom

Coral Reef Symphony