Back to palettes

Palette

Ocean Spray Calm

Soft blues and lavenders capture the tranquil mist and gentle waves of a serene coastline.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ocean Spray 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 Ocean Spray Calm.

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

Data visualization

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

Palette guide

How to use Ocean Spray Calm

Overview

The Ocean Spray Calm palette captures the tranquil mist and gentle waves of a serene coastline with its soft blues and lavenders. It features the deep, sophisticated slate blue of #6A5ACD, transitioning gracefully through the robust steel blue #4682B4, to the lighter sky blue #87CEEB. The palette is completed by two gentle, airy tones, #B0E0E6 and #ADD8E6, which evoke seafoam and clear skies. This collection is ideal for designers seeking a peaceful, elegant, and calming aesthetic. Developers can utilize these hex codes to build user interfaces that feel soothing, trustworthy, and sophisticated, perfect for meditation apps, financial services, or luxury resorts.

Best used for

  • Meditation and mindfulness applications
  • Financial and corporate branding
  • Luxury resort and hospitality design
  • Serene interior design concepts
  • Calm educational platforms
  • Wellness and mental health services

Suggested color roles

primary

#6A5ACD (Slate Blue) - Excellent for primary headings, navigation, or strong brand elements, conveying sophistication and trust.

secondary

#4682B4 (Steel Blue) - Use for subheadings, secondary buttons, or background sections, providing a robust, calming presence.

accent

#87CEEB (Sky Blue) - Ideal for interactive elements, highlights, or graphic details to add a touch of lightness and freshness.

background

#ADD8E6 (Light Blue) - Provides a soft, airy base, reminiscent of clear skies, enhancing the tranquil feel.

text

A dark charcoal like #333333 or even #6A5ACD for headings, ensuring optimal readability on light backgrounds.

Accessibility notes

  • #ADD8E6 and #B0E0E6 are light; use dark text (e.g., black) for all content on these backgrounds.
  • #6A5ACD and #4682B4 provide good contrast for light text, but generally use dark text on light backgrounds.
  • Text in #87CEEB will require dark text for WCAG AA contrast.
  • Ensure sufficient contrast between #B0E0E6 and #ADD8E6 if used adjacently for distinct elements.

Recommended combinations

Serene Depths

A light blue background with a deep slate blue for primary elements and steel blue for secondary, creating a sophisticated and calm design.

#ADD8E6 · #6A5ACD · #4682B4

Sky & Mist

Layered light blues for an ethereal background, with a touch of deep slate blue for grounding text or accents.

#B0E0E6 · #87CEEB · #6A5ACD

Trustworthy Flow

Steel blue as a dominant color, light blue for soft sections, and sky blue for highlights, conveying reliability and openness.

#4682B4 · #ADD8E6 · #87CEEB

CSS variables

:root {
  --ocean-spray-calm-1: #6A5ACD;
  --ocean-spray-calm-2: #4682B4;
  --ocean-spray-calm-3: #87CEEB;
  --ocean-spray-calm-4: #B0E0E6;
  --ocean-spray-calm-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-spray-calm": {
        1: "#6A5ACD",
        2: "#4682B4",
        3: "#87CEEB",
        4: "#B0E0E6",
        5: "#ADD8E6",
      }
    }
  }
}

Related searches

calm blue lavender paletteserene coastline color schemesophisticated blue UI colorstranquil meditation app palettetrustworthy financial design

Palette colors

Hex values

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

Accessibility

Contrast checker

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

Similar palettes

More like Ocean Spray Calm

View all cool
Aegean Coast Whisper
Aegean Sea Serene
Ancient Aegean Sea
Aquatic Moss Garden
Arctic Glacier Lagoon
Azure Bay Retreat