Back to palettes

Palette

Deep Ocean Grotto

Exploring the deep, mysterious blues of an underwater grotto.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A246A#1E468A#3F6CB0#051A4D#2B5A9A

Palette guide

How to use Deep Ocean Grotto

Overview

The Deep Ocean Grotto palette plunges into a realm of rich, mysterious blues, ideal for creating sophisticated and immersive digital experiences. Anchored by profound shades like #0A246A and the even deeper #051A4D, this palette evokes tranquility and professionalism. It offers a spectrum from the vibrant #3F6CB0, perfect for drawing attention, to the balanced #1E468A and #2B5A9A, which provide excellent structural support. Designers and developers can leverage these hues to craft interfaces that feel both secure and intriguing, making it suitable for high-end brands or conceptual projects requiring a serious yet captivating aesthetic. This guide will help you navigate its depths for optimal impact.

Best used for

  • Luxury brand websites and apps
  • Underwater exploration games or documentaries
  • Corporate or financial technology platforms
  • Elegant night mode themes for applications
  • Conceptual art or design portfolios
  • Professional services marketing materials

Suggested color roles

primary

Use #0A246A as the foundational brand color, appearing in headers, primary buttons, and main graphical elements for a strong, authoritative presence.

secondary

Employ #1E468A for secondary navigation, card backgrounds, or information panels, providing a slightly lighter contrast while maintaining depth.

accent

Reserve #3F6CB0 for calls to action, interactive elements, or key highlights where visual pop is essential against the darker blues.

background

Utilize #051A4D as a deep, enveloping background color, perfect for creating an immersive, dark-themed experience or a sophisticated base layer.

text

For optimal readability on dark backgrounds, use #3F6CB0 for headings or a near-white (e.g., #F0F0F0) for body text. For text on #3F6CB0, a dark charcoal or black is recommended.

Accessibility notes

  • Ensure sufficient contrast when pairing lighter colors like #3F6CB0 with darker backgrounds such as #051A4D for WCAG AA compliance.
  • Avoid using #0A246A or #1E468A for small text on #051A4D backgrounds, as contrast may be insufficient for readability.
  • When using #3F6CB0 as an accent, ensure it has a contrast ratio of at least 3:1 against adjacent non-text elements if conveying information.
  • Provide clear focus indicators for interactive elements; a light outline or glow around #3F6CB0 buttons can enhance usability.

Recommended combinations

Deep Sea Contrast

Ideal for primary content areas: #051A4D as background, #3F6CB0 for headings/CTAs, and #0A246A for secondary elements or borders.

#051A4D · #3F6CB0 · #0A246A

Grotto Gradient

Excellent for layered UI elements or subtle visual transitions, with #0A246A as base, #1E468A for cards, and #2B5A9A for interactive states.

#0A246A · #1E468A · #2B5A9A

Accent Spotlight

Use #1E468A for main content background, #3F6CB0 for striking accents or key information, and #051A4D for supportive dark text or icons.

#1E468A · #3F6CB0 · #051A4D

CSS variables

:root {
  --deep-ocean-grotto-1: #0A246A;
  --deep-ocean-grotto-2: #1E468A;
  --deep-ocean-grotto-3: #3F6CB0;
  --deep-ocean-grotto-4: #051A4D;
  --deep-ocean-grotto-5: #2B5A9A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "deep-ocean-grotto": {
        1: "#0A246A",
        2: "#1E468A",
        3: "#3F6CB0",
        4: "#051A4D",
        5: "#2B5A9A",
      }
    }
  }
}

Related searches

dark blue color schememysterious blue paletteocean themed web design colorsprofessional deep blue brandingnavy blue ui colors

Palette colors

Hex values

Color 1#0A246A
·
Color 2#1E468A
·
Color 3#3F6CB0
·
Color 4#051A4D
·
Color 5#2B5A9A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.7:1Fail
1.2:1Fail
2.1:1Fail
2
1.6:1Fail
1.7:1Fail
1.8:1Fail
1.3:1Fail
3
2.7:1Fail
1.7:1Fail
3.2:1AA18
1.3:1Fail
4
1.2:1Fail
1.8:1Fail
3.2:1AA18
2.4:1Fail
5
2.1:1Fail
1.3:1Fail
1.3:1Fail
2.4:1Fail

Similar palettes

More like Deep Ocean Grotto

View all dark
Abyss Gaze
Abyssal Bioluminescence
Abyssal Bioluminescent Glow
Abyssal Coral Glow
Abyssal Depths
Abyssal Midnight Reef