Palette

Vivid Reef Ecosystem

A vibrant and lively collection inspired by the diverse and colorful life found in healthy coral reefs.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#FF7F50#F7CAC9#92DFF3#4682B4#CD5C5C

Palette guide

How to use Vivid Reef Ecosystem

Overview

The Vivid Reef Ecosystem palette bursts with the lively and diverse hues found in a thriving underwater world. Combining the warm coral of #FF7F50 and the soft pink of #F7CAC9 with the cool blues of #92DFF3 and #4682B4, accented by the striking red of #CD5C5C, this collection evokes energy and natural beauty. Designers can leverage these hex codes for projects requiring a fresh, marine, or energetic aesthetic. Developers will find this palette ideal for creating engaging environmental campaigns, travel websites, or vibrant e-commerce platforms, offering a balance of warmth and coolness that simulates the dynamic life of a coral reef.

Best used for

Marine conservation initiatives
Beach and ocean-themed travel branding
Summer fashion or swimwear collections
Aquarium or oceanographic museum exhibits
Children's educational content about marine life
Lively digital art and illustrations

Suggested color roles

primary

Use #4682B4 for foundational elements, providing a stable, deep-sea blue base.

secondary

Employ #CD5C5C for important calls-to-action or vibrant headings, adding a striking contrast.

accent

Highlight key information or interactive states with #FF7F50 or #92DFF3, offering energetic pops of color.

background

The light #F7CAC9 can serve as a soft, airy background. Alternatively, use a crisp white or light gray to make the colors truly stand out.

text

For text on lighter backgrounds like #F7CAC9, a dark charcoal or black is recommended. On darker shades like #4682B4, use white or #F7CAC9.

Accessibility notes

Ensure #F7CAC9 is not used for small text on similarly light backgrounds to avoid readability issues.
Check contrast between #FF7F50 and #CD5C5C if used together for text or interactive elements.
Pair vibrant colors like #FF7F50 and #CD5C5C with high-contrast text (black or white) for optimal readability.
Be mindful of using #92DFF3 for text on very light backgrounds; consider a darker blue or black for better legibility.

Recommended combinations

Coral Lagoon

Excellent for serene backgrounds, vibrant highlights, and deep, anchoring elements.

#F7CAC9 · #FF7F50 · #4682B4

Reef Depth

Ideal for main content areas, strong calls-to-action, and playful accents.

#4682B4 · #CD5C5C · #92DFF3

Ocean Current

Perfect for energetic gradients, subtle overlays, and light, airy interfaces.

#92DFF3 · #FF7F50 · #F7CAC9

CSS variables

:root {
  --vivid-reef-ecosystem-1: #FF7F50;
  --vivid-reef-ecosystem-2: #F7CAC9;
  --vivid-reef-ecosystem-3: #92DFF3;
  --vivid-reef-ecosystem-4: #4682B4;
  --vivid-reef-ecosystem-5: #CD5C5C;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "vivid-reef-ecosystem": {
        1: "#FF7F50",
        2: "#F7CAC9",
        3: "#92DFF3",
        4: "#4682B4",
        5: "#CD5C5C",
      }
    }
  }
}

Hex values

Color 1#FF7F50

Color 2#F7CAC9

Color 3#92DFF3

Color 4#4682B4

Color 5#CD5C5C

Accessibility

Contrast checker

1.7:1Fail

1.6:1Fail

1.7:1Fail

1:1Fail

2.8:1Fail

2.7:1Fail

1.7:1Fail

1:1Fail

2.8:1Fail

2.7:1Fail

1.6:1Fail

2.8:1Fail

1:1Fail

1.6:1Fail

2.7:1Fail

1:1Fail

Similar palettes

More like Vivid Reef Ecosystem

Vivid Reef Ecosystem

See it in context.

Ready when you are.

Built with Vivid Reef Ecosystem.

How to use Vivid Reef Ecosystem

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Coral Lagoon

Reef Depth

Ocean Current

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Vivid Reef Ecosystem