Back to palettes

Palette

Oceanic Reef Mosaic

A dazzling array of blues and greens, reflecting the complex and vibrant mosaic of life in a tropical coral reef.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#005F60#007F7F#009F9F#00BFBF#00FFFF

Palette guide

How to use Oceanic Reef Mosaic

Overview

The Oceanic Reef Mosaic palette presents a dazzling array of blues and greens, reflecting the complex and vibrant tapestry of life in a tropical coral reef. With a harmonious progression from the deep #005F60 to the luminous #00FFFF, including the rich #007F7F, #009F9F, and #00BFBF, this collection is designed to infuse projects with energetic and refreshing aquatic vibes. It’s an excellent choice for designers and developers looking to create engaging, dynamic, and visually striking interfaces or branding that evokes the beauty and diversity of marine ecosystems.

Best used for

  • Nature and wildlife documentary branding
  • Educational apps for marine biology
  • Travel and tourism websites for tropical destinations
  • Spa and wellness centers with aquatic themes
  • Children's entertainment and educational content
  • Eco-conscious product packaging

Suggested color roles

primary

Use #005F60 as a solid, grounding primary color for main headers or foundational elements, providing depth.

secondary

Apply #007F7F for supporting content blocks, navigation, or secondary branding, maintaining a cohesive deep aqua feel.

accent

Highlight calls to action or interactive elements with #00BFBF or #00FFFF to ensure they pop against darker tones.

background

The mid-tone #009F9F can serve as a refreshing background for main content areas, offering clarity and calm.

text

For dark backgrounds like #005F60 or #007F7F, use white or a very light gray. For lighter tones such as #00BFBF or #00FFFF, a dark charcoal or black provides optimal contrast.

Accessibility notes

  • White text provides excellent contrast on #005F60, #007F7F, and #009F9F.
  • For #00BFBF and #00FFFF, dark text (black or dark gray) is essential to meet WCAG contrast guidelines.
  • Avoid using light-colored text on the brighter aquas to prevent readability issues.
  • Ensure sufficient contrast for all interactive elements, especially against the vibrant background colors.

Recommended combinations

Reef Depth

Creates a deep, immersive, and tranquil gradient, ideal for backgrounds or sophisticated branding.

#005F60 · #007F7F · #009F9F

Aqua Glow

Delivers a vibrant, energetic, and modern feel, perfect for accents, calls to action, or interactive elements.

#00BFBF · #00FFFF · #007F7F

Mosaic Layers

Offers a balanced and harmonious blend, suitable for content sections or subtle visual hierarchies.

#009F9F · #007F7F · #00BFBF

CSS variables

:root {
  --oceanic-reef-mosaic-1: #005F60;
  --oceanic-reef-mosaic-2: #007F7F;
  --oceanic-reef-mosaic-3: #009F9F;
  --oceanic-reef-mosaic-4: #00BFBF;
  --oceanic-reef-mosaic-5: #00FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-reef-mosaic": {
        1: "#005F60",
        2: "#007F7F",
        3: "#009F9F",
        4: "#00BFBF",
        5: "#00FFFF",
      }
    }
  }
}

Related searches

vibrant aqua green paletteoceanic mosaic colorstropical reef color schemeenergetic marine designblue green gradient palette

Palette colors

Hex values

Color 1#005F60
·
Color 2#007F7F
·
Color 3#009F9F
·
Color 4#00BFBF
·
Color 5#00FFFF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.3:1Fail
3.3:1AA18
6:1AA
2
1.5:1Fail
1.5:1Fail
2.1:1Fail
3.9:1AA18
3
2.3:1Fail
1.5:1Fail
1.4:1Fail
2.6:1Fail
4
3.3:1AA18
2.1:1Fail
1.4:1Fail
1.8:1Fail
5
6:1AA
3.9:1AA18
2.6:1Fail
1.8:1Fail

Similar palettes

More like Oceanic Reef Mosaic

View all vibrant
Coral Reef Shimmer
Vibrant Coral Reef
Vibrant Coral Reef
Vibrant Reef Mosaic
Abstract Canvas Pop
Abstract Ocean Flow