Palette

Celestial Ocean Reef

Sparkling blues and teals, like starlight dancing on a vibrant underwater reef.

coolenergetic5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Celestial Ocean Reef 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 Celestial Ocean Reef.

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

Data visualization

#C8F0F7#7ED9E8#3FA8C9#1E6C90#0B3C5D

Palette guide

How to use Celestial Ocean Reef

Overview

The Celestial Ocean Reef palette is a vibrant and energetic collection of blues and teals, like starlight dancing on a lively underwater reef. Ranging from the sparkling #C8F0F7 to the deep, anchoring #0B3C5D, this palette offers a dynamic spectrum. The harmonious progression through #7ED9E8, #3FA8C9, and #1E6C90 creates a lively visual flow, ideal for engaging and refreshing designs. Designers can leverage this palette to evoke energy, clarity, and a sense of vibrant exploration. Developers will find these distinct hex codes perfect for crafting clean, interactive interfaces, lively backgrounds, and readable text in both light and dark contexts.

Best used for

Scuba diving or marine adventure tourism
Aquarium or ocean conservation websites
Youth-oriented tech brands or apps
Summer-themed marketing campaigns
Interactive educational content for children
Fitness or active lifestyle brands

Suggested color roles

primary

#3FA8C9 provides a strong, vibrant blue-teal foundation for main content areas or brand identity.

secondary

#1E6C90 offers a deeper, more grounded blue, suitable for supporting sections or footers.

accent

#7ED9E8 delivers a luminous, energetic sky blue, ideal for calls-to-action, interactive elements, or key highlights.

background

#C8F0F7 creates a very light, airy, and expansive canvas. #0B3C5D for a deep, dramatic background.

text

Use a dark color like charcoal or black on the lighter backgrounds. For darker elements, use white or #C8F0F7.

Accessibility notes

Ensure dark text (e.g., black or charcoal) has sufficient contrast on #C8F0F7 and #7ED9E8.
White or #C8F0F7 provides excellent contrast on #0B3C5D and #1E6C90.
Avoid using #7ED9E8 for small text on #3FA8C9 as contrast might be borderline.
All interactive elements must meet WCAG contrast guidelines for both color and focus states.

Recommended combinations

Reef Glow

Ideal for hero sections, combining deep blue with a sparkling, energetic highlight.

#0B3C5D · #3FA8C9 · #C8F0F7

Ocean Layers

Excellent for layered UI elements or subtle background gradients, creating a sense of natural depth.

#1E6C90 · #3FA8C9 · #7ED9E8

Vibrant Waters

Creates a refreshing and lively aesthetic, suitable for intros or dynamic information displays.

#C8F0F7 · #7ED9E8 · #3FA8C9

CSS variables

:root {
  --celestial-ocean-reef-1: #C8F0F7;
  --celestial-ocean-reef-2: #7ED9E8;
  --celestial-ocean-reef-3: #3FA8C9;
  --celestial-ocean-reef-4: #1E6C90;
  --celestial-ocean-reef-5: #0B3C5D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-ocean-reef": {
        1: "#C8F0F7",
        2: "#7ED9E8",
        3: "#3FA8C9",
        4: "#1E6C90",
        5: "#0B3C5D",
      }
    }
  }
}

Hex values

Color 1#C8F0F7

Color 2#7ED9E8

Color 3#3FA8C9

Color 4#1E6C90

Color 5#0B3C5D

Accessibility

Contrast checker

1.3:1Fail

2.3:1Fail

4.8:1AA

9.5:1AAA

1.3:1Fail

1.7:1Fail

3.6:1AA18

7.1:1AAA

2.3:1Fail

1.7:1Fail

2.1:1Fail

4.2:1AA18

4.8:1AA

3.6:1AA18

2.1:1Fail

2:1Fail

9.5:1AAA

7.1:1AAA

4.2:1AA18

2:1Fail

Similar palettes

More like Celestial Ocean Reef

View all cool

Abstract Ocean Currents