Back to palettes

Palette

Azure Horizon

A refreshing gradient of blues and aquas, inspired by the vastness of the ocean and open sky.

coolcalm5 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

#6A99A8#8FB8CB#B8D4E3#D9ECF2#4C7C8B

Palette guide

How to use Azure Horizon

Overview

The Azure Horizon palette (ID: azure-horizon) offers a refreshing gradient of blues and aquas, inspired by the vastness of the ocean and open sky. This collection ranges from the grounded muted teal of #4C7C8B and #6A99A8, through the balanced mid-tones of #8FB8CB, to the light, airy #B8D4E3 and #D9ECF2. Designers and developers will find these hues exceptionally useful for creating calm, minimalist, and spacious digital experiences. The palette's subtle sophistication and natural elegance make it highly versatile for projects that aim for a clean aesthetic, promoting a sense of peace and clarity without being overly vibrant.

Best used for

  • Minimalist portfolio websites
  • Sustainable fashion brands
  • Architecture and interior design studios
  • Cloud computing services
  • Meditation and mindfulness platforms
  • Clean tech company branding

Suggested color roles

primary

#4C7C8B serves as a grounded and sophisticated primary, ideal for strong branding, main navigation, or important headers.

secondary

#6A99A8 offers a supportive, muted blue-grey secondary, suitable for subheadings, content sections, or supportive graphics.

accent

#8FB8CB provides a lighter, inviting accent, perfect for interactive elements, hover states, or subtle highlights.

background

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

text

Use #4C7C8B or a deep charcoal for body text on #D9ECF2 or #B8D4E3 backgrounds for optimal legibility.

Accessibility notes

  • Ensure #4C7C8B text on #D9ECF2 backgrounds meets WCAG AA contrast standards.
  • Avoid using #D9ECF2 for small text on any other palette color due to insufficient contrast.
  • Use #4C7C8B or #6A99A8 for critical interactive elements to ensure clear visibility.
  • For large text, #8FB8CB on #D9ECF2 can work, but always verify contrast ratios.

Recommended combinations

Muted Ocean

Creates a deep, calming gradient, ideal for sophisticated backgrounds or data visualizations.

#4C7C8B · #6A99A8 · #8FB8CB

Sky Minimalism

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

#D9ECF2 · #B8D4E3 · #8FB8CB

Subtle Contrast

A balanced trio for clear visual hierarchy, combining a grounded primary with a light background and supportive secondary.

#4C7C8B · #D9ECF2 · #6A99A8

CSS variables

:root {
  --azure-horizon-1: #6A99A8;
  --azure-horizon-2: #8FB8CB;
  --azure-horizon-3: #B8D4E3;
  --azure-horizon-4: #D9ECF2;
  --azure-horizon-5: #4C7C8B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-horizon": {
        1: "#6A99A8",
        2: "#8FB8CB",
        3: "#B8D4E3",
        4: "#D9ECF2",
        5: "#4C7C8B",
      }
    }
  }
}

Related searches

minimalist blue grey palettemuted ocean colorscalm aqua web designsubtle blue brandingspacious blue green scheme

Palette colors

Hex values

Color 1#6A99A8
·
Color 2#8FB8CB
·
Color 3#B8D4E3
·
Color 4#D9ECF2
·
Color 5#4C7C8B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2:1Fail
2.6:1Fail
1.5:1Fail
2
1.5:1Fail
1.4:1Fail
1.7:1Fail
2.2:1Fail
3
2:1Fail
1.4:1Fail
1.3:1Fail
3:1Fail
4
2.6:1Fail
1.7:1Fail
1.3:1Fail
3.8:1AA18
5
1.5:1Fail
2.2:1Fail
3:1Fail
3.8:1AA18

Similar palettes

More like Azure Horizon

View all cool
Abyssal Blue Descent
Aegean Coast Whisper
Aqua Marine Vista
Aqua Ocean Dream
Arctic Ocean
Azure Abyss Calm