Back to palettes

Palette

Oceanic Reef Glow

A vibrant underwater scene, alive with colorful corals and shimmering sunlight through water.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#005F73#0A9396#94D2BD#EE9B00#CA6702

Palette guide

How to use Oceanic Reef Glow

Overview

The Oceanic Reef Glow palette vividly captures the dynamic interplay of light and life in a coral reef, blending deep oceanic blues with vibrant, sun-drenched oranges. Anchored by the profound #005F73 and the rich #0A9396, it introduces the serene #94D2BD, then ignites with the bold #EE9B00 and the fiery #CA6702. This collection is perfect for designers and developers aiming to create energetic, captivating, and sophisticated designs that draw the eye and convey warmth alongside cool depth, reflecting the fascinating contrasts found in nature.

Best used for

  • Adventure travel and diving tour websites
  • Brand identity for innovative tech startups
  • Dynamic event promotions and marketing
  • Interactive dashboards and data visualizations
  • Modern art and design portfolios
  • E-commerce platforms for unique products

Suggested color roles

primary

Use #005F73 as a deep, authoritative primary color for backgrounds or foundational elements.

secondary

Apply #0A9396 for supporting sections, navigation, or sub-headings, maintaining a cohesive blue-green base.

accent

Utilize #EE9B00 or #CA6702 for calls to action, important alerts, or to highlight key features, creating strong visual contrast.

background

The lighter #94D2BD provides a refreshing and airy background, allowing darker text and vibrant accents to stand out.

text

For dark backgrounds like #005F73, use white or light gray. For #94D2BD, a dark charcoal or black is recommended. Ensure orange accents have clear white or black text.

Accessibility notes

  • White text offers excellent contrast on #005F73 and #0A9396.
  • Ensure strong contrast when pairing text with #EE9B00 or #CA6702; white or black text will be most legible.
  • Be mindful of using #94D2BD for small text against very light backgrounds; it may require darker text.
  • Always check color combinations with WCAG contrast tools, especially for essential information.

Recommended combinations

Coral Sunset

Creates a dramatic, warm, and inviting contrast, ideal for hero images or striking calls to action.

#EE9B00 · #CA6702 · #0A9396

Deep Reef

Offers a sophisticated and calming gradient, perfect for backgrounds or informational sections.

#005F73 · #0A9396 · #94D2BD

Glow Current

Combines a light base with a vibrant accent and deep anchor, suitable for dynamic layouts.

#94D2BD · #EE9B00 · #005F73

CSS variables

:root {
  --oceanic-reef-glow-1: #005F73;
  --oceanic-reef-glow-2: #0A9396;
  --oceanic-reef-glow-3: #94D2BD;
  --oceanic-reef-glow-4: #EE9B00;
  --oceanic-reef-glow-5: #CA6702;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-reef-glow": {
        1: "#005F73",
        2: "#0A9396",
        3: "#94D2BD",
        4: "#EE9B00",
        5: "#CA6702",
      }
    }
  }
}

Related searches

oceanic blue orange palettecoral reef color schemedeep teal and warm orangevibrant marine designcontrast color palette

Palette colors

Hex values

Color 1#005F73
·
Color 2#0A9396
·
Color 3#94D2BD
·
Color 4#EE9B00
·
Color 5#CA6702
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
4.2:1AA18
3.2:1AA18
1.9:1Fail
2
2:1Fail
2.2:1Fail
1.7:1Fail
1:1Fail
3
4.2:1AA18
2.2:1Fail
1.3:1Fail
2.2:1Fail
4
3.2:1AA18
1.7:1Fail
1.3:1Fail
1.7:1Fail
5
1.9:1Fail
1:1Fail
2.2:1Fail
1.7:1Fail

Similar palettes

More like Oceanic Reef Glow

View all vibrant