Palette

Celestial Arctic Bloom

Icy blues and purples mingle with hints of frosty white, like rare blooms under an arctic night sky.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Celestial Arctic 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 Celestial Arctic Bloom.

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

Data visualization

#0E1B2E#2A4866#5F8CA1#A0D3D9#DBF2F5

Palette guide

How to use Celestial Arctic Bloom

Overview

The Celestial Arctic Bloom palette evokes the serene beauty of an icy, starlit night. Featuring a sophisticated gradient from deep navy, like #0E1B2E, through a calming mid-blue, #2A4866, to a soft, frosty teal, #5F8CA1. Lighter hues like #A0D3D9 and the near-white #DBF2F5 complete this serene collection, perfect for creating tranquil yet elegant designs. This palette is ideal for projects needing a cool, refreshing, and sophisticated feel, offering excellent versatility for both digital interfaces and print media. Designers and developers will find these shades harmonious for conveying calm, clarity, and understated luxury.

Best used for

Winter-themed branding and marketing
Serene spa or wellness website design
Elegant corporate identities
Mobile app interfaces requiring a calming aesthetic
Arctic-inspired editorial layouts
Luxury product packaging

Suggested color roles

primary

#0E1B2E - Use as the dominant dark anchor for headers, footers, or large background sections, providing depth and sophistication.

secondary

#2A4866 - Excellent for subheadings, navigation elements, or secondary content blocks, offering a strong but less intense blue.

accent

#5F8CA1 - Ideal for call-to-action buttons, interactive elements, or illustrative details to draw attention without being overly bold.

background

#DBF2F5 - A light, airy base for main content areas, ensuring excellent readability and a sense of openness.

text

#0E1B2E - Provides strong contrast against lighter backgrounds like #DBF2F5, ensuring legibility for body text and headings.

Accessibility notes

Ensure #0E1B2E text on #DBF2F5 background meets WCAG AAA contrast ratio.
Verify #2A4866 text against #A0D3D9 for sufficient readability, especially for larger text.
Avoid using #A0D3D9 text on #DBF2F5 backgrounds for critical information due to low contrast.
Use a contrasting text color like dark gray or black for text on #DBF2F5 if #0E1B2E feels too heavy.

Recommended combinations

Icy Depth

Deep blue for primary content, light teal for accents, and frosty white for backgrounds.

#0E1B2E · #A0D3D9 · #DBF2F5

Arctic Calm

Mid-blue for main elements, serene teal for highlights, and a very light blue for soft backgrounds.

#2A4866 · #5F8CA1 · #DBF2F5

Frosty Horizon

Strong dark base with a cool teal accent and a bright, expansive background.

#0E1B2E · #5F8CA1 · #DBF2F5

CSS variables

:root {
  --celestial-arctic-bloom-1: #0E1B2E;
  --celestial-arctic-bloom-2: #2A4866;
  --celestial-arctic-bloom-3: #5F8CA1;
  --celestial-arctic-bloom-4: #A0D3D9;
  --celestial-arctic-bloom-5: #DBF2F5;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "celestial-arctic-bloom": {
        1: "#0E1B2E",
        2: "#2A4866",
        3: "#5F8CA1",
        4: "#A0D3D9",
        5: "#DBF2F5",
      }
    }
  }
}

Hex values

Color 1#0E1B2E

Color 2#2A4866

Color 3#5F8CA1

Color 4#A0D3D9

Color 5#DBF2F5

Accessibility

Contrast checker

1.8:1Fail

4.7:1AA

10.5:1AAA

14.8:1AAA

1.8:1Fail

2.6:1Fail

5.8:1AA

8.1:1AAA

4.7:1AA

2.6:1Fail

2.2:1Fail

3.1:1AA18

10.5:1AAA

5.8:1AA

2.2:1Fail

1.4:1Fail

14.8:1AAA

8.1:1AAA

3.1:1AA18

1.4:1Fail

Similar palettes

More like Celestial Arctic Bloom

View all cool

Aurora Borealis Dream

Celestial Aurora Dance