Palette

Deep Ocean Coral

A vibrant journey into the depths, showcasing the energetic and colorful life of a coral reef.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F4C5C#2A9D8F#E9C46A#F4A261#E76F51

Palette guide

How to use Deep Ocean Coral

Overview

The Deep Ocean Coral palette is a vibrant and energetic collection that vividly portrays a thriving coral reef. It anchors with the deep teal of #0F4C5C, providing a stable, oceanic foundation, complemented by the fresh aquatic #2A9D8F. The warmth and energy explode with #E9C46A, #F4A261, and #E76F51, mimicking the lively hues of coral and marine life. This palette is exceptionally dynamic, making it ideal for designers and developers aiming to create memorable, inviting, and impactful designs. It perfectly suits projects related to nature, travel, or any brand seeking a lively and unique color identity.

Best used for

Tropical travel agencies and tourism websites
Marine conservation organizations' campaigns
Vibrant e-commerce platforms (fashion, home goods)
Food and beverage branding (especially healthy/natural)
Educational content about coral reefs and oceanography
Summer event promotions and marketing materials

Suggested color roles

primary

Use #0F4C5C as the deep, grounding teal for backgrounds or main structural elements, conveying stability and depth.

secondary

Employ #2A9D8F for secondary content areas, navigation, or as a fresh, supportive aquatic tone.

accent

Apply #E76F51 or #F4A261 for bold calls to action, interactive elements, or key highlights to grab immediate attention.

background

The deep #0F4C5C works well for a rich, dark background. For a warmer, inviting light background, consider #E9C46A.

text

For optimal readability on dark backgrounds like #0F4C5C or #2A9D8F, use white or a very light grey. On lighter, warmer backgrounds, use #0F4C5C or dark charcoal.

Accessibility notes

Ensure white or light grey text provides strong contrast against #0F4C5C and #2A9D8F backgrounds.
The warm accents #E9C46A, #F4A261, and #E76F51 offer excellent contrast on the deep teal #0F4C5C.
Avoid using #F4A261 text on #E76F51 backgrounds due to low color differentiation and contrast.
Always test text legibility and interactive elements in all states to meet WCAG AA contrast guidelines, especially on vibrant pairings.

Recommended combinations

Vibrant Contrast

Creates an immediate eye-catching effect, ideal for hero sections, prominent headlines, or impactful branding.

#0F4C5C · #E9C46A · #E76F51

Reef Harmony

Perfect for cheerful UI elements, illustrations, or content blocks that need to feel lively and cohesive.

#2A9D8F · #F4A261 · #E76F51

Deep & Bright

Forms a strong core identity, combining the deep ocean feel with vibrant, energetic coral accents.

#0F4C5C · #2A9D8F · #E76F51

CSS variables

:root {
  --deep-ocean-coral-1: #0F4C5C;
  --deep-ocean-coral-2: #2A9D8F;
  --deep-ocean-coral-3: #E9C46A;
  --deep-ocean-coral-4: #F4A261;
  --deep-ocean-coral-5: #E76F51;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-coral": {
        1: "#0F4C5C",
        2: "#2A9D8F",
        3: "#E9C46A",
        4: "#F4A261",
        5: "#E76F51",
      }
    }
  }
}

Hex values

Color 1#0F4C5C

Color 2#2A9D8F

Color 3#E9C46A

Color 4#F4A261

Color 5#E76F51

Accessibility

Contrast checker

2.9:1Fail

5.7:1AA

4.6:1AA

3.1:1AA18

2.9:1Fail

2:1Fail

1.6:1Fail

1.1:1Fail

5.7:1AA

2:1Fail

1.2:1Fail

1.9:1Fail