Back to palettes

Palette

Calm Ocean Sands

A soothing collection of muted greens and greys, like damp sand and distant ocean mist.

neutralcalm5 colors
More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#C4C9C3#A5ADA9#87918B#6A7670#4D5B55

Palette guide

How to use Calm Ocean Sands

Overview

The Calm Ocean Sands palette is a soothing collection of muted greens and greys, reminiscent of damp sand and distant ocean mist. This tranquil palette features a range of deep, earthy tones, from a light, misty grey-green, #C4C9C3, to a deeper sage, #A5ADA9, and a rich, grounded forest green, #4D5B55. Intermediate shades like #87918B and #6A7670 complete the spectrum, evoking a peaceful, overcast beach. Designers will find this palette excellent for creating organic, calming, and naturally appealing visuals. Developers can leverage these colors to build clean and inviting user interfaces for brands focused on sustainability, wellness, natural products, or any application seeking a serene, earthy, and harmonious aesthetic.

Best used for

  • Eco-friendly product branding
  • Wellness and spa websites
  • Coastal-inspired home decor
  • Nature photography portfolios
  • Sustainable fashion brands
  • Minimalist packaging design

Suggested color roles

primary

Utilize #C4C9C3 as a soft, adaptable primary background, providing a light and natural foundation.

secondary

Apply #A5ADA9 for supporting elements, offering a gentle sage green depth that complements the primary.

accent

Introduce #87918B as a subtle yet distinct accent for dividers or interactive elements, adding definition.

background

Employ #C4C9C3 for clean, light backgrounds, creating a gentle and harmonious canvas.

text

Use #4D5B55 for main body text and headings, ensuring strong readability and a sophisticated, grounded feel against lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast when pairing #4D5B55 text with #C4C9C3 or #A5ADA9 backgrounds for optimal readability.
  • Avoid using lighter greens/greys like #A5ADA9 or #87918B for small text against similar light backgrounds due to low contrast.
  • For interactive elements, use #4D5B55 or #6A7670 to ensure clear affordance and meet WCAG contrast guidelines.
  • Test color combinations across different screen types to verify visual clarity for all users.

Recommended combinations

Misty Shore

Creates a soft, harmonious blend of light grey-greens, ideal for subtle gradients, backgrounds, or layered effects.

#C4C9C3 · #A5ADA9 · #87918B

Ocean Depth

Offers a grounded and serene feel, combining deep forest green with light grey-green and a mid-tone for text or important elements.

#4D5B55 · #C4C9C3 · #6A7670

Sandy Greens

Provides a balanced blend of natural greens, suitable for content blocks or distinct sections, evoking damp sand.

#A5ADA9 · #87918B · #6A7670

CSS variables

:root {
  --calm-ocean-sands-1: #C4C9C3;
  --calm-ocean-sands-2: #A5ADA9;
  --calm-ocean-sands-3: #87918B;
  --calm-ocean-sands-4: #6A7670;
  --calm-ocean-sands-5: #4D5B55;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "calm-ocean-sands": {
        1: "#C4C9C3",
        2: "#A5ADA9",
        3: "#87918B",
        4: "#6A7670",
        5: "#4D5B55",
      }
    }
  }
}

Related searches

calm ocean color palettemuted green grey schemesandy beach colorstranquil nature paletteearthy coastal tones

Palette colors

Hex values

Color 1#C4C9C3
·
Color 2#A5ADA9
·
Color 3#87918B
·
Color 4#6A7670
·
Color 5#4D5B55
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.9:1Fail
2.8:1Fail
4.2:1AA18
2
1.4:1Fail
1.4:1Fail
2.1:1Fail
3.1:1AA18
3
1.9:1Fail
1.4:1Fail
1.5:1Fail
2.2:1Fail
4
2.8:1Fail
2.1:1Fail
1.5:1Fail
1.5:1Fail
5
4.2:1AA18
3.1:1AA18
2.2:1Fail
1.5:1Fail

Similar palettes

More like Calm Ocean Sands

View all neutral
Coastal Driftwood Grey
Coastal Driftwood Grey
Coastal Driftwood Grey
Coastal Driftwood Hues
Coastal Dune Breeze
Coastal Dune Grass