Back to palettes

Palette

Deep Sea Coral

Explores the vibrant and mysterious depths where cool ocean currents meet colorful coral.

coolnatural5 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

#3498DB#2980B9#1ABC9C#16A085#34495E

Palette guide

How to use Deep Sea Coral

Overview

The Deep Sea Coral palette (version 2) explores the vibrant and mysterious depths where cool ocean currents meet colorful coral. It balances striking blues like #3498DB and #2980B9 with refreshing teals #1ABC9C and #16A085, creating a dynamic aquatic feel. The deep, grounding #34495E provides a strong anchor, reminiscent of the ocean floor. This palette is excellent for designers seeking a fresh, modern, and trustworthy aesthetic with a lively touch. It's versatile enough for both digital interfaces and print, conveying a sense of calm energy and environmental consciousness.

Best used for

  • Environmental non-profits
  • Modern tech startups
  • Travel and tourism websites (coastal)
  • Educational apps for children
  • Health and wellness branding
  • Sustainable product packaging

Suggested color roles

primary

#3498DB (A vibrant, clear blue, excellent for headings, main buttons, or primary brand color.)

secondary

#1ABC9C (A refreshing teal, suitable for secondary actions, sub-headers, or complementary sections.)

accent

#16A085 (A deeper, rich teal, perfect for small, impactful highlights or interactive elements.)

background

#34495E (A deep, grounding blue-grey, providing a stable and sophisticated backdrop for the brighter colors.)

text

#3498DB (Good for headings on lighter backgrounds. For body text on dark backgrounds, a light grey or white (e.g., #F0F0F0) is recommended for optimal readability.)

Accessibility notes

  • Ensure #3498DB and #1ABC9C have sufficient contrast when used as text on #34495E.
  • Avoid using #2980B9 or #16A085 as text on #34495E without careful contrast checking.
  • For maximum readability, use white or very light grey for body text on the darkest background #34495E.
  • The combination of blues and teals offers a vibrant range, but test individual pairings for accessibility.

Recommended combinations

Oceanic Freshness

Bright, clean blues and teals for a fresh, open feel in UI elements.

#3498DB · #1ABC9C · #2980B9

Deep Reef

Grounding dark with vibrant teals for contrast and a sense of depth.

#34495E · #16A085 · #1ABC9C

Balanced Contrast

Strong visual hierarchy with primary blue against the dark base, complemented by teal.

#3498DB · #34495E · #1ABC9C

CSS variables

:root {
  --deep-sea-coral-2-1: #3498DB;
  --deep-sea-coral-2-2: #2980B9;
  --deep-sea-coral-2-3: #1ABC9C;
  --deep-sea-coral-2-4: #16A085;
  --deep-sea-coral-2-5: #34495E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-sea-coral-2": {
        1: "#3498DB",
        2: "#2980B9",
        3: "#1ABC9C",
        4: "#16A085",
        5: "#34495E",
      }
    }
  }
}

Related searches

blue and teal color schememodern ocean palettecool vibrant colorsenvironmental branding colorsaquatic web design

Palette colors

Hex values

Color 1#3498DB
·
Color 2#2980B9
·
Color 3#1ABC9C
·
Color 4#16A085
·
Color 5#34495E
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.3:1Fail
1:1Fail
2.9:1Fail
2
1.4:1Fail
1.8:1Fail
1.3:1Fail
2.2:1Fail
3
1.3:1Fail
1.8:1Fail
1.4:1Fail
3.9:1AA18
4
1:1Fail
1.3:1Fail
1.4:1Fail
2.8:1Fail
5
2.9:1Fail
2.2:1Fail
3.9:1AA18
2.8:1Fail

Similar palettes

More like Deep Sea Coral

View all cool
Azure Coast Relic
Azure Coastline
Coastal Rockpool
Emerald Coast Sparkle
Emerald Coastline Bloom
Mediterranean Tile Art