Palette

Celestial Ocean Dream

A fantastical blend of deep ocean blues and ethereal starlight, creating a serene, dreamy seascape.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#0A0A2C#2A2A5A#4A4A8C#7D7DBF#A3A3D4

Palette guide

How to use Celestial Ocean Dream

Overview

The Celestial Ocean Dream palette is a fantastical blend of deep ocean blues and ethereal starlight, creating a serene, dreamy seascape. Ranging from the profound #0A0A2C to the softest lavender-blue #A3A3D4, this collection offers a harmonious gradient for tranquil designs. The progression through #2A2A5A, #4A4A8C, and #7D7DBF provides ample opportunity for depth and visual interest without harsh contrasts. Designers can leverage this palette to evoke calm, mystery, and elegance, while developers will find these distinct hex codes perfect for crafting soothing dark mode themes, atmospheric backgrounds, or serene user interfaces.

Best used for

Meditation and mindfulness apps
Luxury spa or wellness retreats
Dream interpretation or spiritual guidance platforms
High-end lifestyle blogs or magazines
Sleep aid apps or smart home interfaces
Soft, ethereal digital art

Suggested color roles

primary

#2A2A5A provides a deep, calming blue foundation for main content areas or brand identity.

secondary

#4A4A8C offers a slightly lighter, yet still rich blue, suitable for supporting sections or headers.

accent

#A3A3D4 delivers a soft, luminous lavender-blue, ideal for delicate highlights, text, or subtle glows against darker shades.

background

#0A0A2C creates the deepest, most immersive "ocean dream" backdrop.

text

Use white or #A3A3D4 for primary text on the darkest backgrounds.

Accessibility notes

Ensure white or very light text (e.g., #A3A3D4) provides sufficient contrast on #0A0A2C, #2A2A5A, and #4A4A8C.
Avoid using #7D7DBF for small text on #4A4A8C as the contrast might be insufficient.
All interactive elements must meet WCAG contrast guidelines; consider a bright white outline for focus states.
For longer text blocks, prioritize the lightest colors from the palette or pure white against the dark backgrounds.

Recommended combinations

Dream Depths

Ideal for hero sections, conveying depth and ethereal light.

#0A0A2C · #4A4A8C · #A3A3D4

Mystic Gradient

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

#2A2A5A · #4A4A8C · #7D7DBF

Starlit Serene

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

#0A0A2C · #7D7DBF · #A3A3D4

CSS variables

:root {
  --celestial-ocean-dream-2-1: #0A0A2C;
  --celestial-ocean-dream-2-2: #2A2A5A;
  --celestial-ocean-dream-2-3: #4A4A8C;
  --celestial-ocean-dream-2-4: #7D7DBF;
  --celestial-ocean-dream-2-5: #A3A3D4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-ocean-dream-2": {
        1: "#0A0A2C",
        2: "#2A2A5A",
        3: "#4A4A8C",
        4: "#7D7DBF",
        5: "#A3A3D4",
      }
    }
  }
}

Hex values

Color 1#0A0A2C

Color 2#2A2A5A

Color 3#4A4A8C

Color 4#7D7DBF

Color 5#A3A3D4

Accessibility

Contrast checker

1.4:1Fail

2.4:1Fail

5.1:1AA

8:1AAA

1.4:1Fail

1.7:1Fail

3.5:1AA18

5.5:1AA

2.4:1Fail

1.7:1Fail

2.1:1Fail

3.3:1AA18

5.1:1AA

3.5:1AA18

2.1:1Fail

1.6:1Fail

8:1AAA

5.5:1AA

3.3:1AA18

1.6:1Fail

Similar palettes

More like Celestial Ocean Dream

View all cool

Celestial Ocean Mirror

Abyssal Blue Descent

Abyssal Current Glide

Azure Abyss Calm

Azure Canopy Light

Azure Ocean Current