Back to palettes

Palette

Oceanic Twilight

Captures the serene transition from day to night over vast ocean waters, with a calming, mysterious aura.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A1C2B#2C3E50#5B7B8D#8AA8BF#C1D4E0

Palette guide

How to use Oceanic Twilight

Overview

The Oceanic Twilight palette embodies the serene transition from day to night over vast ocean waters, offering a calming yet mysterious aura. Designers and developers can leverage its deep, cool blues and grays for sophisticated projects. Featuring a rich `#0A1C2B` deep ocean, a balanced `#2C3E50` twilight blue, and a lighter, ethereal `#C1D4E0` mist, this palette is ideal for creating depth and tranquility. Its harmonious progression from dark to light allows for versatile application, from foundational elements to subtle highlights, ensuring a cohesive and professional aesthetic.

Best used for

  • Luxury brand websites and apps
  • Corporate and financial services interfaces
  • Meditation and wellness applications
  • Sophisticated editorial designs
  • High-end product packaging
  • Environmental and marine conservation branding

Suggested color roles

primary

Use `#0A1C2B` as a foundational, deep primary color for headers, main navigation, or strong brand elements. It conveys authority and depth.

secondary

Employ `#2C3E50` for supportive sections, subheadings, or background panels. It provides a softer depth than the primary, ensuring balance.

accent

Introduce `#5B7B8D` sparingly for interactive elements, highlights, or subtle visual cues. Its mid-tone nature offers a gentle contrast.

background

Apply `#C1D4E0` as a clean, airy background color for content areas, allowing darker elements to stand out with clarity.

text

For optimal readability, use `#0A1C2B` or a deep charcoal for body text on lighter backgrounds like `#C1D4E0` or `#8AA8BF`.

Accessibility notes

  • Ensure sufficient contrast between dark text (e.g., `#0A1C2B`) and light backgrounds (e.g., `#C1D4E0`) for WCAG compliance.
  • Use `#5B7B8D` and `#8AA8BF` primarily for larger text or graphical elements, as their contrast with each other or lighter backgrounds might be insufficient for small body text.
  • When placing text on `#2C3E50`, consider using `#C1D4E0` for excellent readability.
  • Avoid using `#C1D4E0` for text on any of the lighter palette colors to prevent low contrast issues.

Recommended combinations

Deep Ocean Contrast

Ideal for hero sections: `#0A1C2B` for background, `#C1D4E0` for main text, and `#8AA8BF` for call-to-action buttons.

#0A1C2B · #C1D4E0 · #8AA8BF

Twilight Harmony

Excellent for card backgrounds or content blocks: `#2C3E50` as base, `#5B7B8D` for headers, and `#C1D4E0` for body text.

#2C3E50 · #5B7B8D · #C1D4E0

Gradient Depths

Perfect for subtle gradients in UI elements, banners, or data visualizations to convey depth and sophistication.

#0A1C2B · #2C3E50 · #5B7B8D

CSS variables

:root {
  --oceanic-twilight-1: #0A1C2B;
  --oceanic-twilight-2: #2C3E50;
  --oceanic-twilight-3: #5B7B8D;
  --oceanic-twilight-4: #8AA8BF;
  --oceanic-twilight-5: #C1D4E0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-twilight": {
        1: "#0A1C2B",
        2: "#2C3E50",
        3: "#5B7B8D",
        4: "#8AA8BF",
        5: "#C1D4E0",
      }
    }
  }
}

Related searches

deep blue color paletteserene dark bluestwilight ocean colorscool corporate palettemysterious blue shades

Palette colors

Hex values

Color 1#0A1C2B
·
Color 2#2C3E50
·
Color 3#5B7B8D
·
Color 4#8AA8BF
·
Color 5#C1D4E0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
3.8:1AA18
6.9:1AA
11.3:1AAA
2
1.6:1Fail
2.4:1Fail
4.4:1AA18
7.2:1AAA
3
3.8:1AA18
2.4:1Fail
1.8:1Fail
3:1Fail
4
6.9:1AA
4.4:1AA18
1.8:1Fail
1.6:1Fail
5
11.3:1AAA
7.2:1AAA
3:1Fail
1.6:1Fail

Similar palettes

More like Oceanic Twilight

View all cool
Abyssal Current Glide
Celestial Ocean Twilight
Cobalt Ocean Depths
Cobalt Tidepool
Deep Ocean Dream
Deep Sea Current