Back to palettes

Palette

Azure Horizon Dream

A peaceful collection inspired by the expansive, clear blues of an ocean horizon blending into a serene sky.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

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

Palette guide

How to use Azure Horizon Dream

Overview

The Azure Horizon Dream palette is a peaceful collection inspired by the expansive, clear blues of an ocean horizon blending into a serene sky. It features the grounding steel blue of #4682B4, the sophisticated periwinkle of #6A5ACD, and the airy sky blues of #87CEEB, #ADD8E6, and #B0E0E6. This palette is an excellent choice for designers and developers aiming to create calm, reflective, and elegant digital environments. Its harmonious blend of cool tones promotes a sense of tranquility and depth, making it versatile for applications that require both soothing aesthetics and a touch of understated sophistication.

Best used for

  • Meditation and wellness apps
  • Luxury travel agencies
  • Interior design websites
  • Art and photography portfolios
  • High-end fashion branding
  • Mindfulness and self-care platforms

Suggested color roles

primary

#4682B4 serves as a stable and sophisticated primary, ideal for brand elements, main navigation, or important headers.

secondary

#6A5ACD offers a unique periwinkle secondary, perfect for subheadings, decorative accents, or a touch of creative flair.

accent

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

background

#ADD8E6 creates a soft, expansive backdrop, ensuring content is prominent while maintaining an airy feel.

text

Use #4682B4 or a deep charcoal for body text on #ADD8E6 or #B0E0E6 backgrounds for optimal legibility.

Accessibility notes

  • Ensure #4682B4 text on #ADD8E6 backgrounds meets WCAG AA contrast standards.
  • Avoid using #ADD8E6 or #B0E0E6 for small text on light backgrounds due to potential low contrast.
  • Use #4682B4 or #6A5ACD for critical interactive elements to provide clear visual cues.
  • For large text, #87CEEB on #ADD8E6 can work, but verify contrast carefully.

Recommended combinations

Dreamy Gradient

Creates a soft, ethereal background gradient, mimicking a serene sky.

#B0E0E6 · #ADD8E6 · #87CEEB

Horizon Depth

Excellent for creating visual depth, moving from a grounded blue to a lighter, dreamier tone.

#4682B4 · #6A5ACD · #87CEEB

Serene Contrast

A balanced trio for clear hierarchy, combining a strong primary with a soft background and unique accent.

#4682B4 · #ADD8E6 · #6A5ACD

CSS variables

:root {
  --azure-horizon-dream-1: #4682B4;
  --azure-horizon-dream-2: #6A5ACD;
  --azure-horizon-dream-3: #87CEEB;
  --azure-horizon-dream-4: #ADD8E6;
  --azure-horizon-dream-5: #B0E0E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-horizon-dream": {
        1: "#4682B4",
        2: "#6A5ACD",
        3: "#87CEEB",
        4: "#ADD8E6",
        5: "#B0E0E6",
      }
    }
  }
}

Related searches

serene blue periwinkle paletteocean horizon colorscalm sky blue designdreamy blue brandingsophisticated blue grey scheme

Palette colors

Hex values

Color 1#4682B4
·
Color 2#6A5ACD
·
Color 3#87CEEB
·
Color 4#ADD8E6
·
Color 5#B0E0E6
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
2.4:1Fail
2.7:1Fail
2.9:1Fail
2
1.3:1Fail
3:1AA18
3.5:1AA18
3.7:1AA18
3
2.4:1Fail
3:1AA18
1.1:1Fail
1.2:1Fail
4
2.7:1Fail
3.5:1AA18
1.1:1Fail
1.1:1Fail
5
2.9:1Fail
3.7:1AA18
1.2:1Fail
1.1:1Fail

Similar palettes

More like Azure Horizon Dream

View all cool
Azure Horizon Gaze
Azure Sky Whisper
Cerulean Shore Breeze
Cloudscape Serenity Blue
Cloudspun Serenity
Aegean Horizon