Palette

Abyssal Bioluminescence

Glimmering blues and aquas reflect the mystery and alien beauty of the ocean's deep, dark places.

cooldark5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Abyssal Bioluminescence 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 Abyssal Bioluminescence.

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

Data visualization

#0F2E3D#1A4F6A#3A7EA0#94C3DC#D1E6F0

Palette guide

How to use Abyssal Bioluminescence

Overview

The Abyssal Bioluminescence palette captures glimmering blues and aquas, reflecting the mystery and alien beauty of the ocean's deep, dark places. Featuring a deep Teal Blue (#0F2E3D), a rich Dark Cyan (#1A4F6A), a balanced Cadet Blue (#3A7EA0), a lighter Powder Blue (#94C3DC), and a soft Pale Cyan (#D1E6F0), this cool-toned collection offers a tranquil yet intriguing flow. Designers and developers can leverage these harmonious blues to create calming user interfaces, sophisticated branding, or evocative digital art. Its gradients and tonal variations are ideal for projects that aim to convey depth, fluidity, and a connection to nature, ensuring a cohesive and visually immersive experience across various applications.

Best used for

Nautical-themed branding and identities
Environmental and conservation website design
Spa and wellness digital interfaces
Abstract ocean art and digital illustrations
UI/UX for travel or maritime applications
Calming interior design color schemes

Suggested color roles

primary

#0F2E3D (Teal Blue) - Use this deep blue for dominant backgrounds, strong headers, or foundational elements to establish a sense of depth and mystery.

secondary

#1A4F6A (Dark Cyan) - Excellent for secondary content areas, prominent navigation, or to provide a rich, complementary tone to the primary.

accent

#94C3DC (Powder Blue) - Deploy this lighter blue sparingly for highlights, interactive states, or small details that need to pop and add a refreshing, luminous touch.

background

Utilize #D1E6F0 (Pale Cyan) for a light, airy canvas, or #0F2E3D (Teal Blue) for a deep, immersive backdrop that evokes the ocean's depths.

text

For optimal readability, use a dark charcoal (#333333) or #0F2E3D (Teal Blue) on lighter backgrounds, and crisp white (#FFFFFF) or #D1E6F0 (Pale Cyan) on darker elements.

Accessibility notes

Ensure sufficient contrast when using lighter blues like #94C3DC or #D1E6F0 for text on similar light backgrounds; opt for darker text.
Always verify contrast ratios for all text and interactive elements to meet WCAG AA or AAA standards, especially between adjacent blues.
Be mindful that #3A7EA0 (Cadet Blue) and #1A4F6A (Dark Cyan) might have insufficient contrast for small text when used together, provide other cues.
Avoid relying solely on subtle blue shifts to convey information; use icons, underlines, or text labels for clarity.

Recommended combinations

Deep Sea Gradient

Ideal for creating layered backgrounds, immersive hero sections, or a strong, harmonious base for ocean-themed designs.

#0F2E3D · #1A4F6A · #3A7EA0

Biolume Shimmer

Effective for lighter UI elements, gradients, or to represent reflections and highlights on a watery surface.

#94C3DC · #D1E6F0 · #3A7EA0

Current Flow

Perfect for data visualizations, progress bars, or any element requiring a smooth, flowing transition of blues.

#1A4F6A · #3A7EA0 · #94C3DC

CSS variables

:root {
  --abyssal-bioluminescence-2-1: #0F2E3D;
  --abyssal-bioluminescence-2-2: #1A4F6A;
  --abyssal-bioluminescence-2-3: #3A7EA0;
  --abyssal-bioluminescence-2-4: #94C3DC;
  --abyssal-bioluminescence-2-5: #D1E6F0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "abyssal-bioluminescence-2": {
        1: "#0F2E3D",
        2: "#1A4F6A",
        3: "#3A7EA0",
        4: "#94C3DC",
        5: "#D1E6F0",
      }
    }
  }
}

Hex values

Color 1#0F2E3D

Color 2#1A4F6A

Color 3#3A7EA0

Color 4#94C3DC

Color 5#D1E6F0

Accessibility

Contrast checker

1.6:1Fail

3.2:1AA18

7.5:1AAA

11:1AAA

1.6:1Fail

2:1Fail

4.7:1AA

6.9:1AA

3.2:1AA18

2:1Fail

2.4:1Fail

3.5:1AA18

7.5:1AAA

4.7:1AA

2.4:1Fail

1.5:1Fail

11:1AAA

6.9:1AA

3.5:1AA18

1.5:1Fail

Similar palettes

More like Abyssal Bioluminescence

View all cool

Deep Ocean Bloom

Abyssal Current Glide

Bioluminescent Abyss

Deep Ocean Currents

Deep Ocean Trench

Midnight Ocean Trench