Palette

Ocean Dreamscape

A vivid descent into the ocean's depths, from dark abyss to shimmering surface reflections.

CoolCalm5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A1128#001F54#034078#0A6BE1#B2D7F3

Palette guide

How to use Ocean Dreamscape

Overview

The Ocean Dreamscape palette vividly portrays a descent into the ocean's depths, offering a compelling range from the abyss-like #0A1128 (Dark Sapphire) to the shimmering surface reflection of #B2D7F3 (Light Sky Blue). This palette is built on rich, deep blues like #001F54 (Midnight Blue) and #034078 (Indigo Dye), punctuated by the striking #0A6BE1 (Bright Blue). Designers and developers can leverage this spectrum to create immersive, emotional, and dynamic digital experiences. It’s particularly effective for projects that aim to convey depth, wisdom, serenity, and a touch of the fantastical, making it versatile for both artistic and corporate applications seeking a sophisticated blue theme.

Best used for

High-tech company branding
Immersive storytelling websites
Space or water-themed video games
Interactive educational tools
Art gallery or museum digital interfaces
Professional portfolio sites

Suggested color roles

primary

Establish a profound base with #0A1128 for large backgrounds or foundational branding elements.

secondary

Use #001F54 or #034078 for secondary sections, panels, or to add visual weight.

accent

#0A6BE1 is the ideal choice for calls to action, interactive elements, or key highlights due to its vibrant nature.

background

#0A1128 offers a dramatic dark background, while #B2D7F3 provides a light, airy canvas for content.

text

For dark backgrounds, a bright white or light gray is essential. On #B2D7F3, a deep blue like #0A1128 ensures readability.

Accessibility notes

Ensure strong contrast for text on dark backgrounds; white is crucial for #0A1128, #001F54, and #034078.
#0A6BE1 should be used carefully for text, especially small fonts, as its vibrancy can impact readability without sufficient contrast.
When using #B2D7F3 as a background, ensure text in #0A1128 or #001F54 meets AA/AAA contrast ratios.
Avoid using #0A6BE1 solely to convey information; pair it with icons or other visual cues.

Recommended combinations

Abyssal Glow

Creates a dramatic visual, perfect for hero sections or focal points with high contrast.

#0A1128 · #0A6BE1 · #B2D7F3

Deep Current

Ideal for layered interfaces, providing depth for panels and clear readability for content.

#001F54 · #034078 · #B2D7F3

Surface Shimmer

Great for light-themed designs, using the bright blue as an accent and the dark blue for text.

#B2D7F3 · #0A6BE1 · #0A1128

CSS variables

:root {
  --ocean-dreamscape-1: #0A1128;
  --ocean-dreamscape-2: #001F54;
  --ocean-dreamscape-3: #034078;
  --ocean-dreamscape-4: #0A6BE1;
  --ocean-dreamscape-5: #B2D7F3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-dreamscape": {
        1: "#0A1128",
        2: "#001F54",
        3: "#034078",
        4: "#0A6BE1",
        5: "#B2D7F3",
      }
    }
  }
}

Hex values

Color 1#0A1128

Color 2#001F54

Color 3#034078

Color 4#0A6BE1

Color 5#B2D7F3

Accessibility

Contrast checker

1.2:1Fail

1.8:1Fail

3.7:1AA18

12.4:1AAA

1.2:1Fail

1.5:1Fail

3.2:1AA18

10.5:1AAA

1.8:1Fail

1.5:1Fail

2.1:1Fail

6.9:1AA

3.7:1AA18

3.2:1AA18

2.1:1Fail

3.3:1AA18

12.4:1AAA

10.5:1AAA

6.9:1AA

3.3:1AA18

Similar palettes

More like Ocean Dreamscape

View all Cool

Sea Spray Ocean

Celestial Ocean Twilight

Indigo Ocean Depth

Muted Ocean Depth

Sapphire Grotto Waters

Aegean Coastline Muse