Back to palettes

Palette

Deep Ocean Dream

Reflects the tranquil blues of deep ocean waters and shimmering currents.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Deep Ocean Dream 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 Ocean Dream.

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

Data visualization

#00008B#4169E1#1E90FF#87CEEB#ADD8E6

Palette guide

How to use Deep Ocean Dream

Overview

The Deep Ocean Dream color palette masterfully captures the tranquil depths and shimmering surfaces of the sea, offering a serene and sophisticated aesthetic. Anchored by the profound dark blue of #00008B (Dark Blue), it transitions beautifully through the vibrant #4169E1 (Royal Blue) and dynamic #1E90FF (Dodger Blue), culminating in the airy lightness of #87CEEB (Sky Blue) and #ADD8E6 (Light Blue). This cool-toned collection is ideal for creating designs that communicate trust, stability, and peacefulness. Designers and developers can leverage its harmonious blues to craft immersive user experiences, calming digital interfaces, or elegant brand identities that resonate with a sense of clarity and depth. Its versatility allows for a range from deep, authoritative statements to light, refreshing accents.

Best used for

  • Marine-themed branding and websites
  • Wellness and meditation apps
  • Environmental conservation organizations
  • Spa and relaxation product packaging
  • Technology and data visualization interfaces
  • Children's educational content about oceans

Suggested color roles

primary

Utilize #00008B (Dark Blue) for main navigation, strong headers, or backgrounds requiring a sense of depth and authority, establishing a solid foundation.

secondary

Employ #4169E1 (Royal Blue) for subheadings, active states, or prominent UI elements that need to stand out from the primary without being overly aggressive.

accent

Apply #1E90FF (Dodger Blue) for interactive elements like buttons, links, or notification highlights to draw immediate attention and guide user interaction.

background

Use #ADD8E6 (Light Blue) as a soft, expansive base for content areas, offering a clean, calming backdrop that promotes readability and a sense of openness.

text

For body text, a dark color like #00008B (Dark Blue) or a near-black such as #333333 works well against lighter backgrounds. For headings or larger text, #00008B provides excellent contrast and gravitas.

Accessibility notes

  • Ensure sufficient contrast between lighter background colors like #ADD8E6 and darker text colors such as #00008B or standard black to meet WCAG AA standards.
  • Avoid using #87CEEB or #ADD8E6 for small text on white or very light backgrounds due to potentially low contrast, which can impair readability.
  • Test interactive elements colored with #1E90FF to ensure they have adequate contrast against their surrounding elements and are clearly distinguishable.
  • Always use a contrast checker for all text and UI element combinations, especially when pairing #4169E1 with different shades of blue, to ensure readability for all users.

Recommended combinations

Deep & Bright Contrast

A classic high-contrast pairing for professional websites; #00008B for main text/headers, #1E90FF for calls to action, and #ADD8E6 for subtle backgrounds.

#00008B · #1E90FF · #ADD8E6

Serene Gradient Flow

Ideal for background gradients, subtle hover effects, or visual elements that convey a smooth transition, perfect for calming digital environments.

#4169E1 · #87CEEB · #ADD8E6

Authoritative Base

#00008B as a solid base for sections, #4169E1 for key information or secondary navigation, and #87CEEB for subtle details or tertiary highlights, maintaining a sophisticated feel.

#00008B · #4169E1 · #87CEEB

CSS variables

:root {
  --deep-ocean-dream-1: #00008B;
  --deep-ocean-dream-2: #4169E1;
  --deep-ocean-dream-3: #1E90FF;
  --deep-ocean-dream-4: #87CEEB;
  --deep-ocean-dream-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-dream": {
        1: "#00008B",
        2: "#4169E1",
        3: "#1E90FF",
        4: "#87CEEB",
        5: "#ADD8E6",
      }
    }
  }
}

Related searches

ocean blue color schemedeep water palettecalm blue ui colorsserene brand colorscool tone web design

Palette colors

Hex values

Color 1#00008B
·
Color 2#4169E1
·
Color 3#1E90FF
·
Color 4#87CEEB
·
Color 5#ADD8E6
·

Accessibility

Contrast checker

1
2
3
4
5
1
3.2:1AA18
4.7:1AA
8.8:1AAA
10:1AAA
2
3.2:1AA18
1.5:1Fail
2.8:1Fail
3.2:1AA18
3
4.7:1AA
1.5:1Fail
1.9:1Fail
2.1:1Fail
4
8.8:1AAA
2.8:1Fail
1.9:1Fail
1.1:1Fail
5
10:1AAA
3.2:1AA18
2.1:1Fail
1.1:1Fail

Similar palettes

More like Deep Ocean Dream

View all cool
Cobalt Ocean Depths
Cobalt Tidepool
Ocean Twilight Haze
Pearl Diving Depths
Abyssal Blue Descent
Abyssal Current Glide