Palette

Oceanic Jellyfish Swirl

Flowing blues and aquas evoke the graceful, ethereal movements of jellyfish drifting in the open ocean.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Oceanic Jellyfish Swirl 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 Jellyfish Swirl.

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

Data visualization

#89CFF0#B0E0E6#ADD8E6#E0FFFF#4682B4

Palette guide

How to use Oceanic Jellyfish Swirl

Overview

The "Oceanic Jellyfish Swirl" palette beautifully evokes the graceful, ethereal movements of jellyfish drifting in the open ocean with its flowing blues and aquas. This calm collection features the soft baby blue of #89CFF0 and the serene powder blue of #ADD8E6. It includes a slightly lighter pale turquoise #B0E0E6, leading to the almost white aqua of #E0FFFF. Anchoring these lighter tones is the balanced steel blue of #4682B4. This palette is perfect for projects that aim to convey tranquility, lightness, and fluid elegance. Designers can use these hues to create soothing digital interfaces, gentle branding, or expansive visual content. Developers will find this palette excellent for crafting applications that feel open, clean, and inviting, ideal for wellness or nature-inspired platforms.

Best used for

Spa, wellness, or meditation services
Coastal interior design inspiration
Relaxation or mindfulness apps
Baby product branding
Environmental awareness campaigns (ocean focus)
Soft, dreamy digital art

Suggested color roles

primary

A soft, inviting baby blue #89CFF0, ideal for main brand elements, large sections, or prominent UI components that establish a gentle, calm mood.

secondary

A slightly more muted powder blue #ADD8E6, excellent for supporting backgrounds, navigation elements, or secondary calls-to-action that need to feel subtle.

accent

A grounding steel blue #4682B4, perfect for subtle accents, important icons, or interactive states where a touch of depth and stability is desired.

background

A very light, almost white aqua #E0FFFF, providing a clean, expansive, and airy canvas that enhances readability and lightness.

text

Use a dark blue like #4682B4 or a deep charcoal for primary text on light backgrounds like #E0FFFF or #ADD8E6 to ensure excellent readability.

Accessibility notes

Ensure sufficient contrast when using #E0FFFF as a background; #4682B4 is a good choice for text.
Avoid using #B0E0E6 or #ADD8E6 for small text on other light blues; contrast will be insufficient.
White text will not work on most colors in this palette except #4682B4.
For critical information, always prioritize a high contrast pairing, such as dark text on the lightest backgrounds.

Recommended combinations

Ocean Breeze

Ideal for hero sections, main navigation, or product cards, creating a clean, layered, and calming look.

#E0FFFF · #89CFF0 · #4682B4

Aqua Flow

Effective for content blocks, subtle gradients, or informational panels, providing gentle visual separation.

#ADD8E6 · #B0E0E6 · #4682B4

Jellyfish Ethereal

Great for background patterns, decorative elements, or soft illustrations that require a blended, airy, and delicate feel.

#89CFF0 · #E0FFFF · #ADD8E6

CSS variables

:root {
  --oceanic-jellyfish-swirl-1: #89CFF0;
  --oceanic-jellyfish-swirl-2: #B0E0E6;
  --oceanic-jellyfish-swirl-3: #ADD8E6;
  --oceanic-jellyfish-swirl-4: #E0FFFF;
  --oceanic-jellyfish-swirl-5: #4682B4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-jellyfish-swirl": {
        1: "#89CFF0",
        2: "#B0E0E6",
        3: "#ADD8E6",
        4: "#E0FFFF",
        5: "#4682B4",
      }
    }
  }
}

Hex values

Color 1#89CFF0

Color 2#B0E0E6

Color 3#ADD8E6

Color 4#E0FFFF

Color 5#4682B4

Accessibility

Contrast checker

1.2:1Fail

1.1:1Fail

1.6:1Fail

2.4:1Fail

1.2:1Fail

1.1:1Fail

1.4:1Fail

2.9:1Fail

1.1:1Fail

1.4:1Fail

2.7:1Fail

1.6:1Fail

1.4:1Fail

3.9:1AA18

2.4:1Fail

2.9:1Fail

2.7:1Fail

3.9:1AA18

Similar palettes

More like Oceanic Jellyfish Swirl

Oceanic Jellyfish Swirl

See it in context.

Ready when you are.

Built with Oceanic Jellyfish Swirl.

How to use Oceanic Jellyfish Swirl

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Ocean Breeze

Aqua Flow

Jellyfish Ethereal

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Oceanic Jellyfish Swirl