Back to palettes

Palette

Quiet Bay Ripple

A soothing collection of blues and greens, reflecting the peaceful quiet of a sunlit bay.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Quiet Bay Ripple 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 Quiet Bay Ripple.

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

Data visualization

#BCDDF0#9AD0E0#6ABCCD#4F9DC3#367FA4

Palette guide

How to use Quiet Bay Ripple

Overview

The "Quiet Bay Ripple" palette is a soothing collection of blues and teals, perfectly capturing the tranquil essence of a sunlit, calm bay. It ranges from a deep, anchoring #367FA4 (steel blue) through refreshing #4F9DC3 (cerulean) and a vibrant #6ABCCD (turquoise). Lighter, airy tones like #9AD0E0 (sky blue) and the softest #BCDDF0 (light blue) complete this serene collection. This palette is ideal for designers and developers aiming to create peaceful, refreshing, and inviting user experiences. It's perfectly suited for wellness apps, travel websites, or any project demanding a calm, natural, and harmonious visual identity, ensuring a serene and engaging interaction.

Best used for

  • Wellness and meditation apps
  • Coastal travel agency websites
  • Spa and beauty brand identity
  • Eco-friendly product packaging
  • Children's educational apps (calming themes)
  • Nature-themed blog or photography portfolios

Suggested color roles

primary

This calming cerulean blue #4F9DC3 is excellent for main calls-to-action, prominent headings, or key branding elements, evoking trust and serenity.

secondary

A vibrant turquoise #6ABCCD, ideal for subheadings, secondary buttons, or data visualization, adding a refreshing touch.

accent

A soft sky blue #9AD0E0, perfect for subtle highlights, hover states, or decorative elements that suggest lightness and air.

background

The lightest blue #BCDDF0 provides a very soft, cool, and clean background, promoting readability and a peaceful user experience.

text

The deepest steel blue #367FA4 offers strong readability against lighter backgrounds, ideal for body text, links, and important labels, or a dark navy.

Accessibility notes

  • Ensure #367FA4 text has strong contrast against #BCDDF0 backgrounds.
  • Avoid using #9AD0E0 text on #BCDDF0 due to insufficient contrast.
  • Verify all text and interactive elements meet WCAG AA or AAA contrast guidelines.
  • For small text or crucial information, consider using a darker blue or black for optimal legibility.

Recommended combinations

Ocean Breeze

Creates a refreshing and professional feel, ideal for main content and branding.

#367FA4 · #BCDDF0 · #4F9DC3

Ripple Effect

Provides a lighter, airy feel, suitable for secondary information, subtle accents, or backgrounds.

#6ABCCD · #9AD0E0 · #BCDDF0

Bay Depth

Offers a balanced look with depth and lightness, great for navigation, footers, or clean data displays.

#4F9DC3 · #BCDDF0 · #367FA4

CSS variables

:root {
  --quiet-bay-ripple-1: #BCDDF0;
  --quiet-bay-ripple-2: #9AD0E0;
  --quiet-bay-ripple-3: #6ABCCD;
  --quiet-bay-ripple-4: #4F9DC3;
  --quiet-bay-ripple-5: #367FA4;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "quiet-bay-ripple": {
        1: "#BCDDF0",
        2: "#9AD0E0",
        3: "#6ABCCD",
        4: "#4F9DC3",
        5: "#367FA4",
      }
    }
  }
}

Related searches

calm blue green paletteocean inspired hex codestranquil water colorsserene UI designcool relaxing color scheme

Palette colors

Hex values

Color 1#BCDDF0
·
Color 2#9AD0E0
·
Color 3#6ABCCD
·
Color 4#4F9DC3
·
Color 5#367FA4
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.5:1Fail
2.1:1Fail
3.1:1AA18
2
1.2:1Fail
1.3:1Fail
1.8:1Fail
2.6:1Fail
3
1.5:1Fail
1.3:1Fail
1.4:1Fail
2:1Fail
4
2.1:1Fail
1.8:1Fail
1.4:1Fail
1.5:1Fail
5
3.1:1AA18
2.6:1Fail
2:1Fail
1.5:1Fail

Similar palettes

More like Quiet Bay Ripple

View all cool
Azure Lagoon Drift
Azure Abyss Calm
Azure Reef Currents
Calm Ocean Swell
Cerulean Shore Breeze
Coastal Breeze