Back to palettes

Palette

Gentle Breeze Chime

Light, airy blues and greens that evoke the soothing sound of chimes in a gentle, cool breeze.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Gentle Breeze Chime 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 Gentle Breeze Chime.

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

Data visualization

#ADD8E6#B0E0E6#87CEEB#AEC6CF#BBDDFF

Palette guide

How to use Gentle Breeze Chime

Overview

The "Gentle Breeze Chime" palette is a refreshing collection of light, airy blues, designed to evoke tranquility and serenity. Featuring a spectrum from the soft #ADD8E6 and #B0E0E6, through the vibrant #87CEEB, to the muted #AEC6CF and bright #BBDDFF, this palette captures the soothing essence of a clear sky. Designers can utilize these harmonious blues to create clean, calm, and trustworthy digital experiences. Developers will find these cool tones ideal for crafting refreshing user interfaces, marine-themed applications, or branding that emphasizes clarity, peace, and an open, spacious feel.

Best used for

  • Wellness and meditation apps
  • Cloud services and tech branding
  • Coastal or travel agency websites
  • Spa and relaxation product packaging
  • Healthcare and medical interfaces
  • Clean, minimalist web design

Suggested color roles

primary

#ADD8E6 - A soft, light blue, perfect as a primary background, offering a sense of calm and openness.

secondary

#AEC6CF - A slightly muted blue-gray, ideal for secondary content areas, card backgrounds, or subtle navigation.

accent

#87CEEB - A vibrant sky blue, excellent for calls-to-action, important links, or key icons, providing a refreshing highlight.

background

#BBDDFF - A very light, bright blue that creates an expansive and airy canvas for content.

text

A deep navy or charcoal (e.g., #2C3E50 or #333333) - Essential for strong readability against these light blue backgrounds.

Accessibility notes

  • Use dark text (e.g., navy, charcoal) on all light blue backgrounds to ensure adequate contrast for readability.
  • Avoid using any of the lighter palette colors for text on other light blue backgrounds.
  • #87CEEB provides good contrast for interactive elements when placed on darker blues or as an accent against the lightest backgrounds.
  • Ensure sufficient contrast for icons and UI elements, especially against similar hues.

Recommended combinations

Sky Layers

Create subtle background layers or card designs, giving depth to light interfaces.

#BBDDFF · #ADD8E6 · #AEC6CF

Breeze Accent

Use the vibrant blue as a crisp accent for buttons or key information against a calm base.

#ADD8E6 · #87CEEB · #B0E0E6

Muted Calm

Ideal for secondary content sections or subtle data visualizations, maintaining a serene feel.

#AEC6CF · #B0E0E6 · #ADD8E6

CSS variables

:root {
  --gentle-breeze-chime-1: #ADD8E6;
  --gentle-breeze-chime-2: #B0E0E6;
  --gentle-breeze-chime-3: #87CEEB;
  --gentle-breeze-chime-4: #AEC6CF;
  --gentle-breeze-chime-5: #BBDDFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "gentle-breeze-chime": {
        1: "#ADD8E6",
        2: "#B0E0E6",
        3: "#87CEEB",
        4: "#AEC6CF",
        5: "#BBDDFF",
      }
    }
  }
}

Related searches

calm blue color paletteairy light blue schemeserene web design colorsbreezy UI palettesky blue branding colors

Palette colors

Hex values

Color 1#ADD8E6
·
Color 2#B0E0E6
·
Color 3#87CEEB
·
Color 4#AEC6CF
·
Color 5#BBDDFF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.1:1Fail
1.2:1Fail
1.1:1Fail
2
1.1:1Fail
1.2:1Fail
1.2:1Fail
1:1Fail
3
1.1:1Fail
1.2:1Fail
1:1Fail
1.2:1Fail
4
1.2:1Fail
1.2:1Fail
1:1Fail
1.3:1Fail
5
1.1:1Fail
1:1Fail
1.2:1Fail
1.3:1Fail

Similar palettes

More like Gentle Breeze Chime

View all cool