Back to palettes

Palette

Ocean Twilight Bloom

The peaceful transition from day to night over the ocean, painted with warm and dusky hues.

warmcalm5 colors
More warm palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A4F6B#6D87A4#A3BCCF#D8E7F1#E8A889

Palette guide

How to use Ocean Twilight Bloom

Overview

The "Ocean Twilight Bloom" palette captures the serene transition from day to night over the ocean, painted with warm and dusky hues. Featuring a sophisticated blend of blues like #3A4F6B, #6D87A4, and #A3BCCF, it introduces the striking warmth of #E8A889. This palette offers designers a unique opportunity to create inviting and elegant interfaces, while developers can utilize its harmonious progression for subtle visual storytelling. The lightest blue, #D8E7F1, provides a gentle canvas, allowing the warmer tones to bloom gracefully. Ideal for projects seeking a tranquil yet vibrant aesthetic, this palette evokes a sense of calm sophistication, perfect for conveying warmth and depth.

Best used for

  • Photography portfolio websites
  • Wellness and meditation apps
  • Boutique hotel branding
  • High-end fashion e-commerce
  • Event invitations and marketing
  • Art and cultural institution websites

Suggested color roles

primary

Establish #3A4F6B as the main brand color for headers or important sections, providing a solid, elegant foundation.

secondary

Use #6D87A4 for secondary elements, subheadings, or background panels, offering a softer yet cohesive blue.

accent

Highlight with #E8A889, a beautiful warm accent perfect for calls-to-action, interactive elements, or focal points, adding energy.

background

Apply #D8E7F1 as a clean, very light blue background, ensuring excellent readability for text and a soft, airy feel.

text

For primary text on light backgrounds, use a dark blue like #3A4F6B or a deep charcoal for optimal contrast and elegance.

Accessibility notes

  • Ensure #E8A889 has sufficient contrast against its background when used for text or interactive elements.
  • For body text on #D8E7F1, a dark blue like #3A4F6B or black will provide excellent WCAG AA/AAA contrast.
  • Check contrast ratios carefully when pairing #A3BCCF with other light colors, especially for smaller text.
  • Use #3A4F6B for large text on #D8E7F1 for strong readability and visual impact.

Recommended combinations

Twilight Glow

A deep blue base, light background, and a warm, prominent accent for key UI elements or striking visuals.

#3A4F6B · #D8E7F1 · #E8A889

Serene Horizon

Create a calming, layered blue gradient for backgrounds, banners, or data visualizations.

#6D87A4 · #A3BCCF · #D8E7F1

Warm Dusk

A light blue background with a warm accent and a deep blue for text or primary content.

#A3BCCF · #E8A889 · #3A4F6B

CSS variables

:root {
  --ocean-twilight-bloom-1: #3A4F6B;
  --ocean-twilight-bloom-2: #6D87A4;
  --ocean-twilight-bloom-3: #A3BCCF;
  --ocean-twilight-bloom-4: #D8E7F1;
  --ocean-twilight-bloom-5: #E8A889;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-twilight-bloom": {
        1: "#3A4F6B",
        2: "#6D87A4",
        3: "#A3BCCF",
        4: "#D8E7F1",
        5: "#E8A889",
      }
    }
  }
}

Related searches

warm ocean color schemetwilight blue orange paletteserene web design colorsdusky ocean brandingelegant blue warm accent

Palette colors

Hex values

Color 1#3A4F6B
·
Color 2#6D87A4
·
Color 3#A3BCCF
·
Color 4#D8E7F1
·
Color 5#E8A889
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.3:1Fail
4.2:1AA18
6.6:1AA
4.1:1AA18
2
2.3:1Fail
1.9:1Fail
2.9:1Fail
1.8:1Fail
3
4.2:1AA18
1.9:1Fail
1.6:1Fail
1:1Fail
4
6.6:1AA
2.9:1Fail
1.6:1Fail
1.6:1Fail
5
4.1:1AA18
1.8:1Fail
1:1Fail
1.6:1Fail

Similar palettes

More like Ocean Twilight Bloom

View all warm
Lake Shore Ember
Canyon Horizon Fade
Dusk Radiance Warmth
Ember Twilight Hues
Golden Horizon Warmth
Golden Hour Fields