Back to palettes

Palette

Pacific Haze Calm

A tranquil blend of light blues, capturing the serene, hazy calm of the Pacific horizon.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Pacific Haze Calm 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 Pacific Haze Calm.

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

Data visualization

#A2DCE3#C2ECED#DFF7F8#EFFEFF#88CCD4

Palette guide

How to use Pacific Haze Calm

Overview

The Pacific Haze Calm palette offers a tranquil blend of light blues, perfect for evoking serenity and peace. With shades like the soft #A2DCE3 and the ethereal #EFFEFF, this scheme is ideal for designs aiming for a clean, refreshing, and meditative atmosphere. It features a spectrum from a subtle, slightly deeper blue like #88CCD4 to almost-white tones, allowing for gentle gradients and a spacious feel. Designers and developers can leverage this palette to create interfaces that feel light, airy, and inviting, promoting a sense of calm and clarity across various digital and print applications.

Best used for

  • Wellness and spa branding
  • Minimalist website design
  • Travel agency promotions (oceanic themes)
  • Baby product packaging
  • Medical or healthcare interfaces
  • Serene interior design concepts

Suggested color roles

primary

Use #A2DCE3 as a foundational brand color for large sections or main headers, offering a stable yet light presence.

secondary

Employ #C2ECED for supporting elements, sub-sections, or background patterns, providing a gentle contrast.

accent

Highlight interactive elements or key information with #88CCD4, offering a touch more depth without losing calm.

background

Utilize #EFFEFF or #DFF7F8 for clean, airy backgrounds, creating a spacious and unobtrusive canvas.

text

Pair with a dark charcoal or deep navy, such as #333333, to ensure optimal readability against these light, serene hues.

Accessibility notes

  • Ensure sufficient contrast for all text, especially on lighter backgrounds like #EFFEFF; use dark text.
  • The light blues have low contrast against each other, so use them carefully for non-text elements or add borders.
  • Interactive elements should have distinct hover/focus states to compensate for subtle color shifts.
  • Avoid using light-colored text on any of these pale blue shades for readability.

Recommended combinations

Calm Blend

Ideal for soft gradients, expansive backgrounds, or illustrative elements that require a gentle transition.

#A2DCE3 · #C2ECED · #EFFEFF

Serene Accent

Effective for UI elements, subtle calls to action, or highlighting key sections with a touch of depth.

#EFFEFF · #88CCD4 · #A2DCE3

Deep Calm

Suitable for headings, sub-sections, or graphic elements where a slightly stronger presence is desired.

#88CCD4 · #A2DCE3 · #DFF7F8

CSS variables

:root {
  --pacific-haze-calm-1: #A2DCE3;
  --pacific-haze-calm-2: #C2ECED;
  --pacific-haze-calm-3: #DFF7F8;
  --pacific-haze-calm-4: #EFFEFF;
  --pacific-haze-calm-5: #88CCD4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "pacific-haze-calm": {
        1: "#A2DCE3",
        2: "#C2ECED",
        3: "#DFF7F8",
        4: "#EFFEFF",
        5: "#88CCD4",
      }
    }
  }
}

Related searches

calm blue paletteserene color schemelight ocean colorstranquil web designpastel blue UI

Palette colors

Hex values

Color 1#A2DCE3
·
Color 2#C2ECED
·
Color 3#DFF7F8
·
Color 4#EFFEFF
·
Color 5#88CCD4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.4:1Fail
1.5:1Fail
1.2:1Fail
2
1.2:1Fail
1.1:1Fail
1.2:1Fail
1.4:1Fail
3
1.4:1Fail
1.1:1Fail
1.1:1Fail
1.6:1Fail
4
1.5:1Fail
1.2:1Fail
1.1:1Fail
1.7:1Fail
5
1.2:1Fail
1.4:1Fail
1.6:1Fail
1.7:1Fail

Similar palettes

More like Pacific Haze Calm

View all cool
Aegean Coast Whisper
Azure Coast Serenity
Calm Ocean Swell
Coastal Mist
Coastal Seafoam Spray
Coastal Tide Shimmer