Back to palettes

Palette

Oceanic Abyss Flora

Deep, dark blues and muted greens reflecting bioluminescent life in the mysterious ocean abyss.

DarkDark5 colors
More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Oceanic Abyss Flora 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 Oceanic Abyss Flora.

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

Data visualization

#0F1E2E#2A4B6E#4B7AA0#7FAFC7#173652

Palette guide

How to use Oceanic Abyss Flora

Overview

The "Oceanic Abyss Flora" palette reflects bioluminescent life in the mysterious ocean abyss with deep, dark blues and muted greens. This captivating collection, featuring #0F1E2E, #2A4B6E, and #4B7AA0, is perfect for projects that aim to evoke a sense of organic depth, hidden beauty, and sophisticated intrigue. Designers can leverage these hues to create immersive and modern interfaces, while developers will appreciate the subtle shift to #7FAFC7 and the grounding #173652 for establishing clear visual hierarchy. It's an ideal palette for conveying professionalism and the allure of the unknown, offering a cool, calming, yet intriguing atmosphere suitable for high-end digital experiences or branding that values natural mystery.

Best used for

  • Nature documentary websites
  • Environmental conservation campaigns
  • Luxury wellness product branding
  • Science museum exhibits and digital guides
  • Dark mode themes for creative software
  • High-end interior design concepts (biophilic)

Suggested color roles

primary

Utilize #0F1E2E as the foundational, deepest blue-grey, perfect for backgrounds, large headers, or elements requiring significant visual weight, conveying profound depth.

secondary

Employ #2A4B6E as a supporting dark blue, excellent for sub-sections, card backgrounds, or secondary navigation, adding subtle differentiation.

accent

Introduce #7FAFC7 as a luminous, soft blue-green accent, ideal for calls-to-action, progress indicators, or interactive elements, providing crucial contrast and a touch of organic light.

background

Use #0F1E2E for primary backgrounds to establish a deep, immersive environment, or #173652 for slightly lighter dark sections with a subtle green undertone.

text

For primary body text on dark backgrounds, use #7FAFC7 or a very light grey (e.g., #E0E0E0) to ensure excellent readability and a subtle, cool glow.

Accessibility notes

  • Always ensure sufficient contrast for text, especially when using lighter colors like #7FAFC7 on darker backgrounds like #0F1E2E.
  • Avoid using #2A4B6E for small text on #0F1E2E backgrounds as contrast may be insufficient for WCAG AA.
  • Leverage #7FAFC7 for interactive elements to provide clear visual cues against the deep backdrop.
  • For larger headings, #4B7AA0 can be used on #0F1E2E, but verify contrast for readability.

Recommended combinations

Bioluminescent Depths

A strong dark base with a subtly different dark for content and a luminous blue-green accent for key information or interactivity.

#0F1E2E · #173652 · #7FAFC7

Flora Gradient

Create smooth transitions or layered elements that mimic the gradual change of light and organic textures in deep water.

#2A4B6E · #4B7AA0 · #7FAFC7

Mystic Growth

Perfect for dark themes where a mid-tone blue provides depth, a muted green grounds the design, and the darkest color defines the overall mood.

#0F1E2E · #4B7AA0 · #173652

CSS variables

:root {
  --oceanic-abyss-flora-1: #0F1E2E;
  --oceanic-abyss-flora-2: #2A4B6E;
  --oceanic-abyss-flora-3: #4B7AA0;
  --oceanic-abyss-flora-4: #7FAFC7;
  --oceanic-abyss-flora-5: #173652;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-abyss-flora": {
        1: "#0F1E2E",
        2: "#2A4B6E",
        3: "#4B7AA0",
        4: "#7FAFC7",
        5: "#173652",
      }
    }
  }
}

Related searches

deep blue green paletteunderwater dark themebioluminescent color schememysterious nature brandingsophisticated dark blue green

Palette colors

Hex values

Color 1#0F1E2E
·
Color 2#2A4B6E
·
Color 3#4B7AA0
·
Color 4#7FAFC7
·
Color 5#173652
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.7:1AA18
7.1:1AAA
1.4:1Fail
2
1.9:1Fail
2:1Fail
3.8:1AA18
1.4:1Fail
3
3.7:1AA18
2:1Fail
1.9:1Fail
2.7:1Fail
4
7.1:1AAA
3.8:1AA18
1.9:1Fail
5.3:1AA
5
1.4:1Fail
1.4:1Fail
2.7:1Fail
5.3:1AA

Similar palettes

More like Oceanic Abyss Flora

View all Dark
Abyssal Bioluminescence
Abyssal Seaweed Garden
Oceanic Abyss Murmur
Deep Forest Murmur
Deep Ocean Abyss
Oceanic Trench Bloom