Palette

Twilight Sky Gaze

The fading blues and grays of the sky as twilight deepens, hinting at stars soon to appear.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Twilight Sky Gaze 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 Twilight Sky Gaze.

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

Data visualization

#2C3E50#34495E#5C6F81#8FA0AD#B3C0CB

Palette guide

How to use Twilight Sky Gaze

Overview

The "Twilight Sky Gaze" palette captures the serene transition of the sky at dusk, featuring a sophisticated range of cool blues and muted grays. It begins with a profound, almost navy blue (#2C3E50), progressing through a rich slate (#34495E) and a balanced medium blue-gray (#5C6F81). The lighter shades, a soft sky blue-gray (#8FA0AD) and a gentle, almost silver-gray (#B3C0CB), evoke clarity and openness. This palette is ideal for designers and developers seeking a calm, elegant, and professional aesthetic, perfect for corporate sites, tranquil app interfaces, or any design needing a refined, understated cool tone.

Best used for

Corporate and professional websites
Financial services interfaces
Educational platforms with a calm tone
Serene mobile app designs
Elegant branding for tech companies
Data visualization with a clean look

Suggested color roles

primary

Use #2C3E50 (Deep Twilight Blue) for robust headers, primary navigation, or foundational backgrounds, conveying stability and trust.

secondary

Apply #34495E (Rich Slate Blue) for subheadings, prominent cards, or dividing sections, maintaining depth while offering slight variation.

accent

Employ #5C6F81 (Medium Blue-Grey) for interactive elements, subtle borders, or to highlight key information without being too bold.

background

Utilize #B3C0CB (Light Silver-Grey) as a soft, airy base that ensures content stands out clearly and maintains a clean, professional feel.

text

For primary body text on light backgrounds like #B3C0CB, use #2C3E50 or #34495E to ensure excellent legibility.

Accessibility notes

Ensure #2C3E50 or #34495E on #B3C0CB meets WCAG AA contrast for body text.
Avoid using #8FA0AD as text on #B3C0CB; contrast will be insufficient for readability.
For call-to-action buttons, ensure accent colors like #5C6F81 have adequate contrast with surrounding text or background.
Use #B3C0CB for text only on the darkest backgrounds, such as #2C3E50, to maintain visibility.

Recommended combinations

Deep Clarity

Perfect for a strong header with light, readable text and a slightly lighter secondary element.

#2C3E50 · #B3C0CB · #34495E

Subtle Layers

Ideal for card backgrounds or layered UI elements, providing depth and visual separation.

#34495E · #8FA0AD · #5C6F81

Sky Highlights

Good for navigation or progress bars, using the lighter tones to indicate progress or selection.

#2C3E50 · #5C6F81 · #8FA0AD

CSS variables

:root {
  --twilight-sky-gaze-1: #2C3E50;
  --twilight-sky-gaze-2: #34495E;
  --twilight-sky-gaze-3: #5C6F81;
  --twilight-sky-gaze-4: #8FA0AD;
  --twilight-sky-gaze-5: #B3C0CB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "twilight-sky-gaze": {
        1: "#2C3E50",
        2: "#34495E",
        3: "#5C6F81",
        4: "#8FA0AD",
        5: "#B3C0CB",
      }
    }
  }
}

Hex values

Color 1#2C3E50

Color 2#34495E

Color 3#5C6F81

Color 4#8FA0AD

Color 5#B3C0CB

Accessibility

Contrast checker

1.2:1Fail

2.1:1Fail

4.1:1AA18

5.9:1AA

1.2:1Fail

1.8:1Fail

3.5:1AA18

5:1AA

2.1:1Fail

1.8:1Fail

1.9:1Fail

2.8:1Fail

4.1:1AA18

3.5:1AA18

1.9:1Fail

1.5:1Fail

5.9:1AA

5:1AA

2.8:1Fail

1.5:1Fail

Similar palettes

More like Twilight Sky Gaze