Palette

Astral Ocean Mist

A celestial fog hovering over deep waters, merging the cosmos with the serene enigma of the sea.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Astral Ocean Mist 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 Astral Ocean Mist.

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

Data visualization

#0F0F2D#2F3E4E#6A5ACD#B0C4DE#E6E6FA

Palette guide

How to use Astral Ocean Mist

Overview

The Astral Ocean Mist palette evokes a celestial fog hovering over deep waters, merging the cosmos with the serene enigma of the sea. This cool and mysterious collection features the profound navy of #0F0F2D, the deep blue-gray of #2F3E4E, the unique slate blue of #6A5ACD, and lighter shades like #B0C4DE and #E6E6FA. It's an ethereal choice for designers and developers crafting mystic websites, serene spa environments, or any project that requires a sophisticated, calming, and otherworldly aesthetic. The palette offers a harmonious blend of blues and lavenders for immersive digital experiences.

Best used for

Ethereal branding and identity
Mystic and spiritual websites
Serene spa and wellness environments
Luxury travel and tourism marketing
Fantasy art and illustrations
Sophisticated app themes

Suggested color roles

primary

#0F0F2D serves as a deep, grounding primary color, ideal for main backgrounds or prominent headers.

secondary

#2F3E4E provides a mysterious depth, excellent for secondary content areas or navigation.

accent

#6A5ACD offers an ethereal, unique highlight, perfect for interactive elements, icons, or decorative details.

background

#E6E6FA creates a light, misty, and airy background, ensuring excellent readability for darker text.

text

#0F0F2D ensures optimal legibility for primary text on lighter backgrounds, or use #2F3E4E for secondary text.

Accessibility notes

Ensure high contrast for text, especially #0F0F2D on #E6E6FA, to meet WCAG AA standards.
Use darker shades for critical information to maintain readability.
Test legibility of lighter shades for secondary text, ensuring they remain clear.
Provide clear visual cues for interactive elements, possibly using a slightly darker shade for hover states.

Recommended combinations

Misty Depths

A balanced and serene combination, ideal for creating a calm and sophisticated page layout.

#E6E6FA · #B0C4DE · #0F0F2D

Ethereal Blend

Highlights unique and refined tones, suitable for artistic elements or distinctive branding.

#2F3E4E · #6A5ACD · #B0C4DE

Oceanic Sky

Creates a harmonious depth, perfect for backgrounds, headers, or immersive sections.

#0F0F2D · #6A5ACD · #E6E6FA

CSS variables

:root {
  --astral-ocean-mist-1: #0F0F2D;
  --astral-ocean-mist-2: #2F3E4E;
  --astral-ocean-mist-3: #6A5ACD;
  --astral-ocean-mist-4: #B0C4DE;
  --astral-ocean-mist-5: #E6E6FA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "astral-ocean-mist": {
        1: "#0F0F2D",
        2: "#2F3E4E",
        3: "#6A5ACD",
        4: "#B0C4DE",
        5: "#E6E6FA",
      }
    }
  }
}

Hex values

Color 1#0F0F2D

Color 2#2F3E4E

Color 3#6A5ACD

Color 4#B0C4DE

Color 5#E6E6FA

Accessibility

Contrast checker

1.7:1Fail

3.5:1AA18

10.5:1AAA

15.1:1AAA

1.7:1Fail

2.1:1Fail

6.1:1AA

8.9:1AAA

3.5:1AA18

2.1:1Fail

3:1Fail

4.3:1AA18

10.5:1AAA

6.1:1AA

3:1Fail

1.4:1Fail

15.1:1AAA

8.9:1AAA

4.3:1AA18

1.4:1Fail

Similar palettes

More like Astral Ocean Mist

View all cool

Celestial Ocean Dream

Coral Abyss Dive

Ethereal Mist Veil

Jellyfish Ocean Dream

Misty Willow Whispers

Moonlit Ocean Shimmer