Palette

Cosmic Tide Whisper

A serene journey into the cool, silent depths where starlight reflects on a gentle underwater current.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Cosmic Tide Whisper 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 Cosmic Tide Whisper.

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

Data visualization

#020B1D#1A374D#3F688D#6BB4C1#A4E8F2

Palette guide

How to use Cosmic Tide Whisper

Overview

The Cosmic Tide Whisper palette evokes a serene underwater journey illuminated by distant starlight, blending deep oceanic blues with tranquil aquas. Starting with the profound #020B1D, it flows into the rich #1A374D and the sophisticated #3F688D. Lighter, more ethereal shades like #6BB4C1 and the luminous #A4E8F2 capture the essence of shimmering water and distant light. This palette is perfect for designs seeking a calming, yet deep and expansive feel, ideal for wellness apps, environmental projects, or any brand aiming for tranquility and clarity.

Best used for

Wellness and meditation app interfaces
Environmental or conservation organization branding
Aquatic-themed websites or educational content
Spa and relaxation product packaging
Oceanography and marine biology visualizations
Calm and serene digital art

Suggested color roles

primary

Use #020B1D as the dominant background for a deep, immersive oceanic feel, perfect for large areas.

secondary

Apply #1A374D for secondary backgrounds, headers, or distinct content blocks, adding subtle structure.

accent

Utilize #A4E8F2 for highlighting key information, interactive elements, or a calming visual accent.

background

The deeper blues #020B1D and #1A374D are excellent for creating expansive, calming backdrops.

text

For body text, use #A4E8F2 or #6BB4C1 against the darker backgrounds. For headings, a crisp white works well.

Accessibility notes

Ensure #A4E8F2 and #6BB4C1 provide sufficient contrast when used as text on #020B1D, #1A374D, and #3F688D backgrounds.
Avoid using #3F688D text on #1A374D backgrounds for small text, as contrast might be low.
When using these blues for data visualization, ensure distinct enough shades for colorblind users.
Consider providing a pure white text option for maximum legibility on the darkest backgrounds.

Recommended combinations

Deep Current UI

Creates a tranquil dark mode UI with a profound background, a slightly lighter panel, and a clear, readable text color.

#020B1D · #1A374D · #A4E8F2

Starlight Shimmer

Ideal for layered elements, offering depth with a soft blue-green accent for interactive components or icons.

#1A374D · #3F688D · #6BB4C1

Calm Horizon

Perfect for subtle background gradients or visual storytelling, moving from deep ocean to shimmering surface.

#020B1D · #3F688D · #A4E8F2

CSS variables

:root {
  --cosmic-tide-whisper-1: #020B1D;
  --cosmic-tide-whisper-2: #1A374D;
  --cosmic-tide-whisper-3: #3F688D;
  --cosmic-tide-whisper-4: #6BB4C1;
  --cosmic-tide-whisper-5: #A4E8F2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "cosmic-tide-whisper": {
        1: "#020B1D",
        2: "#1A374D",
        3: "#3F688D",
        4: "#6BB4C1",
        5: "#A4E8F2",
      }
    }
  }
}

Hex values

Color 1#020B1D

Color 2#1A374D

Color 3#3F688D

Color 4#6BB4C1

Color 5#A4E8F2

Accessibility

Contrast checker

1.6:1Fail

3.3:1AA18

8.4:1AAA

14.4:1AAA

1.6:1Fail

2.1:1Fail

5.3:1AA

9.1:1AAA

3.3:1AA18

2.1:1Fail

2.5:1Fail

4.3:1AA18

8.4:1AAA

5.3:1AA

2.5:1Fail

1.7:1Fail

14.4:1AAA

9.1:1AAA

4.3:1AA18

1.7:1Fail

Similar palettes

More like Cosmic Tide Whisper