Back to palettes

Palette

Mediterranean Olive Grove

Muted greens and warm beiges that capture the serene beauty of sun-drenched olive groves.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#5F6C4C#8B9C7A#B9CAAB#D9E8D3#424C35

Palette guide

How to use Mediterranean Olive Grove

Overview

The Mediterranean Olive Grove palette offers a serene collection of muted greens and deep earth tones, perfectly capturing the rustic beauty of sun-drenched olive groves. Featuring a range from the deep, grounding #424C35 and #5F6C4C, through the balanced mid-greens of #8B9C7A and #B9CAAB, to the airy light green of #D9E8D3, this palette exudes natural tranquility. Designers can craft organic, calming interfaces, while developers will find these shades excellent for establishing a sophisticated, nature-inspired theme with clear visual hierarchy, ensuring a harmonious and readable user experience across all components.

Best used for

  • Organic food and sustainable product branding
  • Eco-tourism and nature retreat websites
  • Health and wellness applications with a natural focus
  • Interior design for rustic or farmhouse styles
  • Skincare and natural beauty product packaging
  • Educational platforms on botany or agriculture

Suggested color roles

primary

A deep, rich olive green, #424C35 is ideal for main headings, brand logos, or prominent call-to-action buttons, conveying a sense of grounded nature.

secondary

A slightly lighter, yet still deep green, #5F6C4C is excellent for subheadings, navigation elements, or important data visualizations, providing strong readability.

accent

A softer, muted green, #8B9C7A is perfect for interactive elements, hover states, or subtle graphical accents that blend seamlessly.

background

A very light, airy green, #D9E8D3 serves as a fresh, natural canvas, enhancing the palette's organic and tranquil feel.

text

Use the darkest green, #424C35, for body text on the light background #D9E8D3 to ensure optimal contrast and legibility.

Accessibility notes

  • Ensure #B9CAAB is not used for small text on #D9E8D3 due to potential low contrast.
  • #424C35 and #5F6C4C provide excellent contrast for text on #D9E8D3.
  • For interactive elements, use #5F6C4C or #8B9C7A to ensure they are easily distinguishable.
  • Always check WCAG guidelines for color combinations, especially for text and UI elements.

Recommended combinations

Grove Canopy

Deepest green for strong headings on a light green background, with a mid-green for supporting details.

#424C35 · #D9E8D3 · #5F6C4C

Muted Harmony

A subtle, gradient effect for background sections or layered cards, creating a natural, sophisticated depth.

#5F6C4C · #8B9C7A · #B9CAAB

Organic Touch

Light green background with dark text, accented by a muted green for interactive elements or visual cues.

#D9E8D3 · #424C35 · #8B9C7A

CSS variables

:root {
  --mediterranean-olive-grove-2-1: #5F6C4C;
  --mediterranean-olive-grove-2-2: #8B9C7A;
  --mediterranean-olive-grove-2-3: #B9CAAB;
  --mediterranean-olive-grove-2-4: #D9E8D3;
  --mediterranean-olive-grove-2-5: #424C35;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mediterranean-olive-grove-2": {
        1: "#5F6C4C",
        2: "#8B9C7A",
        3: "#B9CAAB",
        4: "#D9E8D3",
        5: "#424C35",
      }
    }
  }
}

Related searches

olive green color palettenatural earth tone greensmediterranean nature colorsrustic green designcalm green web scheme

Palette colors

Hex values

Color 1#5F6C4C
·
Color 2#8B9C7A
·
Color 3#B9CAAB
·
Color 4#D9E8D3
·
Color 5#424C35
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.2:1AA18
4.4:1AA18
1.6:1Fail
2
1.9:1Fail
1.7:1Fail
2.3:1Fail
3.1:1AA18
3
3.2:1AA18
1.7:1Fail
1.4:1Fail
5.2:1AA
4
4.4:1AA18
2.3:1Fail
1.4:1Fail
7.1:1AAA
5
1.6:1Fail
3.1:1AA18
5.2:1AA
7.1:1AAA

Similar palettes

More like Mediterranean Olive Grove

View all earth
Aegean Cliffside Home
Forest Nymph Song
Forest Path Tones
Gilded Olive Grove
Grassy Knoll
Mediterranean Olive Grove