Back to palettes

Palette

Azure Horizon

Vibrant blues mimicking the boundless expanse where the clear sky meets the deep, distant ocean.

coolenergetic5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#007FFF#00BFFF#87CEEB#006DD0#009AD0

Palette guide

How to use Azure Horizon

Overview

The Azure Horizon palette (ID: azure-horizon-2) captures the boundless expanse where clear sky meets deep ocean with vibrant blues. Featuring a range from the vivid #007FFF and #00BFFF to the slightly deeper #006DD0 and #009AD0, and the lighter #87CEEB, this collection is energetic and refreshing. Designers and developers will find these hues excellent for creating dynamic, open, and inviting digital experiences. The palette’s strong blue presence evokes feelings of clarity, freedom, and professionalism, making it ideal for applications that aim to inspire and engage users with a crisp, modern aesthetic.

Best used for

  • Travel and tourism websites
  • Outdoor adventure brands
  • Marine research organizations
  • Tech company branding (innovative)
  • Sports event promotions
  • Educational content about climate

Suggested color roles

primary

#007FFF serves as a vibrant and engaging primary color, perfect for calls to action, brand logos, or prominent headers.

secondary

#009AD0 provides a stable, slightly muted secondary, suitable for subheadings, navigation, or supporting informational blocks.

accent

#00BFFF offers a bright, energetic accent, ideal for interactive elements, hover states, or eye-catching details.

background

#87CEEB creates a light, expansive backdrop, ensuring content clarity while maintaining the palette's open feel.

text

Use #006DD0 or a deep charcoal for body text on #87CEEB or #00BFFF backgrounds (with caution for #00BFFF).

Accessibility notes

  • Ensure #006DD0 text on #87CEEB backgrounds meets WCAG AA contrast standards.
  • Avoid using #87CEEB for small text on any other palette color due to insufficient contrast.
  • Use #007FFF or #009AD0 for critical interactive elements to ensure clear visibility.
  • For large text, #00BFFF on #87CEEB can work, but always verify contrast ratios.

Recommended combinations

Sky & Ocean

Creates a vibrant gradient from sky to deep ocean, ideal for hero sections or dynamic backgrounds.

#87CEEB · #00BFFF · #007FFF

Horizon UI

Perfect for clean user interfaces, using the light tone for backgrounds and deeper blues for interaction.

#87CEEB · #007FFF · #006DD0

Energetic Contrast

A strong contrasting trio for clear visual hierarchy, combining a vibrant primary with light background and supportive secondary.

#007FFF · #87CEEB · #009AD0

CSS variables

:root {
  --azure-horizon-2-1: #007FFF;
  --azure-horizon-2-2: #00BFFF;
  --azure-horizon-2-3: #87CEEB;
  --azure-horizon-2-4: #006DD0;
  --azure-horizon-2-5: #009AD0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-horizon-2": {
        1: "#007FFF",
        2: "#00BFFF",
        3: "#87CEEB",
        4: "#006DD0",
        5: "#009AD0",
      }
    }
  }
}

Related searches

vibrant blue horizon paletteenergetic ocean sky colorsbright blue web designopen blue color schemeprofessional blue branding

Palette colors

Hex values

Color 1#007FFF
·
Color 2#00BFFF
·
Color 3#87CEEB
·
Color 4#006DD0
·
Color 5#009AD0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
2.2:1Fail
1.3:1Fail
1.2:1Fail
2
1.8:1Fail
1.2:1Fail
2.4:1Fail
1.5:1Fail
3
2.2:1Fail
1.2:1Fail
2.9:1Fail
1.8:1Fail
4
1.3:1Fail
2.4:1Fail
2.9:1Fail
1.6:1Fail
5
1.2:1Fail
1.5:1Fail
1.8:1Fail
1.6:1Fail

Similar palettes

More like Azure Horizon

View all cool
Abstract Ocean Currents
Aegean Blue Depths
Aqua Marine Sparkle
Aurora Borealis Dream
Celestial Ocean Reef
Coral Lagoon Gleam