Back to palettes

Palette

Oceanic Twilight Bloom

Reflects the mysterious colors where deep ocean meets a fading sunset sky.

coolelegant5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2C3E50#5A6A8C#9D80A0#3A8CA2#6CBDBB

Palette guide

How to use Oceanic Twilight Bloom

Overview

The Oceanic Twilight Bloom palette captures the enigmatic beauty where the deep ocean meets a fading sunset sky, offering a sophisticated and tranquil aesthetic. Dominated by cool, muted tones, it features the profound blue-grey of #2C3E50, a serene muted blue #5A6A8C, and a contemplative purple #9D80A0. These are beautifully complemented by the refreshing teal of #3A8CA2 and the softer, ethereal light teal #6CBDBB. This palette is ideal for designers and developers aiming to evoke a sense of elegance, mystery, and calm. Its balanced blend of deep and vibrant cool hues provides versatility for creating immersive and visually rich experiences, perfect for projects requiring a touch of refined depth.

Best used for

  • Upscale brand identity and luxury marketing
  • Serene web interfaces and mobile applications
  • Editorial design for art, culture, or travel magazines
  • Interior decor for calming and sophisticated spaces
  • Packaging for high-end beauty or wellness products
  • Evening event themes and stationery

Suggested color roles

primary

#2C3E50 (Deep Blue-Grey). Establishes a strong, grounding foundation, excellent for headers, main navigation, or primary brand elements.

secondary

#5A6A8C (Muted Blue). Provides a softer, yet substantial, supporting role for subheadings, background sections, or secondary calls to action.

accent

#9D80A0 (Muted Purple). Introduces a touch of unique warmth and elegance, perfect for highlights, interactive states, or subtle graphic elements.

background

#5A6A8C (Muted Blue). Serves as a rich, sophisticated backdrop, ideal for creating depth and focus on content, especially when paired with lighter text.

text

White or a very light grey (e.g., #F0F0F0) for optimal readability against darker palette colors, or a deep charcoal for lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast between #2C3E50 or #5A6A8C backgrounds and white/light text for WCAG AA compliance.
  • The muted purple #9D80A0 may require careful testing for text legibility, especially against similar mid-tone backgrounds.
  • Use #6CBDBB thoughtfully for interactive elements to ensure it stands out without causing eye strain.
  • Avoid placing #9D80A0 text directly on #5A6A8C backgrounds without verifying contrast, as they might blend too much.

Recommended combinations

Deep Serenity

Ideal for creating a calming, immersive digital experience, like a meditation app or a luxury spa website.

#2C3E50 · #5A6A8C · #6CBDBB

Twilight Hues

Excellent for editorial layouts or artistic branding that requires a sophisticated, slightly mysterious visual narrative.

#5A6A8C · #9D80A0 · #3A8CA2

Mystic Glow

Best for striking visual contrasts in UI elements, data visualization, or bold branding statements.

#2C3E50 · #3A8CA2 · #9D80A0

CSS variables

:root {
  --oceanic-twilight-bloom-1: #2C3E50;
  --oceanic-twilight-bloom-2: #5A6A8C;
  --oceanic-twilight-bloom-3: #9D80A0;
  --oceanic-twilight-bloom-4: #3A8CA2;
  --oceanic-twilight-bloom-5: #6CBDBB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-twilight-bloom": {
        1: "#2C3E50",
        2: "#5A6A8C",
        3: "#9D80A0",
        4: "#3A8CA2",
        5: "#6CBDBB",
      }
    }
  }
}

Related searches

oceanic color schemestwilight inspired palettedeep blue purple colorselegant cool brandingmysterious ui design colors

Palette colors

Hex values

Color 1#2C3E50
·
Color 2#5A6A8C
·
Color 3#9D80A0
·
Color 4#3A8CA2
·
Color 5#6CBDBB
·

Accessibility

Contrast checker

1
2
3
4
5
1
2:1Fail
3.2:1AA18
2.9:1Fail
5:1AA
2
2:1Fail
1.6:1Fail
1.4:1Fail
2.5:1Fail
3
3.2:1AA18
1.6:1Fail
1.1:1Fail
1.6:1Fail
4
2.9:1Fail
1.4:1Fail
1.1:1Fail
1.8:1Fail
5
5:1AA
2.5:1Fail
1.6:1Fail
1.8:1Fail

Similar palettes

More like Oceanic Twilight Bloom

View all cool
Amethyst Field Dusk
Aqua Jewel
Astral Glow Veil
Celestial Nebula Rift
Celestial Ocean Depth
Celestial Ocean Mirror