Back to palettes

Palette

Skyward Echoes

A gentle cascade of light blues and cool grays mimics the serene feel of a clear, breezy sky.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Skyward Echoes 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 Skyward Echoes.

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

Data visualization

#A3B3CC#B3C3D9#C3D3E6#D3E3F2#E3F3FF

Palette guide

How to use Skyward Echoes

Overview

The "Skyward Echoes" palette presents a serene gradient of light blues and cool grays, perfectly mimicking the tranquil feel of a clear, breezy sky. With hues ranging from the muted blue-grey #A3B3CC to the progressively lighter #B3C3D9, #C3D3E6, #D3E3F2, and the airy #E3F3FF, this collection radiates peace and expansiveness. It's an excellent choice for designers and developers aiming to create calm, clean, and sophisticated interfaces. These cool, light tones are ideal for conveying professionalism, serenity, or a sense of spaciousness, making them suitable for corporate, wellness, or technology-focused projects.

Best used for

  • Corporate presentation themes
  • Wellness and mindfulness apps
  • Cloud service dashboards
  • Clean tech product landing pages
  • Minimalist art portfolios
  • Serene interior design concepts

Suggested color roles

primary

#A3B3CC - A calm, muted blue-grey, excellent for primary headers, navigation, or foundational elements to establish a serene and professional tone.

secondary

#B3C3D9 - A slightly lighter, yet still substantial blue-grey, perfect for supporting content panels, card backgrounds, or subtle dividers.

accent

#C3D3E6 - A gentle, light blue-grey, suitable for delicate highlights, hover states, or subtle visual cues without creating stark contrast.

background

#E3F3FF - The lightest, almost pure white-blue, providing an expansive and clean canvas for all content, optimizing readability for dark text.

text

Dark blue-grey or black, such as #333333 or #2C3E50 - Crucial for ensuring strong contrast and legibility against these light backgrounds.

Accessibility notes

  • Text must be significantly darker than the background colors to meet WCAG contrast guidelines.
  • The contrast between colors within the palette is generally very low; avoid using them for text/background pairings.
  • Use a reliable contrast checker to verify all text and interactive element color combinations.
  • Ensure focus indicators for interactive elements are clearly visible and distinct, perhaps using a darker shade or a border.

Recommended combinations

Clear Sky Gradient

Creates a smooth, calming gradient for backgrounds or hero sections.

#A3B3CC · #C3D3E6 · #E3F3FF

Subtle Hierarchy

Ideal for layered UI elements, card designs, or subtle content separation.

#B3C3D9 · #D3E3F2 · #A3B3CC

Airy Foundation

Excellent for minimalist layouts where a clean, expansive, and professional aesthetic is desired, with dark text.

#E3F3FF · #D3E3F2 · #A3B3CC

CSS variables

:root {
  --skyward-echoes-1: #A3B3CC;
  --skyward-echoes-2: #B3C3D9;
  --skyward-echoes-3: #C3D3E6;
  --skyward-echoes-4: #D3E3F2;
  --skyward-echoes-5: #E3F3FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "skyward-echoes": {
        1: "#A3B3CC",
        2: "#B3C3D9",
        3: "#C3D3E6",
        4: "#D3E3F2",
        5: "#E3F3FF",
      }
    }
  }
}

Related searches

light cool blue paletteserene ui colorssky gradient aestheticminimalist blue greytranquil web design hues

Palette colors

Hex values

Color 1#A3B3CC
·
Color 2#B3C3D9
·
Color 3#C3D3E6
·
Color 4#D3E3F2
·
Color 5#E3F3FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.4:1Fail
1.6:1Fail
1.9:1Fail
2
1.2:1Fail
1.2:1Fail
1.4:1Fail
1.6:1Fail
3
1.4:1Fail
1.2:1Fail
1.2:1Fail
1.3:1Fail
4
1.6:1Fail
1.4:1Fail
1.2:1Fail
1.2:1Fail
5
1.9:1Fail
1.6:1Fail
1.3:1Fail
1.2:1Fail

Similar palettes

More like Skyward Echoes

View all cool
Azure Sky Whisper
Celestial Azure Drift
Celestial Glow
Cloudscape Serenity Blue
Cloudspun Serenity
Aegean Coast Whisper