Palette

Monochrome Ocean Depths

Explores the mysterious variations of the deep ocean, from dark abyss to sunlit surface.

MonochromeCalm5 colors

More Monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Monochrome Ocean Depths 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 Monochrome Ocean Depths.

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

Data visualization

#000080#191970#4169E1#ADD8E6#F0FFFF

Palette guide

How to use Monochrome Ocean Depths

Overview

The Monochrome Ocean Depths palette explores the mysterious variations of the deep ocean, from the dark abyss of #000080 to the sunlit surface represented by #F0FFFF. This collection, featuring rich blues like #191970 and #4169E1, alongside the serene #ADD8E6, provides a calming yet dynamic range. Designers and developers can leverage these hues to create immersive and tranquil digital experiences. The blues evoke a sense of calm, trust, and depth, making them ideal for projects related to nature, technology, or any brand aiming for a stable and expansive aesthetic.

Best used for

Marine-themed branding
Environmental and conservation websites
Calming digital interfaces
Educational content about nature
Travel and tourism brochures
Wellness and meditation apps

Suggested color roles

primary

Use #191970 as a deep, stable primary color for main content areas or robust UI components, conveying trustworthiness.

secondary

Apply #4169E1 for vibrant secondary elements, interactive buttons, or highlights, adding an energetic pop.

accent

Employ #ADD8E6 as a light, airy accent for subtle highlights, active states, or delicate graphical details.

background

Choose #F0FFFF as a near-white, expansive background, creating a feeling of openness and lightness.

text

Opt for #000080 for body text on lighter backgrounds to ensure strong readability and maintain the deep blue aesthetic.

Accessibility notes

Ensure #000080 text on #F0FFFF backgrounds meets WCAG AA/AAA contrast ratios.
Avoid using #ADD8E6 for small text on #F0FFFF, as it will lack sufficient contrast.
Use #191970 or #000080 for text on #ADD8E6 to maintain readability.
Provide ample spacing and clear visual hierarchy when using multiple shades of blue to prevent visual fatigue.

Recommended combinations

Deep Contrast

Ideal for a high-contrast layout, with a light background, deep blue text, and a vibrant blue for interactive elements.

#F0FFFF · #000080 · #4169E1

Oceanic Gradient

Creates a smooth transition from deep to light blue, perfect for backgrounds, headers, or data visualizations.

#191970 · #4169E1 · #ADD8E6

Light & Dark

Suitable for creating distinct sections, using a light blue base with deep blue text and near-white accents.

#ADD8E6 · #000080 · #F0FFFF

CSS variables

:root {
  --monochrome-ocean-depths-1: #000080;
  --monochrome-ocean-depths-2: #191970;
  --monochrome-ocean-depths-3: #4169E1;
  --monochrome-ocean-depths-4: #ADD8E6;
  --monochrome-ocean-depths-5: #F0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monochrome-ocean-depths": {
        1: "#000080",
        2: "#191970",
        3: "#4169E1",
        4: "#ADD8E6",
        5: "#F0FFFF",
      }
    }
  }
}

Hex values

Color 1#000080

Color 2#191970

Color 3#4169E1

Color 4#ADD8E6

Color 5#F0FFFF

Accessibility

Contrast checker

1.1:1Fail

3.3:1AA18

10.5:1AAA

15.6:1AAA

1.1:1Fail

3.1:1AA18

9.7:1AAA

14.5:1AAA

3.3:1AA18

3.1:1AA18

3.2:1AA18

4.7:1AA

10.5:1AAA

9.7:1AAA

3.2:1AA18

1.5:1Fail

15.6:1AAA

14.5:1AAA

4.7:1AA

1.5:1Fail

Similar palettes

More like Monochrome Ocean Depths

View all Monochrome

Stormy Beach Day

Gentle Stream Pebbles