Back to palettes

Palette

Oceanic Jelly Bloom

A shimmering cascade of deep to light blues, capturing the graceful, translucent glow of oceanic 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

#006B8F#009DD4#80D1F3#004D6B#53BCEB

Palette guide

How to use Oceanic Jelly Bloom

Overview

The "Oceanic Jelly Bloom" palette (ID oceanic-jelly-bloom-2) presents a shimmering cascade of deep to light blues, perfectly capturing the translucent glow of oceanic jellyfish. This serene collection features the profound #004D6B and a slightly brighter #006B8F, providing a solid, deep-water foundation. The palette then ascends to the vibrant aqua of #009DD4, a luminous sky blue #53BCEB, and culminates in the ethereal lightness of #80D1F3. Designers can utilize these hues to create soothing, elegant, and visually expansive interfaces, branding, or editorial content. Developers will find this palette excellent for crafting digital experiences that evoke tranquility, clarity, and a subtle sense of wonder, making it ideal for nature-inspired or calming applications.

Best used for

  • Meditation or mindfulness apps
  • Aquarium or marine life exhibits branding
  • Ethereal digital art or animations
  • Wellness product packaging
  • Serene website backgrounds
  • Environmental conservation educational materials

Suggested color roles

primary

A balanced, deep teal-blue #006B8F, ideal for main brand elements, navigation, or significant content blocks to establish a calm, professional tone.

secondary

A vibrant, clear blue #009DD4, excellent for interactive elements, secondary calls-to-action, or graphic accents that need to pop gently.

accent

A bright, luminous sky blue #53BCEB, perfect for subtle highlights, hover states, or small decorative elements to add a touch of lightness.

background

A very deep, grounding blue-green #004D6B, providing a rich, immersive backdrop that enhances the luminosity of the lighter blues.

text

Use white or a very light gray for primary text on dark backgrounds like #004D6B. For subheadings, a lighter blue like #009DD4 can work, ensuring good contrast.

Accessibility notes

  • Ensure white text has sufficient contrast against the darkest colors, #004D6B and #006B8F.
  • Avoid using #80D1F3 for small text on lighter backgrounds; it's best for large headings or decorative use.
  • Text in #009DD4 on #53BCEB will likely have insufficient contrast; always verify.
  • For critical information, aim for high contrast pairings like white on #004D6B to meet WCAG standards.

Recommended combinations

Deep Water Glow

Ideal for hero sections, main navigation, or immersive backgrounds, creating depth and a sense of light.

#004D6B · #009DD4 · #80D1F3

Translucent Flow

Effective for content cards, data visualizations, or subtle gradients, providing a harmonious blend.

#006B8F · #53BCEB · #009DD4

Jellyfish Shimmer

Great for accentuating interactive elements, hover states, or illustrative details, leveraging light and dark.

#80D1F3 · #004D6B · #53BCEB

CSS variables

:root {
  --oceanic-jelly-bloom-2-1: #006B8F;
  --oceanic-jelly-bloom-2-2: #009DD4;
  --oceanic-jelly-bloom-2-3: #80D1F3;
  --oceanic-jelly-bloom-2-4: #004D6B;
  --oceanic-jelly-bloom-2-5: #53BCEB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-jelly-bloom-2": {
        1: "#006B8F",
        2: "#009DD4",
        3: "#80D1F3",
        4: "#004D6B",
        5: "#53BCEB",
      }
    }
  }
}

Related searches

calm blue green palettejellyfish inspired colorsserene aquatic ui designdeep to light blue schemetranslucent ocean brand colors

Palette colors

Hex values

Color 1#006B8F
·
Color 2#009DD4
·
Color 3#80D1F3
·
Color 4#004D6B
·
Color 5#53BCEB
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.5:1AA18
1.5:1Fail
2.8:1Fail
2
1.9:1Fail
1.8:1Fail
3:1Fail
1.4:1Fail
3
3.5:1AA18
1.8:1Fail
5.4:1AA
1.3:1Fail
4
1.5:1Fail
3:1Fail
5.4:1AA
4.3:1AA18
5
2.8:1Fail
1.4:1Fail
1.3:1Fail
4.3:1AA18

Similar palettes

More like Oceanic Jelly Bloom

View all cool
Azure Reef Sanctuary
Jellyfish Ocean Dream
Ocean Depths Glimmer
Oceanic Jelly Bloom
Oceanic Jellyfish Swirl
Abyssal Blue Descent