Palette

Oceanic Jelly Bloom

Graceful blues and light aquas mimic the translucent, floating beauty of bioluminescent jellyfish.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Oceanic Jelly Bloom 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 Jelly Bloom.

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

Data visualization

#0F1F2B#2B4A6E#5A8BBD#8CE0F8#E0F5F8

Palette guide

How to use Oceanic Jelly Bloom

Overview

The "Oceanic Jelly Bloom" palette (ID oceanic-jelly-bloom-3) beautifully captures the ethereal, bioluminescent dance of jellyfish with its graceful blues and light aquas. This serene collection ranges from the very deep, almost black #0F1F2B, through the rich #2B4A6E and the balanced #5A8BBD. It lightens further with the bright #8CE0F8 and culminates in the airy, near-white #E0F5F8. This palette is ideal for projects seeking a tranquil, sophisticated, and clean aesthetic. Designers can use these hues to create calming digital interfaces, elegant branding, or atmospheric visual content. Developers will find this palette excellent for crafting applications that convey peace, clarity, and a delicate sense of natural beauty, perfect for wellness or nature-focused platforms.

Best used for

Spa, yoga, or meditation retreat branding
Clean, minimalist website designs
Environmental advocacy campaigns
Premium skincare or beauty product packaging
Ethereal digital illustrations
Educational content on marine biology

Suggested color roles

primary

A deep, calming blue #2B4A6E, ideal for main brand elements, navigation, or significant content blocks, establishing a sophisticated yet gentle tone.

secondary

A balanced mid-tone blue #5A8BBD, excellent for supporting graphics, secondary calls-to-action, or sections requiring a clear, approachable blue.

accent

A bright, luminous aqua #8CE0F8, perfect for subtle highlights, interactive elements, or small decorative details that add a touch of lightness and glow.

background

A very light, near-white aqua #E0F5F8, providing an expansive, clean, and airy canvas that enhances readability and openness.

text

Use a very dark color like #0F1F2B for primary text on light backgrounds such as #E0F5F8. For headings, #2B4A6E offers good contrast and sophistication.

Accessibility notes

Ensure #0F1F2B or a very dark charcoal is used for text on #E0F5F8 and #8CE0F8 backgrounds for WCAG AA compliance.
Avoid using #8CE0F8 for small text, especially on #5A8BBD or #E0F5F8, due to insufficient contrast.
White text works well on #0F1F2B and #2B4A6E, offering strong readability.
When using mid-tones like #5A8BBD for text, ensure the background provides enough luminance difference.

Recommended combinations

Deep Glow

Ideal for hero sections, main navigation, or immersive backgrounds, creating depth and an ethereal light.

#0F1F2B · #5A8BBD · #E0F5F8

Aqua Serenity

Effective for content cards, informational blocks, or subtle gradients, providing a harmonious and calm blend.

#2B4A6E · #8CE0F8 · #5A8BBD

Jellyfish Light

Great for accentuating interactive elements, hover states, or delicate illustrations, leveraging high contrast and lightness.

#E0F5F8 · #0F1F2B · #8CE0F8

CSS variables

:root {
  --oceanic-jelly-bloom-3-1: #0F1F2B;
  --oceanic-jelly-bloom-3-2: #2B4A6E;
  --oceanic-jelly-bloom-3-3: #5A8BBD;
  --oceanic-jelly-bloom-3-4: #8CE0F8;
  --oceanic-jelly-bloom-3-5: #E0F5F8;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-jelly-bloom-3": {
        1: "#0F1F2B",
        2: "#2B4A6E",
        3: "#5A8BBD",
        4: "#8CE0F8",
        5: "#E0F5F8",
      }
    }
  }
}

Hex values

Color 1#0F1F2B

Color 2#2B4A6E

Color 3#5A8BBD

Color 4#8CE0F8

Color 5#E0F5F8

Accessibility

Contrast checker

1.8:1Fail

4.7:1AA

11.3:1AAA

14.9:1AAA

1.8:1Fail

2.5:1Fail

6.1:1AA

8.1:1AAA

4.7:1AA

2.5:1Fail

2.4:1Fail

3.2:1AA18

11.3:1AAA

6.1:1AA

2.4:1Fail

1.3:1Fail

14.9:1AAA

8.1:1AAA

3.2:1AA18

1.3:1Fail

Similar palettes

More like Oceanic Jelly Bloom

View all cool

Jellyfish Ocean Dream

Oceanic Jellyfish Swirl