Back to palettes

Palette

Oceanic Jelly Bloom

Translucent pastels and bright pops of color, inspired by the graceful, glowing dance of jellyfish in the ocean.

vibrantplayful5 colors
More vibrant 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

#FFC0CB#E0BBE4#40E0D0#8A2BE2#ADD8E6

Palette guide

How to use Oceanic Jelly Bloom

Overview

The "Oceanic Jelly Bloom" palette (ID oceanic-jelly-bloom) is a playful and vibrant collection, inspired by the graceful, glowing dance of jellyfish, featuring translucent pastels and bright pops of color. It opens with a soft pink #FFC0CB and a gentle lavender #E0BBE4. A striking turquoise #40E0D0 provides a refreshing contrast, while a deep blue-violet #8A2BE2 adds a touch of mystery. Completing the set is a light powder blue #ADD8E6. This palette is perfect for projects that aim for a whimsical, dreamy, yet energetic feel. Designers can use it to create engaging interfaces, imaginative branding, or playful illustrations. Developers will find this palette excellent for crafting unique digital experiences that stand out, appealing to a creative or youthful audience with its distinct and lively color combinations.

Best used for

  • Children's product branding or websites
  • Creative arts and craft businesses
  • Youth fashion or accessories
  • Playful mobile game interfaces
  • Dreamy illustration styles
  • Event planning for fun, vibrant themes

Suggested color roles

primary

A vibrant, refreshing turquoise #40E0D0, ideal for main brand elements, large sections, or prominent UI components that need to feel fresh and engaging.

secondary

A light, airy powder blue #ADD8E6, excellent for supporting backgrounds, navigation elements, or secondary calls-to-action, adding a soft touch.

accent

A deep, intriguing blue-violet #8A2BE2, perfect for bold accents, important icons, or interactive states where a touch of magic and depth is desired.

background

A soft, delicate pink #FFC0CB, providing a warm, playful, and inviting canvas that allows the other colors to shine.

text

Use a dark color like #8A2BE2 or a deep charcoal for primary text on light backgrounds like #FFC0CB or #ADD8E6 to ensure readability.

Accessibility notes

  • Avoid using #FFC0CB, #E0BBE4, or #ADD8E6 for small text on light backgrounds due to poor contrast.
  • Ensure white or very light text has sufficient contrast against #8A2BE2.
  • Text in #40E0D0 on #ADD8E6 will likely have insufficient contrast; verify rigorously.
  • For critical information, use high-contrast pairings, such as dark text on the lightest backgrounds.

Recommended combinations

Whimsical Dream

Ideal for hero sections, soft backgrounds, or product cards, creating a light, airy, and inviting feel.

#FFC0CB · #ADD8E6 · #40E0D0

Jellyfish Pop

Effective for accentuating interactive elements, calls-to-action, or vibrant illustrations, leveraging striking contrasts.

#E0BBE4 · #8A2BE2 · #40E0D0

Pastel Glow

Great for background patterns, subtle gradients, or decorative elements that require a soft, blended, and playful look.

#ADD8E6 · #FFC0CB · #E0BBE4

CSS variables

:root {
  --oceanic-jelly-bloom-1: #FFC0CB;
  --oceanic-jelly-bloom-2: #E0BBE4;
  --oceanic-jelly-bloom-3: #40E0D0;
  --oceanic-jelly-bloom-4: #8A2BE2;
  --oceanic-jelly-bloom-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-jelly-bloom": {
        1: "#FFC0CB",
        2: "#E0BBE4",
        3: "#40E0D0",
        4: "#8A2BE2",
        5: "#ADD8E6",
      }
    }
  }
}

Related searches

playful pastel vibrant palettedreamy jellyfish color schemecolorful whimsical brandinglight blue pink purple comboyouthful UI design colors

Palette colors

Hex values

Color 1#FFC0CB
·
Color 2#E0BBE4
·
Color 3#40E0D0
·
Color 4#8A2BE2
·
Color 5#ADD8E6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.1:1Fail
3.9:1AA18
1:1Fail
2
1.1:1Fail
1:1Fail
3.5:1AA18
1.1:1Fail
3
1.1:1Fail
1:1Fail
3.6:1AA18
1.1:1Fail
4
3.9:1AA18
3.5:1AA18
3.6:1AA18
3.9:1AA18
5
1:1Fail
1.1:1Fail
1.1:1Fail
3.9:1AA18

Similar palettes

More like Oceanic Jelly Bloom

View all vibrant