Back to palettes

Palette

Azure Horizon Gaze

Spans the clear, endless blues of where the calm sky meets the tranquil ocean horizon.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E0FFFF#87CEEB#4682B4#187DE0#003366

Palette guide

How to use Azure Horizon Gaze

Overview

The Azure Horizon Gaze palette (ID: azure-horizon-gaze) spans the clear, endless blues of where the calm sky meets the tranquil ocean horizon. It features the ethereal aqua of #E0FFFF, the bright sky blue of #87CEEB, the grounded steel blue of #4682B4, and the deep, commanding blues of #187DE0 and #003366. This cool palette is an excellent choice for designers and developers aiming to create serene, vast, and trustworthy digital environments. Its comprehensive range of blues, from light to deep, provides immense versatility for establishing clear visual hierarchy and promoting a sense of calm and professionalism.

Best used for

  • Financial services (trustworthy)
  • Corporate websites
  • Oceanography research platforms
  • Aviation or aerospace branding
  • Luxury cruise line marketing
  • Government and public sector interfaces

Suggested color roles

primary

#187DE0 serves as a strong, reliable primary color, perfect for main calls to action, brand logos, or important headers.

secondary

#4682B4 provides a stable, professional secondary, suitable for subheadings, navigation, or supportive informational blocks.

accent

#87CEEB delivers a lighter, refreshing accent, ideal for interactive elements, hover states, or subtle highlights.

background

#E0FFFF creates a very light, expansive backdrop, ensuring content clarity and an airy, open feel.

text

Use #003366 or a deep charcoal for body text on #E0FFFF or #87CEEB backgrounds for optimal legibility.

Accessibility notes

  • Ensure #003366 text on #E0FFFF backgrounds meets WCAG AA contrast standards.
  • Avoid using #E0FFFF for small text on any other palette color due to insufficient contrast.
  • Use #187DE0 or #003366 for critical interactive elements to ensure clear visibility.
  • For large text, #4682B4 on #E0FFFF can work, but always verify contrast ratios.

Recommended combinations

Deep Horizon

Creates a powerful, deep gradient, ideal for impressive hero sections or sophisticated data displays.

#003366 · #187DE0 · #4682B4

Sky Gaze

Excellent for light, airy layouts, using lighter tones for backgrounds and mid-blue for structure.

#E0FFFF · #87CEEB · #4682B4

Vast Contrast

A strong contrasting trio for clear visual hierarchy, combining deep primary with light background and mid-tone support.

#003366 · #E0FFFF · #187DE0

CSS variables

:root {
  --azure-horizon-gaze-1: #E0FFFF;
  --azure-horizon-gaze-2: #87CEEB;
  --azure-horizon-gaze-3: #4682B4;
  --azure-horizon-gaze-4: #187DE0;
  --azure-horizon-gaze-5: #003366;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-horizon-gaze": {
        1: "#E0FFFF",
        2: "#87CEEB",
        3: "#4682B4",
        4: "#187DE0",
        5: "#003366",
      }
    }
  }
}

Related searches

calm ocean blue palettedeep sky blue colorstrustworthy blue web designprofessional navy schemeazure horizon branding

Palette colors

Hex values

Color 1#E0FFFF
·
Color 2#87CEEB
·
Color 3#4682B4
·
Color 4#187DE0
·
Color 5#003366
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.7:1Fail
3.9:1AA18
3.9:1AA18
12:1AAA
2
1.7:1Fail
2.4:1Fail
2.4:1Fail
7.2:1AAA
3
3.9:1AA18
2.4:1Fail
1:1Fail
3.1:1AA18
4
3.9:1AA18
2.4:1Fail
1:1Fail
3:1AA18
5
12:1AAA
7.2:1AAA
3.1:1AA18
3:1AA18

Similar palettes

More like Azure Horizon Gaze

View all cool
Azure Horizon Dream
Aegean Horizon
Arctic Sky Whisper
Azure Abyss Calm
Azure Coast Dream
Azure Coast Serenity