Back to palettes

Palette

Olive Grove Slumber

Peaceful, muted greens and grays evoking the quiet serenity of an ancient olive grove at rest.

earthcalm5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Olive Grove Slumber 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 Olive Grove Slumber.

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

Data visualization

#5C5F4B#7A7D69#9EA08F#C7C9B8#4D4E3D

Palette guide

How to use Olive Grove Slumber

Overview

The Olive Grove Slumber palette offers a peaceful collection of muted greens and grays, evoking the quiet serenity of an ancient olive grove at rest. Featuring tranquil shades like #5C5F4B, #7A7D69, #9EA08F, #C7C9B8, and #4D4E3D, this palette is perfect for designers and developers aiming to create calming and natural aesthetics. Its earthy tones provide a sophisticated yet understated feel, ideal for projects emphasizing sustainability, wellness, or organic elegance, ensuring a harmonious and inviting visual experience.

Best used for

  • Eco-friendly brand identities
  • Wellness and spa websites
  • Natural product packaging
  • Interior design for calming spaces
  • Sustainable fashion branding
  • Organic food blogs and content

Suggested color roles

primary

#5C5F4B (a deep, muted olive green) works well for main headers, brand logos, or prominent feature sections, establishing a grounded feel.

secondary

#7A7D69 (a medium, soft olive gray) is suitable for navigation elements, secondary text, or background panels, providing subtle visual separation.

accent

#4D4E3D (the darkest, rich earth tone) can be used for subtle accents, important calls to action, or small decorative details, adding understated depth.

background

#C7C9B8 (the lightest, airy greige) serves as a soft, breathable page background, allowing other elements to emerge gently.

text

#4D4E3D provides excellent contrast for body text on light backgrounds like #C7C9B8, or opt for a very dark charcoal for optimal readability.

Accessibility notes

  • Ensure #4D4E3D provides sufficient contrast on #C7C9B8 for body text to comply with WCAG AA.
  • Lighter colors such as #9EA08F might not offer enough contrast for text on #C7C9B8, especially for smaller fonts.
  • Use the darkest shade, #4D4E3D, for critical text elements and interactive components.
  • Avoid pairing light text with light backgrounds (e.g., #C7C9B8 text on #9EA08F background) to prevent readability issues.

Recommended combinations

Serene Base

Creates a soft, harmonious, and calming backdrop for web pages or print layouts, promoting tranquility.

#C7C9B8 · #9EA08F · #7A7D69

Earthy Depth

For strong headings, feature blocks, or hero sections, paired with light text for impact.

#5C5F4B · #4D4E3D · #C7C9B8

Subtle Contrast

Ideal for layered UI elements, card backgrounds, or distinct content blocks with dark text.

#7A7D69 · #C7C9B8 · #4D4E3D

CSS variables

:root {
  --olive-grove-slumber-1: #5C5F4B;
  --olive-grove-slumber-2: #7A7D69;
  --olive-grove-slumber-3: #9EA08F;
  --olive-grove-slumber-4: #C7C9B8;
  --olive-grove-slumber-5: #4D4E3D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "olive-grove-slumber": {
        1: "#5C5F4B",
        2: "#7A7D69",
        3: "#9EA08F",
        4: "#C7C9B8",
        5: "#4D4E3D",
      }
    }
  }
}

Related searches

muted green gray palettecalming earthy colorsnatural olive tonespeaceful design palettesustainable brand colors

Palette colors

Hex values

Color 1#5C5F4B
·
Color 2#7A7D69
·
Color 3#9EA08F
·
Color 4#C7C9B8
·
Color 5#4D4E3D
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.5:1Fail
3.9:1AA18
1.3:1Fail
2
1.6:1Fail
1.6:1Fail
2.5:1Fail
2:1Fail
3
2.5:1Fail
1.6:1Fail
1.6:1Fail
3.2:1AA18
4
3.9:1AA18
2.5:1Fail
1.6:1Fail
5:1AA
5
1.3:1Fail
2:1Fail
3.2:1AA18
5:1AA

Similar palettes

More like Olive Grove Slumber

View all earth
Dune Seagrass Drift
Matcha Ceremony Peace
Bamboo Grove Mist
Enchanted Garden Gate
Forest Whisper Green
Garden Gate Ivy