Palette

Jellyfish Ocean Dream

The serene, floating beauty of jellyfish, captured in translucent blues and soft, bioluminescent purples.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Jellyfish Ocean Dream 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 Jellyfish Ocean Dream.

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

Data visualization

#1E90FF#4682B4#87CEEB#E0FFFF#9370DB

Palette guide

How to use Jellyfish Ocean Dream

Overview

The 'Jellyfish Ocean Dream' palette evokes the serene, ethereal beauty of deep-sea life with a tranquil blend of cool blues and a soft, bioluminescent purple. This palette features the vibrant Dodger Blue (#1E90FF), the grounding Steel Blue (#4682B4), and the airy Sky Blue (#87CEEB). A delicate Light Cyan (#E0FFFF) provides a luminous touch, while Medium Purple (#9370DB) adds a mystical, dreamlike accent. Ideal for projects seeking a calm, sophisticated, and slightly otherworldly aesthetic, it offers a refreshing visual experience for users. Designers and developers will find its harmonious range perfect for creating immersive digital environments or soothing brand identities.

Best used for

meditation apps
spa and wellness branding
aquatic-themed websites
ethereal digital art
children's book illustrations
serene UI/UX designs

Suggested color roles

primary

Use Dodger Blue (#1E90FF) for main calls-to-action or prominent headings to draw attention with its vibrant yet calm energy.

secondary

Steel Blue (#4682B4) is excellent for subheadings, navigation elements, or graphical components, offering a stable and deep contrast.

accent

Medium Purple (#9370DB) serves as a captivating accent for interactive elements, highlights, or decorative flourishes, adding a touch of magic.

background

Light Cyan (#E0FFFF) is perfect for clean, expansive backgrounds, providing a light, airy canvas that enhances readability and tranquility.

text

For body text, a dark grey or even the Steel Blue (#4682B4) can work well against lighter backgrounds like #E0FFFF, ensuring good legibility. For dark backgrounds, white text is ideal.

Accessibility notes

Ensure sufficient contrast between text and background, especially for #87CEEB and #E0FFFF. Consider using dark text like charcoal or black.
Pair #1E90FF or #4682B4 with #E0FFFF for high contrast text/background combinations.
Avoid using #E0FFFF for small text on very light backgrounds as it may lack readability.
When using #9370DB as an accent, ensure it has adequate contrast with adjacent colors, especially for interactive elements.

Recommended combinations

Ocean Depths

Ideal for strong headers, hero sections, or impactful graphics that need depth and a touch of mystery.

#1E90FF · #4682B4 · #9370DB

Ethereal Glow

Perfect for soft backgrounds, subtle gradients, or elements requiring a light, dreamy, and translucent feel.

#87CEEB · #E0FFFF · #9370DB

Calm UI

Effective for user interface elements where clarity and a soothing yet professional appearance are key, such as buttons and cards.

#4682B4 · #E0FFFF · #1E90FF

CSS variables

:root {
  --jellyfish-ocean-dream-1: #1E90FF;
  --jellyfish-ocean-dream-2: #4682B4;
  --jellyfish-ocean-dream-3: #87CEEB;
  --jellyfish-ocean-dream-4: #E0FFFF;
  --jellyfish-ocean-dream-5: #9370DB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "jellyfish-ocean-dream": {
        1: "#1E90FF",
        2: "#4682B4",
        3: "#87CEEB",
        4: "#E0FFFF",
        5: "#9370DB",
      }
    }
  }
}

Hex values

Color 1#1E90FF

Color 2#4682B4

Color 3#87CEEB

Color 4#E0FFFF

Color 5#9370DB

Accessibility

Contrast checker

1.3:1Fail

1.9:1Fail

3.1:1AA18

1.2:1Fail

1.3:1Fail

2.4:1Fail

3.9:1AA18

1.1:1Fail