Palette

Skyward Gaze

Gentle blues and soft whites reflecting the expansive tranquility of a clear, open sky.

CoolCalm5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4682B4#6A5ACD#87CEEB#B0E0E6#F0FFFF

Palette guide

How to use Skyward Gaze

Overview

The "Skyward Gaze" palette captures the expansive tranquility of a clear, open sky, blending gentle blues with soft whites. Featuring the deep steel blue #4682B4, a rich slate blue #6A5ACD, a bright sky blue #87CEEB, a pale light blue #B0E0E6, and the ethereal #F0FFFF, this collection offers a serene yet dynamic range. It's an excellent choice for designers and developers aiming to evoke feelings of calm, depth, and clarity. These colors are versatile for corporate, educational, or wellness projects, providing a clean, trustworthy, and visually appealing aesthetic that balances coolness with a touch of warmth from the brighter blues.

Best used for

Educational institution websites
Corporate finance dashboards
Environmental conservation initiatives
Science and technology presentations
Maritime or travel branding
Serene digital art installations

Suggested color roles

primary

#4682B4 - A strong, reliable steel blue, ideal for primary branding, headers, or key informational elements to convey trust and stability.

secondary

#6A5ACD - A rich slate blue, perfect for accentuating important sections, subheadings, or distinct UI components, adding depth.

accent

#87CEEB - A bright, clear sky blue, excellent for calls-to-action, interactive elements, or highlights that need to stand out with a fresh feel.

background

#F0FFFF - The lightest, almost pure white, providing an expansive and clean canvas for all content, ensuring optimal readability.

text

White on darker blues like #4682B4 and #6A5ACD. Black or dark grey (#333333) on lighter blues like #87CEEB, #B0E0E6, and #F0FFFF.

Accessibility notes

White text on #4682B4 and #6A5ACD should pass WCAG AA contrast.
Dark text (black or dark grey) is essential for #87CEEB, #B0E0E6, and #F0FFFF to ensure readability.
Ensure interactive elements have clear focus states that meet contrast requirements.
Use a contrast checker for all text and background pairings, especially when mixing lighter blues.

Recommended combinations

Deep Sky Contrast

Ideal for impactful headers or hero sections where strong branding is desired against a light background.

#4682B4 · #F0FFFF · #87CEEB

Calm Flow

Great for creating a sophisticated gradient effect or layered UI, suggesting depth and tranquility.

#6A5ACD · #B0E0E6 · #F0FFFF

Bright Horizon

Excellent for dashboards or informational graphics where clarity and a fresh feel are paramount.

#87CEEB · #F0FFFF · #4682B4

CSS variables

:root {
  --skyward-gaze-1: #4682B4;
  --skyward-gaze-2: #6A5ACD;
  --skyward-gaze-3: #87CEEB;
  --skyward-gaze-4: #B0E0E6;
  --skyward-gaze-5: #F0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "skyward-gaze": {
        1: "#4682B4",
        2: "#6A5ACD",
        3: "#87CEEB",
        4: "#B0E0E6",
        5: "#F0FFFF",
      }
    }
  }
}

Hex values

Color 1#4682B4

Color 2#6A5ACD

Color 3#87CEEB

Color 4#B0E0E6

Color 5#F0FFFF

Accessibility

Contrast checker

1.3:1Fail

2.4:1Fail

2.9:1Fail

4:1AA18

1.3:1Fail

3:1AA18

3.7:1AA18

5.2:1AA

2.4:1Fail

3:1AA18

1.2:1Fail

1.7:1Fail

2.9:1Fail

3.7:1AA18

1.2:1Fail

1.4:1Fail

4:1AA18

5.2:1AA

1.7:1Fail

1.4:1Fail

Similar palettes

More like Skyward Gaze

View all Cool

Aegean Coastline Muse

Moonlit Ocean Glow

Raindrop Serenity

Celestial Ocean Twilight

Coastal Pebble Wash

Ethereal Garden Dew