Palette

Celestial Ocean Twilight

A tranquil blend of deep to light blues, capturing the serene expanse where ocean meets twilight sky.

CoolCalm5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0D47A1#1976D2#2196F3#64B5F6#BBDEFB

Palette guide

How to use Celestial Ocean Twilight

Overview

The Celestial Ocean Twilight palette is a tranquil blend of deep to light blues, capturing the serene expanse where ocean meets twilight sky. Ranging from the profound #0D47A1 to the softest #BBDEFB, this collection offers a harmonious gradient ideal for calming designs. The progression through #1976D2, #2196F3, and #64B5F6 creates a smooth visual flow, perfect for interfaces that prioritize user comfort and clarity. Designers can leverage this palette to evoke tranquility, openness, and a sense of boundless peace. Developers will find these distinct hex codes perfect for crafting clean, user-friendly interfaces, soft backgrounds, and readable text in a light mode setting.

Best used for

Meditation or mindfulness apps
Cloud computing dashboards
Environmental or marine conservation websites
Travel agencies focusing on serene destinations
Educational platforms for a calming experience
Professional corporate branding

Suggested color roles

primary

#0D47A1 provides a strong, deep blue foundation for main content areas or brand identity.

secondary

#1976D2 offers a vibrant mid-tone blue, suitable for headers, sub-sections, or interactive elements.

accent

#BBDEFB delivers a luminous, very light blue, ideal for delicate highlights, hover states, or subtle glows.

background

#BBDEFB creates a very light, airy, and expansive canvas. #0D47A1 for a deep, immersive background.

text

Use a dark color like charcoal or black on the lighter backgrounds. For darker elements, use white or #BBDEFB.

Accessibility notes

Ensure dark text (e.g., black or charcoal) has sufficient contrast on #64B5F6 and #BBDEFB.
White or #BBDEFB provides excellent contrast on #0D47A1 and #1976D2.
Avoid using #64B5F6 for small text on #2196F3 as contrast might be borderline.
All interactive elements must meet WCAG contrast guidelines for both color and focus states.

Recommended combinations

Twilight Depths

Ideal for hero sections, conveying depth and ethereal light.

#0D47A1 · #2196F3 · #BBDEFB

Ocean Gradient

Excellent for layered UI elements, showcasing a smooth transition from deep to lighter blues.

#1976D2 · #2196F3 · #64B5F6

Sky Serenity

Creates a cohesive and calming aesthetic, suitable for intros or atmospheric backgrounds.

#0D47A1 · #64B5F6 · #BBDEFB

CSS variables

:root {
  --celestial-ocean-twilight-2-1: #0D47A1;
  --celestial-ocean-twilight-2-2: #1976D2;
  --celestial-ocean-twilight-2-3: #2196F3;
  --celestial-ocean-twilight-2-4: #64B5F6;
  --celestial-ocean-twilight-2-5: #BBDEFB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-ocean-twilight-2": {
        1: "#0D47A1",
        2: "#1976D2",
        3: "#2196F3",
        4: "#64B5F6",
        5: "#BBDEFB",
      }
    }
  }
}

Hex values

Color 1#0D47A1

Color 2#1976D2

Color 3#2196F3

Color 4#64B5F6

Color 5#BBDEFB

Accessibility

Contrast checker

1.9:1Fail

2.8:1Fail

3.9:1AA18

6.1:1AA

1.9:1Fail

1.5:1Fail

2.1:1Fail

3.3:1AA18

2.8:1Fail

1.5:1Fail

1.4:1Fail

2.2:1Fail

3.9:1AA18

2.1:1Fail

1.4:1Fail

1.6:1Fail

6.1:1AA

3.3:1AA18

2.2:1Fail

1.6:1Fail

Similar palettes

More like Celestial Ocean Twilight

View all Cool

Aegean Coastline Muse