Palette

Sapphire Sky Gaze

Encompasses the vastness and varying depths of a clear, brilliant sapphire sky at dusk.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#ADD8E6#87CEEB#6495ED#4169E1#191970

Palette guide

How to use Sapphire Sky Gaze

Overview

The "Sapphire Sky Gaze" palette encompasses the vastness and varying depths of a clear, brilliant sapphire sky at dusk, offering a calm and expansive feel. It transitions beautifully from the airy lightness of #ADD8E6 (Light Blue) and #87CEEB (Sky Blue) through the classic appeal of #6495ED (Cornflower Blue) and the regal depth of #4169E1 (Royal Blue), culminating in the profound stillness of #191970 (Midnight Blue). This palette is excellent for designs that aim to convey serenity, professionalism, and a sense of open possibility, ideal for educational, environmental, or corporate applications.

Best used for

Educational institution websites
Environmental conservation branding
Corporate annual reports or presentations
Weather forecasting apps or websites
Astronomy or space-themed content
Serene bedroom decor inspiration

Suggested color roles

primary

#4169E1 (Royal Blue) - A strong, reliable blue for main headings, important links, or brand logos, conveying trust and stability.

secondary

#6495ED (Cornflower Blue) - A softer yet still significant blue, suitable for subheadings, data visualization, or secondary buttons.

accent

#87CEEB (Sky Blue) - A bright, refreshing blue to highlight calls-to-action, interactive states, or introduce a touch of lightness.

background

#ADD8E6 (Light Blue) - The lightest shade, providing a gentle, airy backdrop that enhances readability and maintains the sky-like feel.

text

#191970 (Midnight Blue) - The deepest blue, ensuring excellent contrast for body text against lighter backgrounds, anchoring the design with a sophisticated touch.

Accessibility notes

Ensure high contrast when using lighter blues like #ADD8E6 or #87CEEB for text on backgrounds; generally, these are better as backgrounds themselves.
Verify that #191970 text on #ADD8E6 or #87CEEB meets WCAG contrast standards for readability.
Avoid relying solely on blue color variations to convey status or information for colorblind users.
Use sufficient font size and weight for text rendered in #6495ED on slightly darker blue backgrounds.

Recommended combinations

Clear Sky

Light blue as a clean background, midnight blue for text, and royal blue for key action buttons.

#ADD8E6 · #191970 · #4169E1

Dusk Transition

Cornflower blue for main content blocks, sky blue for highlights, and midnight blue for important titles.

#6495ED · #87CEEB · #191970

Deep Gaze

Midnight blue as a dramatic background, with light blue for contrasting text and cornflower blue for accents.

#191970 · #ADD8E6 · #6495ED

CSS variables

:root {
  --sapphire-sky-gaze-1: #ADD8E6;
  --sapphire-sky-gaze-2: #87CEEB;
  --sapphire-sky-gaze-3: #6495ED;
  --sapphire-sky-gaze-4: #4169E1;
  --sapphire-sky-gaze-5: #191970;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sapphire-sky-gaze": {
        1: "#ADD8E6",
        2: "#87CEEB",
        3: "#6495ED",
        4: "#4169E1",
        5: "#191970",
      }
    }
  }
}

Hex values

Color 1#ADD8E6

Color 2#87CEEB

Color 3#6495ED

Color 4#4169E1

Color 5#191970

Accessibility

Contrast checker

1.1:1Fail

1.9:1Fail

3.2:1AA18

9.7:1AAA

1.1:1Fail

1.7:1Fail

2.8:1Fail

8.5:1AAA

1.9:1Fail

1.7:1Fail

1.6:1Fail

5:1AA

3.2:1AA18

2.8:1Fail

1.6:1Fail

3.1:1AA18

9.7:1AAA

8.5:1AAA

5:1AA

3.1:1AA18

Similar palettes

More like Sapphire Sky Gaze