Back to palettes

Palette

Meadowland Serenity

A peaceful palette reflecting the fresh greens and earthy tones of a sun-dappled, quiet meadow.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Meadowland Serenity 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 Meadowland Serenity.

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

Data visualization

#8FBC8F#9ACD32#6B8E23#BDB76B#F0FFF0

Palette guide

How to use Meadowland Serenity

Overview

The Meadowland Serenity palette evokes the tranquil beauty of a sun-dappled field, offering a harmonious blend of natural greens and earthy undertones. Anchored by the soft elegance of #8FBC8F and the vibrant freshness of #9ACD32, it's perfect for creating designs that feel organic and inviting. The rich depth of #6B8E23 provides grounding, while the subtle warmth of #BDB76B adds a touch of rustic charm. #F0FFF0 acts as a delicate, airy base, enhancing the natural feel. This palette is ideal for projects aiming to convey peace, growth, and environmental consciousness, providing a refreshing alternative to overly bright or stark color schemes. Developers will find these hues easy to integrate for web and UI, offering excellent readability when paired thoughtfully.

Best used for

  • Eco-friendly brand identities and packaging
  • Nature-themed websites and mobile applications
  • Botanical illustrations and garden design resources
  • Health and wellness product branding
  • Sustainable fashion or lifestyle blogs
  • Interior design concepts for serene spaces

Suggested color roles

primary

Use #8FBC8F as the dominant hue for large sections or primary branding elements, conveying a balanced and serene feel.

secondary

Apply #9ACD32 for supporting elements, calls to action, or interactive components to add a fresh, energetic touch without overpowering.

accent

Employ #6B8E23 sparingly for strong emphasis, important icons, or key headlines to provide depth and a natural, grounding contrast.

background

Utilize #F0FFF0 as a soft, airy background color, allowing the greens to truly pop and creating a sense of openness and tranquility.

text

For body text, use #6B8E23 for excellent readability against #F0FFF0, or a dark charcoal for general legibility.

Accessibility notes

  • Ensure sufficient contrast between #6B8E23 text and #F0FFF0 backgrounds for optimal readability (WCAG AA compliant).
  • Avoid pairing #BDB76B directly with #8FBC8F for small text, as their similar luminance might cause legibility issues.
  • Use #9ACD32 as an accent color for interactive elements, but ensure its contrast with surrounding colors is high enough for clear identification.
  • Consider a slightly darker text color than #6B8E23 if used on #8FBC8F backgrounds for enhanced accessibility, especially for larger text blocks.

Recommended combinations

Fresh & Grounded

Ideal for UI elements, fresh branding, or data visualization where clarity and a vibrant, yet earthy, feel are desired.

#F0FFF0 · #9ACD32 · #6B8E23

Muted Earth

Excellent for creating a soft, sophisticated, and natural backdrop in web design, editorial layouts, or product packaging.

#8FBC8F · #BDB76B · #F0FFF0

Deep Meadow

Effective for strong headers, prominent graphics, or calls to action, providing a rich, natural depth with a touch of vibrancy.

#6B8E23 · #8FBC8F · #9ACD32

CSS variables

:root {
  --meadowland-serenity-1: #8FBC8F;
  --meadowland-serenity-2: #9ACD32;
  --meadowland-serenity-3: #6B8E23;
  --meadowland-serenity-4: #BDB76B;
  --meadowland-serenity-5: #F0FFF0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "meadowland-serenity": {
        1: "#8FBC8F",
        2: "#9ACD32",
        3: "#6B8E23",
        4: "#BDB76B",
        5: "#F0FFF0",
      }
    }
  }
}

Related searches

natural green color schemeearthy spring palettecalm meadowland colorseco-friendly brand paletteolive green hex codes

Palette colors

Hex values

Color 1#8FBC8F
·
Color 2#9ACD32
·
Color 3#6B8E23
·
Color 4#BDB76B
·
Color 5#F0FFF0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.8:1Fail
1:1Fail
2.1:1Fail
2
1.1:1Fail
2:1Fail
1.1:1Fail
1.8:1Fail
3
1.8:1Fail
2:1Fail
1.8:1Fail
3.7:1AA18
4
1:1Fail
1.1:1Fail
1.8:1Fail
2:1Fail
5
2.1:1Fail
1.8:1Fail
3.7:1AA18
2:1Fail

Similar palettes

More like Meadowland Serenity

View all earth
Misty Rainforest Glow
Whispering Meadow Breeze
Bamboo Serene Path
Coastal Dune Breeze
Coastal Dune Grass
Deep Forest Emerald