Palette

Oceanic Reef Life

A gradient of tropical blues, from deep sea to shallow lagoons, alive with vibrant underwater wonder.

coolenergetic5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#006064#00838F#00BCD4#80DEEA#B2EBF2

Palette guide

How to use Oceanic Reef Life

Overview

The Oceanic Reef Life palette showcases a beautiful gradient of tropical blues, from the deep sea to shallow lagoons, evoking vibrant underwater wonder. Featuring the profound #006064, the rich #00838F, the inviting #00BCD4, and the lighter #80DEEA and #B2EBF2, this collection is designed for designers and developers seeking to create immersive, serene, yet energetic visual experiences. It's ideal for projects that aim to convey freshness, clarity, and the captivating allure of marine environments, suitable for a wide range of applications.

Best used for

Ocean conservation and environmental initiatives
Travel agencies specializing in beach destinations
Children's books and educational materials about marine life
Spa and relaxation brand identity
Digital art and illustration with aquatic themes
Websites for resorts and water activities

Suggested color roles

primary

Utilize #006064 as a deep, foundational primary color for headers, footers, or main content backgrounds.

secondary

Apply #00838F for supporting sections, navigation, or sub-headings, providing a consistent blue depth.

accent

Highlight calls to action or interactive elements with #00BCD4, offering a bright and inviting focal point.

background

The lighter #80DEEA or #B2EBF2 can serve as airy, refreshing backgrounds for main content areas, promoting readability.

text

For dark backgrounds like #006064 or #00838F, use white or a very light gray. For lighter colors such as #80DEEA or #B2EBF2, a dark charcoal or black is recommended.

Accessibility notes

White text offers excellent contrast on #006064, #00838F, and #00BCD4.
For #80DEEA and #B2EBF2, ensure dark text (black or dark gray) is used to meet contrast standards.
Avoid using light text on #80DEEA or #B2EBF2, as it will likely be illegible.
Always test color combinations with accessibility tools to ensure readability across all devices and user needs.

Recommended combinations

Deep Lagoon

Creates a sophisticated gradient from deep to vibrant blue, ideal for layered backgrounds or brand logos.

#006064 · #00838F · #00BCD4

Shallow Reef

Offers a light, airy, and refreshing feel, perfect for hero sections or light mode interfaces.

#80DEEA · #B2EBF2 · #00BCD4

Ocean Current

Provides a smooth, flowing transition, excellent for data visualizations, infographics, or subtle gradients.

#00838F · #00BCD4 · #80DEEA

CSS variables

:root {
  --oceanic-reef-life-1: #006064;
  --oceanic-reef-life-2: #00838F;
  --oceanic-reef-life-3: #00BCD4;
  --oceanic-reef-life-4: #80DEEA;
  --oceanic-reef-life-5: #B2EBF2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-reef-life": {
        1: "#006064",
        2: "#00838F",
        3: "#00BCD4",
        4: "#80DEEA",
        5: "#B2EBF2",
      }
    }
  }
}

Hex values

Color 1#006064

Color 2#00838F

Color 3#00BCD4

Color 4#80DEEA

Color 5#B2EBF2

Accessibility

Contrast checker

1.6:1Fail

3.2:1AA18

4.7:1AA

5.6:1AA

1.6:1Fail

2:1Fail

2.9:1Fail

3.5:1AA18

3.2:1AA18

2:1Fail

1.5:1Fail

1.8:1Fail

4.7:1AA

2.9:1Fail

1.5:1Fail

1.2:1Fail

5.6:1AA

3.5:1AA18

1.8:1Fail

1.2:1Fail

Similar palettes

More like Oceanic Reef Life