Palette

Coral Reef Discovery

A vivid palette mimicking the diverse and electric colors found in a bustling coral reef environment.

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

#FF7F50#6495ED#FFD700#3CB371#FF69B4

Palette guide

How to use Coral Reef Discovery

Overview

The Coral Reef Discovery palette is a spectacularly vivid and dynamic collection, perfect for designs that aim to mimic the diverse and electric colors of a bustling coral reef. It features a bright coral orange, #FF7F50, providing warmth and energy, beautifully juxtaposed with a serene cornflower blue, #6495ED, which grounds the palette. A brilliant gold, #FFD700, adds a luxurious sparkle, while a refreshing medium sea green, #3CB371, introduces an organic, natural feel. The playful hot pink, #FF69B4, injects a final burst of vibrant personality, making this palette ideal for projects that celebrate vibrancy, diversity, and an energetic, tropical mood.

Best used for

Children's toy and apparel branding
Eco-tourism and resort marketing
Creative art and design portfolios
Summer festival branding and merchandise
Social media graphics with a playful theme
Unique e-commerce product launches

Suggested color roles

primary

#FF7F50 - Use this lively coral orange for main calls-to-action, important headlines, or key brand elements to capture immediate attention.

secondary

#6495ED - A calming cornflower blue, excellent for background sections, navigation, or as a strong contrasting element to the warm tones.

accent

#FF69B4 - This vibrant hot pink is perfect for eye-catching accents, interactive states, or small graphic details that need to pop.

background

#3CB371 - A medium sea green that can serve as a refreshing and natural background, offering a subtle contrast to the warmer elements.

text

#6495ED - For body text, the cornflower blue provides good readability against lighter backgrounds. Consider black or dark charcoal for general body text or white for text on #FF7F50 or #3CB371.

Accessibility notes

Ensure #FF7F50, #FFD700, and #FF69B4 have sufficient contrast with text; dark colors like black or #6495ED are recommended.
#FFD700 (gold) is best for accents or large headings; avoid for small body text due to potential legibility issues.
#6495ED (cornflower blue) offers good contrast for text on white or very light backgrounds.
Avoid placing #FFD700 text on #FF7F50 or #FF69B4 backgrounds for readability.

Recommended combinations

Tropical Burst

Creates a dynamic, playful contrast, ideal for energetic headers or interactive UI elements.

#FF7F50 · #6495ED · #FF69B4

Reef Treasure

Perfect for adding a touch of luxury and natural appeal, suitable for product features or special offers.

#3CB371 · #FFD700 · #FF7F50

Deep Sea Bloom

Combines cool blue with vibrant pink and green, excellent for visually engaging infographics or dashboards.

#6495ED · #FF69B4 · #3CB371

CSS variables

:root {
  --coral-reef-discovery-1: #FF7F50;
  --coral-reef-discovery-2: #6495ED;
  --coral-reef-discovery-3: #FFD700;
  --coral-reef-discovery-4: #3CB371;
  --coral-reef-discovery-5: #FF69B4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coral-reef-discovery": {
        1: "#FF7F50",
        2: "#6495ED",
        3: "#FFD700",
        4: "#3CB371",
        5: "#FF69B4",
      }
    }
  }
}

Hex values

Color 1#FF7F50

Color 2#6495ED

Color 3#FFD700

Color 4#3CB371

Color 5#FF69B4

Accessibility

Contrast checker

1.2:1Fail

1.8:1Fail

1.1:1Fail

1.2:1Fail

2.1:1Fail

1.1:1Fail

1.8:1Fail

2.1:1Fail

1.9:1Fail

1.1:1Fail

1.9:1Fail

1:1Fail

1.1:1Fail

1.9:1Fail

1:1Fail

Similar palettes

More like Coral Reef Discovery

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

Tropical Burst

Reef Treasure

Deep Sea Bloom

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coral Reef Discovery