Palette

Coral Reef

A dazzling array of colors found beneath the waves in a healthy, bustling tropical coral reef ecosystem.

vibrantnatural5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF7F50#00BFFF#66CDAA#FFD700#8A2BE2

Palette guide

How to use Coral Reef

Overview

The Coral Reef palette is a dazzling, vibrant array of colors found beneath the waves, echoing a healthy, bustling tropical coral reef ecosystem. It features a lively Coral #FF7F50, a brilliant Deep Sky Blue #00BFFF, a refreshing Medium Aquamarine #66CDAA, a sunny Gold #FFD700, and a majestic Blue Violet #8A2BE2. This eclectic mix is perfect for designs that demand attention and celebrate natural diversity, making it ideal for high-energy branding, creative illustrations, or dynamic digital interfaces that want to convey vitality and excitement.

Best used for

Aquarium exhibit branding
Children's educational apps
Vibrant event posters
Eclectic art projects
Tropical resort marketing
Fashion or accessories with a bold, unique style

Suggested color roles

primary

Use Deep Sky Blue #00BFFF for foundational elements or strong branding, conveying clarity and expanse.

secondary

Coral #FF7F50 can be used for calls-to-action or important headings, adding warmth and energy.

accent

Gold #FFD700 provides a bright, luxurious highlight for details or decorative elements.

background

A very light gray or off-white would allow these vibrant colors to truly pop.

text

A deep charcoal or black would offer the best contrast against these bright hues.

Accessibility notes

Gold #FFD700 and Coral #FF7F50 may not meet WCAG AA contrast with white text.
Blue Violet #8A2BE2 and Deep Sky Blue #00BFFF provide good contrast with white text, but test against specific backgrounds.
Medium Aquamarine #66CDAA can be tricky for text; ensure sufficient contrast.
Always verify contrast ratios for all text and interactive elements.

Recommended combinations

Tropical Burst

Ideal for high-impact designs, logos, or hero images that need to stand out.

#FF7F50 · #00BFFF · #FFD700

Aquatic Harmony

Excellent for creating depth and a cohesive cool-toned section, suitable for navigation.

#00BFFF · #66CDAA · #8A2BE2

Energetic Accents

Use for calls-to-action, icons, or graphic details that need to pop with diverse colors.

#FFD700 · #FF7F50 · #8A2BE2

CSS variables

:root {
  --coral-reef-1: #FF7F50;
  --coral-reef-2: #00BFFF;
  --coral-reef-3: #66CDAA;
  --coral-reef-4: #FFD700;
  --coral-reef-5: #8A2BE2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coral-reef": {
        1: "#FF7F50",
        2: "#00BFFF",
        3: "#66CDAA",
        4: "#FFD700",
        5: "#8A2BE2",
      }
    }
  }
}

Hex values

Color 1#FF7F50

Color 2#00BFFF

Color 3#66CDAA

Color 4#FFD700

Color 5#8A2BE2

Accessibility

Contrast checker

1.2:1Fail

1.3:1Fail

1.8:1Fail

2.4:1Fail

1.2:1Fail

1.1:1Fail

1.5:1Fail

2.8:1Fail

1.3:1Fail

1.1:1Fail

1.4:1Fail

3.1:1AA18

1.8:1Fail

1.5:1Fail

1.4:1Fail

4.2:1AA18

2.4:1Fail

2.8:1Fail

3.1:1AA18

4.2:1AA18

Similar palettes

More like Coral Reef

Farmer's Bounty Basket

Tropical Rainforest Bloom

Arid Cactus Blossom