Palette

Coral Reef Discovery

A bright, effervescent mix of corals and aquas, celebrating the vibrant biodiversity of a sunlit reef.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF6347#FF7F50#00CED1#40E0D0#FFD700

Palette guide

How to use Coral Reef Discovery

Overview

The Coral Reef Discovery palette is an electrifying and vibrant collection, perfect for designs that demand attention and evoke the excitement of underwater exploration. It features a bold tomato red, #FF6347, and a lively coral orange, #FF7F50, which provide intense warmth and energy. These fiery hues are brilliantly contrasted by the cool, refreshing tones of dark turquoise, #00CED1, and a brighter turquoise, #40E0D0, simulating clear ocean waters. A striking gold, #FFD700, adds a touch of preciousness and highlights, making this palette ideal for dynamic, energetic, and visually captivating projects that celebrate biodiversity and discovery.

Best used for

Adventure tourism websites and apps
Youth-oriented sports branding
Festival and event promotional materials
Interactive educational content on marine life
E-commerce platforms for unique products
Game interface design

Suggested color roles

primary

#FF6347 - Use this bold tomato red for high-impact calls-to-action, critical alerts, or brand elements that need to stand out immediately.

secondary

#00CED1 - A strong dark turquoise, excellent for primary navigation, section headers, or as a dominant background color for vibrant sections.

accent

#FFD700 - This bright gold is perfect for highlighting key information, star ratings, icons, or subtle decorative elements to add sparkle.

background

#40E0D0 - A lighter turquoise that can serve as an energetic background, especially when offset with darker text or UI elements.

text

#00CED1 - For body text, the dark turquoise offers good readability against lighter backgrounds. Consider black or dark charcoal for general body text or white for text on #FF6347.

Accessibility notes

Ensure #FF6347 and #FF7F50 have sufficient contrast with text; dark colors like black or #00CED1 are recommended.
#FFD700 (gold) should primarily be used for accents or very large display text, as small text may lack contrast.
The turquoise colors (#00CED1, #40E0D0) provide good contrast for text on a white or very light background.
Avoid placing #FFD700 text on #FF7F50 or #FF6347 due to poor contrast.

Recommended combinations

Vibrant Depths

Creates a high-energy, contrasting look, ideal for bold headlines and dynamic interactive elements.

#FF6347 · #00CED1 · #FFD700

Ocean Sparkle

Perfect for lively backgrounds with warm accents, evoking a playful and inviting underwater scene.

#40E0D0 · #FF7F50 · #FFD700

Discovery Path

Balances cool and warm tones, effective for UI elements that guide users through engaging content.

#00CED1 · #FF6347 · #40E0D0

CSS variables

:root {
  --coral-reef-discovery-2-1: #FF6347;
  --coral-reef-discovery-2-2: #FF7F50;
  --coral-reef-discovery-2-3: #00CED1;
  --coral-reef-discovery-2-4: #40E0D0;
  --coral-reef-discovery-2-5: #FFD700;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coral-reef-discovery-2": {
        1: "#FF6347",
        2: "#FF7F50",
        3: "#00CED1",
        4: "#40E0D0",
        5: "#FFD700",
      }
    }
  }
}

Hex values

Color 1#FF6347

Color 2#FF7F50

Color 3#00CED1

Color 4#40E0D0

Color 5#FFD700

Accessibility

Contrast checker

1.2:1Fail

1.5:1Fail

1.8:1Fail

2.1:1Fail

1.2:1Fail

1.3:1Fail

1.5:1Fail

1.8:1Fail

1.5:1Fail

1.3:1Fail

1.2:1Fail

1.4:1Fail

1.8:1Fail

1.5:1Fail

1.2:1Fail

2.1:1Fail

1.8:1Fail

1.4:1Fail

1.2:1Fail

Similar palettes

More like Coral Reef Discovery

Submarine Floral Burst

Coral Reef Discovery

See it in context.

Ready when you are.

Built with Coral Reef Discovery.

How to use Coral Reef Discovery

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Vibrant Depths

Ocean Sparkle

Discovery Path

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coral Reef Discovery