Back to palettes

Palette

Azure Ripple Effect

A serene monochromatic blue palette, capturing the gentle movement and varied depths of calm ocean waters.

monochromecalm5 colors
More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Azure Ripple Effect 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 Ripple Effect.

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

Data visualization

#0B3B60#2B6777#5C9EAD#8DCCDE#B3DEE2

Palette guide

How to use Azure Ripple Effect

Overview

The Azure Ripple Effect palette presents a beautifully monochromatic spectrum of blues, designed to mimic the gentle movement and varied depths of calm ocean waters. Ranging from the profound depth of #0B3B60 to the airy lightness of #B3DEE2, with intermediate shades like #2B6777, #5C9EAD, and #8DCCDE, this collection offers sophisticated versatility. It's ideal for designers seeking to create a cohesive, serene, and professional aesthetic, whether for digital interfaces, corporate branding, or elegant print materials. The gradual progression of tones ensures visual harmony and a sense of peaceful flow.

Best used for

  • Corporate and financial services websites
  • Medical or healthcare branding
  • Luxury travel agencies
  • Environmental non-profit organizations
  • Meditation or mindfulness apps
  • Elegant packaging design

Suggested color roles

primary

#0B3B60 - A deep, authoritative navy blue, perfect for branding, primary headers, and strong call-to-actions.

secondary

#2B6777 - A rich, muted teal-blue, suitable for subheadings, navigation elements, and important informational panels.

accent

#8DCCDE - A bright, clear sky blue, excellent for interactive elements, highlights, or subtle decorative accents to draw attention.

background

#B3DEE2 - A very light, almost white blue, creating a clean, airy canvas for content and providing a sense of openness.

text

#0B3B60 - Provides excellent contrast against lighter shades like #B3DEE2, making it suitable for body text and headings.

Accessibility notes

  • Ensure #0B3B60 text on #B3DEE2 background meets WCAG AA contrast standards (it will, it's a dark color on a very light one).
  • Avoid using lighter blues like #8DCCDE for body text on #B3DEE2 as contrast will be insufficient.
  • Check contrast if using #5C9EAD for text on #8DCCDE; it might pass for large text but fail for regular.
  • For critical information, consider using the darkest color, #0B3B60, for text against the lightest background, #B3DEE2.

Recommended combinations

Deep Ocean

Creates a serious, trustworthy, and sophisticated look, ideal for professional services or luxury brands.

#0B3B60 · #2B6777 · #5C9EAD

Serene Horizon

Perfect for airy, calm designs like wellness apps or travel sites, emphasizing lightness and tranquility.

#B3DEE2 · #8DCCDE · #5C9EAD

Ripple Contrast

A high-contrast pairing for clear hierarchy and readability, great for dashboards or informational graphics.

#0B3B60 · #B3DEE2 · #8DCCDE

CSS variables

:root {
  --azure-ripple-effect-1: #0B3B60;
  --azure-ripple-effect-2: #2B6777;
  --azure-ripple-effect-3: #5C9EAD;
  --azure-ripple-effect-4: #8DCCDE;
  --azure-ripple-effect-5: #B3DEE2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-ripple-effect": {
        1: "#0B3B60",
        2: "#2B6777",
        3: "#5C9EAD",
        4: "#8DCCDE",
        5: "#B3DEE2",
      }
    }
  }
}

Related searches

monochromatic blue schemescalm ocean color paletteserene blue brandingcool blue web designdepth and tranquility colors

Palette colors

Hex values

Color 1#0B3B60
·
Color 2#2B6777
·
Color 3#5C9EAD
·
Color 4#8DCCDE
·
Color 5#B3DEE2
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.8:1Fail
3.8:1AA18
6.5:1AA
8:1AAA
2
1.8:1Fail
2.1:1Fail
3.6:1AA18
4.4:1AA18
3
3.8:1AA18
2.1:1Fail
1.7:1Fail
2.1:1Fail
4
6.5:1AA
3.6:1AA18
1.7:1Fail
1.2:1Fail
5
8:1AAA
4.4:1AA18
2.1:1Fail
1.2:1Fail

Similar palettes

More like Azure Ripple Effect

View all monochrome
Foggy Shore Serene
Azure Depths Gradient
Azure Sky Grayscale
Deep Arctic Current
Deep Azure Plunge
Glacial Blue Whisper