Palette

Oasis Garden Oasis

A tranquil oasis hidden in the vast desert, brimming with subdued, life-giving greens.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Oasis Garden Oasis 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 Oasis Garden Oasis.

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

Data visualization

#4A4A2A#8A9A5B#B4C69D#D5E1BB#EAEFD1

Palette guide

How to use Oasis Garden Oasis

Overview

The "Oasis Garden Oasis" palette evokes a tranquil desert haven, brimming with subdued, life-giving greens. It features earthy tones like #4A4A2A (Dark Olive Green), #8A9A5B (Muted Sage), and #B4C69D (Pale Olive). This palette is perfect for designs seeking a natural, calming, and understated aesthetic, reminiscent of serene desert landscapes and lush hidden gardens. The lighter #D5E1BB (Light Khaki) and #EAEFD1 (Creamy Green) provide an airy, soft backdrop, making it ideal for eco-friendly branding, wellness applications, or designs emphasizing natural harmony and peace in a gentle manner.

Best used for

Eco-conscious brand identity (sustainable products)
Spa and retreat center websites or brochures
Natural skincare and organic food packaging
Landscape design and gardening services
Educational materials about nature or conservation
Wellness and mindfulness app interfaces

Suggested color roles

primary

#4A4A2A (Dark Olive Green) - Use for strong headings, primary calls-to-action, or foundational elements to convey grounding and authenticity.

secondary

#8A9A5B (Muted Sage) - Ideal for supporting content, subheadings, or large background sections, adding a soft, natural feel.

accent

#B4C69D (Pale Olive) - Employ sparingly for subtle highlights, interactive elements, or delicate graphic details, bringing freshness.

background

#EAEFD1 (Creamy Green) - A very light, almost off-white green that provides a soft, organic canvas, enhancing readability.

text

#4A4A2A (Dark Olive Green) or a deep forest green for body text, ensuring excellent contrast against the lighter greens.

Accessibility notes

#4A4A2A provides strong contrast for text against #D5E1BB and #EAEFD1.
#8A9A5B can be used for larger text on the lightest backgrounds, but check contrast for small sizes.
Avoid using #B4C69D, #D5E1BB, or #EAEFD1 for small text on light backgrounds due to low contrast.
Ensure sufficient contrast for interactive elements, especially against similar muted tones.

Recommended combinations

Desert Harmony

Perfect for layered backgrounds or subtle visual depth, maintaining a soft, natural flow.

#EAEFD1 · #D5E1BB · #8A9A5B

Grounded Serenity

Great for a clean layout, with dark green for structure, light green as background, and pale olive for accents.

#4A4A2A · #EAEFD1 · #B4C69D

Muted Nature

Use for illustrations or sections where a gradient of natural greens adds depth and tranquility.

#8A9A5B · #B4C69D · #4A4A2A

CSS variables

:root {
  --oasis-garden-oasis-1: #4A4A2A;
  --oasis-garden-oasis-2: #8A9A5B;
  --oasis-garden-oasis-3: #B4C69D;
  --oasis-garden-oasis-4: #D5E1BB;
  --oasis-garden-oasis-5: #EAEFD1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oasis-garden-oasis": {
        1: "#4A4A2A",
        2: "#8A9A5B",
        3: "#B4C69D",
        4: "#D5E1BB",
        5: "#EAEFD1",
      }
    }
  }
}

Hex values

Color 1#4A4A2A

Color 2#8A9A5B

Color 3#B4C69D

Color 4#D5E1BB

Color 5#EAEFD1

Accessibility

Contrast checker

3:1Fail

5:1AA

6.6:1AA

7.7:1AAA

3:1Fail

1.7:1Fail

2.2:1Fail

2.6:1Fail

5:1AA

1.7:1Fail

1.3:1Fail

1.5:1Fail

6.6:1AA

2.2:1Fail

1.3:1Fail

1.2:1Fail

7.7:1AAA

2.6:1Fail

1.5:1Fail

1.2:1Fail

Similar palettes

More like Oasis Garden Oasis

View all earth

Cactus Garden Earth

Desert Succulent Glow

Desert Succulent Hues

Sun-Kissed Desert Sage

Whispering Sage Brush

Adobe Sunset