Palette

Ocean Driftwood Calm

Reflects the calming expanse of the ocean meeting weathered driftwood, serene and profound.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A5C0D4#739DB6#507A94#2A4F6A#152A3F

Palette guide

How to use Ocean Driftwood Calm

Overview

The Ocean Driftwood Calm palette captures the serene essence of the ocean meeting weathered driftwood, offering a profound yet calming range of blues. From the light, airy #A5C0D4 (Light Slate Blue) to the deep, grounding #152A3F (Dark Charcoal Blue), this gradient transitions through harmonious shades like #739DB6 (Steel Blue), #507A94 (Cadet Blue), and #2A4F6A (Dark Blue-Gray). It's an excellent choice for designers and developers looking to create a peaceful, contemplative, and sophisticated atmosphere. This palette is particularly effective for projects that require a sense of natural beauty, stability, and understated elegance, inviting users into a tranquil digital experience.

Best used for

Coastal living e-commerce sites
Meditation or mindfulness apps
High-end furniture or decor brands
Environmental research websites
Luxury travel blogs
Serene corporate branding

Suggested color roles

primary

#152A3F provides a deep, stable foundation for backgrounds or main branding, conveying gravitas.

secondary

Use #2A4F6A or #507A94 for navigation, secondary content blocks, or subtle layering.

accent

#A5C0D4 serves as a soft, inviting accent, perfect for calls to action or highlighting key features without being jarring.

background

#A5C0D4 creates a light, expansive background, while #152A3F offers a dramatic, deep canvas.

text

On dark backgrounds like #152A3F, white or a very light gray is optimal. For lighter shades like #A5C0D4, a deep charcoal or #152A3F provides excellent contrast.

Accessibility notes

Crucially, ensure strong contrast for text on darker shades like #152A3F and #2A4F6A; white is often the best choice.
For #A5C0D4 and #739DB6 as backgrounds, use a dark text color (e.g., #152A3F or black) to meet readability standards.
Avoid using #A5C0D4 for small text on #739DB6 as contrast may be insufficient.
Provide clear visual indicators for interactive elements beyond color, especially for the mid-tones.

Recommended combinations

Deep Ocean Calm

Ideal for creating depth in UI, with the darkest color as base and lightest for highlights.

#152A3F · #507A94 · #A5C0D4

Coastal Serenity

Great for content sections, providing a gentle visual flow from light to darker elements.

#A5C0D4 · #739DB6 · #2A4F6A

Weathered Blues

Suited for subtle gradients or complex data visualizations that need a serious, yet calm, tone.

#739DB6 · #2A4F6A · #152A3F

CSS variables

:root {
  --ocean-driftwood-calm-1: #A5C0D4;
  --ocean-driftwood-calm-2: #739DB6;
  --ocean-driftwood-calm-3: #507A94;
  --ocean-driftwood-calm-4: #2A4F6A;
  --ocean-driftwood-calm-5: #152A3F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-driftwood-calm": {
        1: "#A5C0D4",
        2: "#739DB6",
        3: "#507A94",
        4: "#2A4F6A",
        5: "#152A3F",
      }
    }
  }
}

Hex values

Color 1#A5C0D4

Color 2#739DB6

Color 3#507A94

Color 4#2A4F6A

Color 5#152A3F

Accessibility

Contrast checker

1.5:1Fail

2.4:1Fail

4.6:1AA

7.7:1AAA

1.5:1Fail

1.6:1Fail

3:1Fail

5:1AA

2.4:1Fail

1.6:1Fail

1.9:1Fail

3.2:1AA18

4.6:1AA

3:1Fail

1.9:1Fail

1.7:1Fail

7.7:1AAA

5:1AA

3.2:1AA18

1.7:1Fail

Similar palettes

More like Ocean Driftwood Calm

View all cool

Azure Coast Serenity

Cerulean Shoreline Whisper

Coastal Breeze Mist

Coastal Seafoam Spray

Mediterranean Harbor Day

Ocean Spray Whispers