Palette

Ocean Twilight Haze

Evoking the serene yet mysterious depths of the ocean at dusk, with shifting blues and muted greys, perfect for contemplative design.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#1A3E5C#4A7BA0#7BB2D9#A6D0F2#2B5F84

Palette guide

How to use Ocean Twilight Haze

Overview

The "Ocean Twilight Haze" palette evokes the serene yet mysterious depths of the ocean at dusk, with shifting blues and muted greys, perfect for contemplative design. This cool collection, featuring #1A3E5C, #4A7BA0, and #7BB2D9, offers a progression from deep, dark blues to lighter, ethereal tones. Designers can use this palette to create immersive and sophisticated interfaces, while developers will find the depth provided by #2B5F84 and the lightness of #A6D0F2 excellent for establishing visual hierarchy. Ideal for projects that require a sense of calm, focus, and understated elegance, it ensures a cohesive and visually pleasing user experience, reminiscent of tranquil waters as day turns to night.

Best used for

Meditation and mindfulness apps
Financial services interfaces
Educational platforms with a serious tone
Photography display websites
Luxury product packaging
Corporate branding for stability

Suggested color roles

primary

Designate #1A3E5C as the dominant, deep blue for main navigation, large headers, or hero sections, providing a strong anchor.

secondary

Utilize #4A7BA0 for sub-sections, background panels, or supporting graphical elements, maintaining a cohesive blue theme.

accent

Apply #7BB2D9 as a bright, clear accent for interactive elements, calls-to-action, or important information, offering excellent contrast.

background

Use #A6D0F2 as a very light, soft blue background to ensure content readability and a gentle, expansive feel.

text

For body text, a dark blue like #1A3E5C or a deep charcoal (#333333) on #A6D0F2 provides optimal contrast and sophisticated readability.

Accessibility notes

Ensure #7BB2D9 provides sufficient contrast against its background when used for text, especially on darker blues.
For body text on #A6D0F2, use a dark color like #1A3E5C or black to meet WCAG AA/AAA standards.
Avoid using #4A7BA0 for small text on #2B5F84 as contrast might be borderline; test thoroughly.
Leverage #A6D0F2 for backgrounds to maximize readability of darker text elements.

Recommended combinations

Deep Dusk

A dark, commanding primary with a light background and a clear, mid-tone accent for interactive elements.

#1A3E5C · #A6D0F2 · #7BB2D9

Hazy Horizon

Create a smooth, atmospheric gradient for backgrounds or large graphical components, evoking depth.

#4A7BA0 · #7BB2D9 · #A6D0F2

Stable Serenity

A reliable mid-blue for content blocks, a very light background, and the darkest blue for headlines or important text.

#2B5F84 · #A6D0F2 · #1A3E5C

CSS variables

:root {
  --ocean-twilight-haze-1: #1A3E5C;
  --ocean-twilight-haze-2: #4A7BA0;
  --ocean-twilight-haze-3: #7BB2D9;
  --ocean-twilight-haze-4: #A6D0F2;
  --ocean-twilight-haze-5: #2B5F84;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-twilight-haze": {
        1: "#1A3E5C",
        2: "#4A7BA0",
        3: "#7BB2D9",
        4: "#A6D0F2",
        5: "#2B5F84",
      }
    }
  }
}

Hex values

Color 1#1A3E5C

Color 2#4A7BA0

Color 3#7BB2D9

Color 4#A6D0F2

Color 5#2B5F84

Accessibility

Contrast checker

2.5:1Fail

4.9:1AA

6.8:1AA

1.6:1Fail

2.5:1Fail

2:1Fail

2.8:1Fail

1.5:1Fail

4.9:1AA

2:1Fail

1.4:1Fail

3:1Fail

6.8:1AA

2.8:1Fail

1.4:1Fail

4.2:1AA18

1.6:1Fail

1.5:1Fail

3:1Fail

4.2:1AA18

Similar palettes

More like Ocean Twilight Haze

Abyssal Current Glide