Back to palettes

Palette

Deep Sea Coral

Explores the mysterious depths of the ocean with varying shades of deep blue and aquamarine.

cooldark5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0F5E7B#2E8DA6#59BCD4#D5EDF2#07384A

Palette guide

How to use Deep Sea Coral

Overview

The Deep Sea Coral palette (version 6) explores the mysterious depths of the ocean with varying shades of deep blue and aquamarine. Anchored by the profound #07384A and the rich #0F5E7B, these deep tones provide a strong, enigmatic foundation. Lighter, vibrant aquas like #2E8DA6 and #59BCD4 introduce a sense of movement and light, mimicking the gentle currents. The ethereal #D5EDF2, a nearly white aqua, brings a soft, shimmering highlight. This palette is ideal for designers seeking a calming, yet sophisticated, aquatic aesthetic with excellent opportunities for gradients and clear visual hierarchy.

Best used for

  • Eco-tourism marketing
  • Spa and wellness branding
  • Marine conservation websites
  • Clean tech company interfaces
  • Serene digital art
  • Educational content about oceans

Suggested color roles

primary

#07384A (The deepest blue, ideal for foundational backgrounds, setting a profound and stable mood.)

secondary

#0F5E7B (A rich, deep blue for secondary content areas, navigation, or subtle layering.)

accent

#D5EDF2 (The lightest, almost white aqua, perfect for highlights, active states, or ethereal calls to action.)

background

#07384A (Provides an immersive, dark ocean backdrop, enhancing the vibrancy of other colors.)

text

#D5EDF2 (Excellent for primary text on dark backgrounds, ensuring clear readability and a soft, luminous quality.)

Accessibility notes

  • #D5EDF2 provides strong contrast against #07384A, #0F5E7B, and #2E8DA6, making it suitable for body text and interactive elements.
  • Ensure #59BCD4 has sufficient contrast when used as text on #07384A or #0F5E7B.
  • Avoid using the darkest blues for text on other dark blues to prevent readability issues.
  • The natural gradient from dark to light aids in creating an accessible visual hierarchy.

Recommended combinations

Deep Ocean Base

Layered deep blues for backgrounds and structural elements, conveying immensity.

#07384A · #0F5E7B · #2E8DA6

Aqua Shimmer

Lighter aquas for headers, cards, or interactive components, mimicking shimmering light.

#2E8DA6 · #59BCD4 · #D5EDF2

Clear Contrast

Strong contrast for clear readability and highlighting key information, evoking clarity.

#07384A · #D5EDF2 · #59BCD4

CSS variables

:root {
  --deep-sea-coral-6-1: #0F5E7B;
  --deep-sea-coral-6-2: #2E8DA6;
  --deep-sea-coral-6-3: #59BCD4;
  --deep-sea-coral-6-4: #D5EDF2;
  --deep-sea-coral-6-5: #07384A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-sea-coral-6": {
        1: "#0F5E7B",
        2: "#2E8DA6",
        3: "#59BCD4",
        4: "#D5EDF2",
        5: "#07384A",
      }
    }
  }
}

Related searches

deep aqua color palettemarine blue green schemeserene ocean web designcool tone gradientsenvironmental ui colors

Palette colors

Hex values

Color 1#0F5E7B
·
Color 2#2E8DA6
·
Color 3#59BCD4
·
Color 4#D5EDF2
·
Color 5#07384A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.3:1AA18
5.9:1AA
1.7:1Fail
2
1.9:1Fail
1.7:1Fail
3.1:1AA18
3.3:1AA18
3
3.3:1AA18
1.7:1Fail
1.8:1Fail
5.7:1AA
4
5.9:1AA
3.1:1AA18
1.8:1Fail
10.3:1AAA
5
1.7:1Fail
3.3:1AA18
5.7:1AA
10.3:1AAA

Similar palettes

More like Deep Sea Coral

View all cool
Cobalt Ocean Depths
Deep Sea Siren
Ocean Current Depths
Ocean Depths Glimmer
Abyssal Bioluminescence
Abyssal Current Glide