Palette

Mediterranean Olive Grove

Earthy greens and muted neutrals inspired by sun-drenched olive groves in the Mediterranean.

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

#4A5D3F#6A7B5F#8A9A7E#ACBCA0#E6F0DA

Palette guide

How to use Mediterranean Olive Grove

Overview

The Mediterranean Olive Grove palette, a sibling to its counterpart, offers another exquisite collection of earthy greens and muted neutrals, embodying the serene beauty of sun-drenched olive groves. Ranging from the deep, anchoring #4A5D3F, through balanced mid-greens like #6A7B5F and #8A9A7E, to the softer #ACBCA0 and the airy, near-white #E6F0DA, 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

Eco-conscious brands and sustainable living platforms
Wellness and mindfulness applications
Agricultural and botanical websites
Home and garden decor e-commerce
Packaging for natural and organic products
Educational content on environmental topics

Suggested color roles

primary

A deep, grounding olive green, #4A5D3F is perfect for main headings, brand logos, or prominent call-to-action buttons, conveying natural authority.

secondary

A balanced, mid-range green, #6A7B5F is excellent for subheadings, navigation links, or important data points, providing clear readability.

accent

A softer, muted green, #8A9A7E is ideal for interactive elements like hover states, progress indicators, or subtle graphical highlights.

background

A very light, airy green, #E6F0DA provides a fresh, expansive canvas, enhancing the palette's organic and tranquil feel.

text

Use the darkest green, #4A5D3F, for body text on the light background #E6F0DA to ensure optimal contrast and legibility.

Accessibility notes

Ensure #ACBCA0 is not used for small text on #E6F0DA due to potential low contrast.
#4A5D3F and #6A7B5F provide excellent contrast for text on #E6F0DA.
For interactive elements, use #6A7B5F or #8A9A7E to ensure they are easily distinguishable.
Always check WCAG guidelines for color combinations, especially for text and UI elements.

Recommended combinations

Grove Depth

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

#4A5D3F · #E6F0DA · #6A7B5F

Leafy Gradient

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

#6A7B5F · #8A9A7E · #ACBCA0

Natural Clarity

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

#E6F0DA · #4A5D3F · #8A9A7E

CSS variables

:root {
  --mediterranean-olive-grove-1: #4A5D3F;
  --mediterranean-olive-grove-2: #6A7B5F;
  --mediterranean-olive-grove-3: #8A9A7E;
  --mediterranean-olive-grove-4: #ACBCA0;
  --mediterranean-olive-grove-5: #E6F0DA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mediterranean-olive-grove": {
        1: "#4A5D3F",
        2: "#6A7B5F",
        3: "#8A9A7E",
        4: "#ACBCA0",
        5: "#E6F0DA",
      }
    }
  }
}

Hex values

Color 1#4A5D3F

Color 2#6A7B5F

Color 3#8A9A7E

Color 4#ACBCA0

Color 5#E6F0DA

Accessibility

Contrast checker

1.6:1Fail

2.4:1Fail

3.6:1AA18

6.1:1AA

1.6:1Fail

1.5:1Fail

2.3:1Fail

3.9:1AA18

2.4:1Fail

1.5:1Fail

2.5:1Fail

3.6:1AA18

2.3:1Fail

1.5:1Fail

1.7:1Fail

6.1:1AA

3.9:1AA18

2.5:1Fail

1.7:1Fail

Similar palettes

More like Mediterranean Olive Grove

Mediterranean Olive Grove

See it in context.

Ready when you are.

Built with Mediterranean Olive Grove.

How to use Mediterranean Olive Grove

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Grove Depth

Leafy Gradient

Natural Clarity

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Mediterranean Olive Grove