Back to palettes

Palette

Twilight Cloud Gaze

Soft, atmospheric blues and greys, like watching the peaceful transition of clouds at twilight.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5B84B1#8AAEC9#BBD5E2#DFEFF6#C3CED7

Palette guide

How to use Twilight Cloud Gaze

Overview

The Twilight Cloud Gaze palette offers a serene collection of soft, atmospheric blues and greys, like watching the peaceful transition of clouds at twilight. Anchored by the muted #5B84B1 (Muted Sky Blue) and supported by #8AAEC9 (Soft Blue-Grey), this scheme creates an incredibly calm and expansive mood. The lighter hues, including the airy #BBD5E2 (Pale Sky Blue) and the ethereal #DFEFF6 (Pale Aqua), along with #C3CED7 (Pale Grey-Blue), are genuinely useful for designers and developers aiming to convey tranquility, openness, or a minimalist aesthetic. This palette is ideal for web and app interfaces, wellness branding, or digital art that seeks a peaceful, ethereal quality.

Best used for

  • Tranquil web and app interfaces
  • Spa or wellness brand identity
  • Cloud-based service platforms
  • Interior design for calming spaces
  • Nature documentaries branding
  • Minimalist graphic design projects

Suggested color roles

primary

Utilize #5B84B1 (Muted Sky Blue) as a serene, anchoring primary color for headers, important text, or grounding elements.

secondary

Apply #8AAEC9 (Soft Blue-Grey) for supportive content areas, subheadings, or background textures that add atmospheric depth.

accent

Introduce #DFEFF6 (Pale Aqua) as an airy highlight for icons, subtle call-to-actions, or ethereal decorative touches.

background

Employ #DFEFF6 (Pale Aqua) or #C3CED7 (Pale Grey-Blue) for expansive, light backgrounds that enhance a sense of calm.

text

For dark text, use a dark charcoal or #5B84B1 on very light backgrounds. For dark backgrounds, white ensures good readability.

Accessibility notes

  • Many colors in this palette are light; contrast for text will be challenging and needs careful checking.
  • Combinations like #BBD5E2, #DFEFF6, and #C3CED7 will have very poor contrast with each other for text.
  • Ensure primary text is dark (e.g., charcoal or #5B84B1) on very light backgrounds for legibility.
  • Use the darkest color, #5B84B1, for important text elements to ensure adequate contrast.

Recommended combinations

Sky Depth

Creates a serene visual hierarchy with an anchoring blue, soft mid-tone, and airy light top.

#5B84B1 · #8AAEC9 · #DFEFF6

Cloud Layers

Offers a smooth, calming transition of pale blue-greys, ideal for atmospheric overlays or subtle backgrounds.

#8AAEC9 · #BBD5E2 · #C3CED7

Serene Contrast

Combines the deepest blue with a cool grey and an ethereal light for gentle yet clear distinction.

#5B84B1 · #C3CED7 · #DFEFF6

CSS variables

:root {
  --twilight-cloud-gaze-1: #5B84B1;
  --twilight-cloud-gaze-2: #8AAEC9;
  --twilight-cloud-gaze-3: #BBD5E2;
  --twilight-cloud-gaze-4: #DFEFF6;
  --twilight-cloud-gaze-5: #C3CED7;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "twilight-cloud-gaze": {
        1: "#5B84B1",
        2: "#8AAEC9",
        3: "#BBD5E2",
        4: "#DFEFF6",
        5: "#C3CED7",
      }
    }
  }
}

Related searches

soft twilight blue palettecalm cloud colorsserene blue grey schemeatmospheric ui designpeaceful sky branding

Palette colors

Hex values

Color 1#5B84B1
·
Color 2#8AAEC9
·
Color 3#BBD5E2
·
Color 4#DFEFF6
·
Color 5#C3CED7
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
2.6:1Fail
3.3:1AA18
2.4:1Fail
2
1.7:1Fail
1.5:1Fail
2:1Fail
1.5:1Fail
3
2.6:1Fail
1.5:1Fail
1.3:1Fail
1:1Fail
4
3.3:1AA18
2:1Fail
1.3:1Fail
1.4:1Fail
5
2.4:1Fail
1.5:1Fail
1:1Fail
1.4:1Fail

Similar palettes

More like Twilight Cloud Gaze

View all cool
Cloudburst Serenity
Arctic Dawn Light
Azure Sky Whisper
Celestial Cloud Dust
Celestial Ocean Dream
Cloudburst Sky Watch