Palette

Urban Garden Oasis

Fresh greens and soft neutrals mimic a hidden garden, offering tranquility amidst the city's concrete and stone.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#385F4C#73A16A#B9D7AA#F0F5DC#C6B99E

Palette guide

How to use Urban Garden Oasis

Overview

The Urban Garden Oasis palette brings fresh greens and soft neutrals, mimicking a hidden garden's tranquility amidst the city's concrete. This serene collection ranges from the deep, grounding #385F4C to the airy, almost-white #F0F5DC, with the soothing #73A16A in between. It's ideal for designers aiming to create calming, natural, and inviting experiences. Developers will find these hex codes easy to integrate into user interfaces that promote relaxation and organic beauty. The balance between earthy greens and soft, warm neutrals like #C6B99E ensures excellent readability and a harmonious visual flow. This palette is perfectly suited for projects that require a refreshing, eco-conscious, and approachable visual identity, from wellness apps to sustainable brand websites.

Best used for

Eco-friendly product branding
Wellness and meditation apps
Garden and landscaping services websites
Sustainable living blogs and content
Interior design for biophilic spaces
Organic food and beverage packaging

Suggested color roles

primary

Utilize #385F4C for strong, foundational elements like headers, navigation, or deep background sections, establishing a natural, grounded feel.

secondary

Apply #73A16A for subheadings, secondary buttons, or larger content blocks, offering a fresh, inviting green that complements the primary.

accent

Introduce #C6B99E sparingly for interactive states, subtle dividers, or graphic elements to add warmth and an earthy touch.

background

Employ #F0F5DC as a clean, light background, providing excellent contrast for darker text and a fresh, airy ambiance.

text

Choose #385F4C for body text on light backgrounds like #F0F5DC to ensure maximum readability and a cohesive, natural look.

Accessibility notes

Ensure sufficient contrast between #385F4C text and #F0F5DC background (WCAG AA compliant).
Avoid using #B9D7AA for small text on #F0F5DC as contrast may be insufficient.
Large text in #73A16A on #F0F5DC offers good readability and a gentle appearance.
For critical information, always pair the darkest color, #385F4C, with the lightest, #F0F5DC.

Recommended combinations

Natural Harmony

A refreshing combination for main branding, using deep green for text, light cream for backgrounds, and a vibrant green for accents.

#385F4C · #F0F5DC · #73A16A

Earthy Calm

Ideal for softer, more organic designs, blending various greens and a warm neutral for content blocks or secondary sections.

#73A16A · #B9D7AA · #C6B99E

Oasis Base

Emphasizes a grounded and fresh feel, with the deepest green as primary, a lighter green for secondary, and the lightest for background.

#385F4C · #73A16A · #F0F5DC

CSS variables

:root {
  --urban-garden-oasis-1: #385F4C;
  --urban-garden-oasis-2: #73A16A;
  --urban-garden-oasis-3: #B9D7AA;
  --urban-garden-oasis-4: #F0F5DC;
  --urban-garden-oasis-5: #C6B99E;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-garden-oasis": {
        1: "#385F4C",
        2: "#73A16A",
        3: "#B9D7AA",
        4: "#F0F5DC",
        5: "#C6B99E",
      }
    }
  }
}

Hex values

Color 1#385F4C

Color 2#73A16A

Color 3#B9D7AA

Color 4#F0F5DC

Color 5#C6B99E

Accessibility

Contrast checker

2.4:1Fail

4.6:1AA

6.5:1AA

3.7:1AA18

2.4:1Fail

1.9:1Fail

2.7:1Fail

1.5:1Fail

4.6:1AA

1.9:1Fail

1.4:1Fail

1.2:1Fail