Palette

Tranquil Deep Sea

Diving into the serene and mysterious depths of the deep blue ocean.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0B4F6C#206A80#5B9AA8#A3CCDE#D5EAF4

Palette guide

How to use Tranquil Deep Sea

Overview

The Tranquil Deep Sea palette offers a serene and sophisticated collection of blues, perfect for projects seeking a calm yet impactful aesthetic. Inspired by the ocean's depths, this palette features a strong foundational deep blue (#0B4F6C), a supportive mid-tone (#206A80), a captivating teal-blue accent (#5B9AA8), and two airy lighter shades (#A3CCDE and #D5EAF4). Designers can leverage its cool, refreshing qualities to evoke trust, stability, and a sense of peaceful professionalism. It's ideal for creating immersive digital experiences or elegant print materials where clarity and tranquility are paramount, ensuring a harmonious visual flow across various design elements.

Best used for

Corporate branding and websites seeking a professional, calming image
Spa, wellness, and meditation app interfaces
Marine conservation and environmental organization materials
Luxury travel and resort marketing
Educational content related to marine biology or oceanography
Modern home decor and textile design

Suggested color roles

primary

Use #0B4F6C as the dominant color for headers, main navigation, or strong brand elements. Its depth provides a stable and authoritative presence.

secondary

Employ #206A80 for subheadings, secondary calls-to-action, or graphic elements. It offers a softer complement to the primary, maintaining visual interest.

accent

Apply #5B9AA8 sparingly for interactive elements, highlights, or illustrations. This mid-tone blue-green adds a touch of vibrancy without disrupting tranquility.

background

Utilize #D5EAF4 for clean, expansive backgrounds. Its extreme lightness ensures excellent readability for darker text and creates an open, airy feel.

text

For dark text on light backgrounds like #D5EAF4, use #0B4F6C or #206A80 for strong contrast. For light text on dark backgrounds, #D5EAF4 offers clear legibility.

Accessibility notes

Ensure sufficient contrast between #0B4F6C or #206A80 text and lighter backgrounds like #A3CCDE or #D5EAF4 for readability.
Avoid placing light text (#D5EAF4) directly on mid-tone backgrounds like #5B9AA8 without checking WCAG AA large text contrast.
Use #D5EAF4 for critical information text only on sufficiently dark backgrounds like #0B4F6C.
When using #A3CCDE for background, opt for darker text colors such as #0B4F6C or a charcoal gray to maintain legibility.

Recommended combinations

Deep Ocean Contrast

Ideal for primary branding: dark text on a light background with a vibrant accent for calls to action.

#0B4F6C · #D5EAF4 · #5B9AA8

Serene Gradient

Perfect for backgrounds or hero sections, transitioning from a rich mid-tone to a soft, airy finish.

#206A80 · #A3CCDE · #D5EAF4

Misty Lagoon

Use the lighter tones for UI elements and the darkest for clear, readable text or icons.

#5B9AA8 · #A3CCDE · #0B4F6C

CSS variables

:root {
  --tranquil-deep-sea-1: #0B4F6C;
  --tranquil-deep-sea-2: #206A80;
  --tranquil-deep-sea-3: #5B9AA8;
  --tranquil-deep-sea-4: #A3CCDE;
  --tranquil-deep-sea-5: #D5EAF4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "tranquil-deep-sea": {
        1: "#0B4F6C",
        2: "#206A80",
        3: "#5B9AA8",
        4: "#A3CCDE",
        5: "#D5EAF4",
      }
    }
  }
}

Hex values

Color 1#0B4F6C

Color 2#206A80

Color 3#5B9AA8

Color 4#A3CCDE

Color 5#D5EAF4

Accessibility

Contrast checker

1.5:1Fail

2.8:1Fail

5.2:1AA

7.2:1AAA

1.5:1Fail

1.9:1Fail

3.6:1AA18

4.9:1AA

2.8:1Fail

1.9:1Fail

1.8:1Fail

2.5:1Fail

5.2:1AA

3.6:1AA18

1.8:1Fail

1.4:1Fail

7.2:1AAA

4.9:1AA

2.5:1Fail

1.4:1Fail

Similar palettes

More like Tranquil Deep Sea