Palette

Clear Night Chill

Deep blues and purples, like gazing into a vast, clear night sky on a cool evening.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Clear Night Chill 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 Clear Night Chill.

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

Data visualization

#191970#4169E1#6A5ACD#B0C4DE#7B68EE

Palette guide

How to use Clear Night Chill

Overview

The Clear Night Chill palette captures the serene and deep essence of a vast, clear night sky on a cool evening. Dominated by profound blues and purples, from the dark #191970 to the tranquil #B0C4DE, this collection evokes calm and sophistication. The vibrant #4169E1 and #7B68EE introduce dynamic elements, allowing designers to create interfaces that feel both mysterious and inviting. Developers can leverage these hex codes to build immersive digital experiences, ideal for applications requiring a sense of depth, tranquility, or a futuristic touch, ensuring a consistent and harmonious cool-toned aesthetic across all platforms.

Best used for

Technology and software interfaces
Space exploration or astronomy websites
Luxury automotive or electronics branding
Relaxation or meditation apps
Nightlife or entertainment promotions
High-tech corporate presentations

Suggested color roles

primary

#191970 serves as a deep, authoritative primary, excellent for foundational elements, navigation, or strong brand presence.

secondary

#4169E1 provides a vibrant, engaging secondary, ideal for content blocks, interactive elements, or feature areas.

accent

#7B68EE offers a rich, dynamic accent, perfect for call-to-actions, icons, or highlighting key information.

background

#B0C4DE creates a soft, ethereal background, offering a cool, airy base that complements the darker blues and purples.

text

For dark text on light backgrounds, a deep charcoal or #191970 works. For light text on dark backgrounds, a light white or #B0C4DE is essential for readability.

Accessibility notes

Ensure #191970 text on #B0C4DE background meets WCAG AA standards for readability.
Avoid using #B0C4DE text on #6A5ACD or #7B68EE backgrounds without checking for sufficient contrast.
When using #4169E1 for interactive elements, verify its contrast against adjacent background colors.
For any text on darker blues/purples, use a light color like white or #B0C4DE to ensure legibility, especially for smaller font sizes.

Recommended combinations

Deep Sky

Ideal for a sophisticated website layout, with #191970 for headers, #4169E1 for interactive elements, and #B0C4DE for content backgrounds.

#191970 · #4169E1 · #B0C4DE

Night Glow

Perfect for creating subtle visual depth in UI cards or layered sections, offering a serene, cool transition.

#6A5ACD · #7B68EE · #B0C4DE

Vibrant Contrast

Use #B0C4DE as a light base, with #191970 for prominent text and #4169E1 for striking accents or links.

#B0C4DE · #191970 · #4169E1

CSS variables

:root {
  --clear-night-chill-1: #191970;
  --clear-night-chill-2: #4169E1;
  --clear-night-chill-3: #6A5ACD;
  --clear-night-chill-4: #B0C4DE;
  --clear-night-chill-5: #7B68EE;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "clear-night-chill": {
        1: "#191970",
        2: "#4169E1",
        3: "#6A5ACD",
        4: "#B0C4DE",
        5: "#7B68EE",
      }
    }
  }
}

Hex values

Color 1#191970

Color 2#4169E1

Color 3#6A5ACD

Color 4#B0C4DE

Color 5#7B68EE

Accessibility

Contrast checker

3.1:1AA18

2.8:1Fail

8.3:1AAA

3.6:1AA18

3.1:1AA18

1.1:1Fail

2.7:1Fail

1.2:1Fail

2.8:1Fail

1.1:1Fail

3:1Fail

1.3:1Fail

8.3:1AAA

2.7:1Fail

3:1Fail

2.3:1Fail

3.6:1AA18

1.2:1Fail

1.3:1Fail

2.3:1Fail

Similar palettes

More like Clear Night Chill

View all cool

Celestial Ocean Embrace