Back to palettes

Palette

Green Urban Oasis

Brings a touch of calming green into the concrete jungle, like a hidden garden refuge.

earthcalm5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3D5A40#6E8F75#A2C0A5#D1E0D1#EFF6EF

Palette guide

How to use Green Urban Oasis

Overview

The Green Urban Oasis palette masterfully blends the calming essence of nature with a sophisticated urban edge, creating a serene refuge within any design. This collection transitions from the deep, grounding #3D5A40 (Forest Green) to the ethereal #EFF6EF (Near White Green Tint), with elegant mid-tones like #6E8F75 and #A2C0A5. It's perfect for designers and developers aiming to infuse freshness, minimalism, and a touch of organic tranquility into modern projects. Ideal for branding, web interfaces, or architectural visualizations, this palette offers a refreshing contrast to stark urban environments, promoting a sense of calm and natural balance.

Best used for

  • Eco-conscious urban development
  • Minimalist interior design
  • Sustainable lifestyle brands
  • Modern nature photography
  • Green tech interfaces
  • Wellness centers and spas

Suggested color roles

primary

Use #3D5A40 as a deep, sophisticated primary for main branding, headers, or strong graphical elements.

secondary

Apply #6E8F75 for subheadings, secondary buttons, or larger content blocks, offering a muted, supportive green.

accent

Employ #A2C0A5 as a subtle accent for interactive elements, visual breaks, or delicate highlights.

background

Utilize #EFF6EF for light, clean main content backgrounds, or #D1E0D1 for a slightly warmer, muted canvas.

text

For clear readability, use a dark text color like #3D5A40 against lighter backgrounds, or white on darker shades.

Accessibility notes

  • Ensure strong contrast for text, particularly #3D5A40 on #EFF6EF backgrounds, to meet WCAG AA.
  • Avoid using #EFF6EF or #D1E0D1 for small text without a very dark background due to low contrast.
  • When using #A2C0A5 for text, pair it with a significantly darker background like #3D5A40.
  • Regularly test contrast ratios for all interactive elements and crucial information.

Recommended combinations

Concrete Garden

Creates a modern, fresh aesthetic with strong readability, ideal for headers and main content.

#3D5A40 · #EFF6EF · #6E8F75

Verdant Calm

Perfect for subtle gradients or background sections that require a gentle, calming transition.

#6E8F75 · #A2C0A5 · #D1E0D1

Oasis Refresh

Use a light base with mid-tone accents and a deep primary for a clean, sophisticated, and natural feel.

#EFF6EF · #A2C0A5 · #3D5A40

CSS variables

:root {
  --green-urban-oasis-1: #3D5A40;
  --green-urban-oasis-2: #6E8F75;
  --green-urban-oasis-3: #A2C0A5;
  --green-urban-oasis-4: #D1E0D1;
  --green-urban-oasis-5: #EFF6EF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "green-urban-oasis": {
        1: "#3D5A40",
        2: "#6E8F75",
        3: "#A2C0A5",
        4: "#D1E0D1",
        5: "#EFF6EF",
      }
    }
  }
}

Related searches

urban green paletteminimalist nature colorsmodern earth tonesfresh green brandingcalm urban UI

Palette colors

Hex values

Color 1#3D5A40
·
Color 2#6E8F75
·
Color 3#A2C0A5
·
Color 4#D1E0D1
·
Color 5#EFF6EF
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
3.9:1AA18
5.6:1AA
7:1AA
2
2.1:1Fail
1.8:1Fail
2.6:1Fail
3.3:1AA18
3
3.9:1AA18
1.8:1Fail
1.4:1Fail
1.8:1Fail
4
5.6:1AA
2.6:1Fail
1.4:1Fail
1.2:1Fail
5
7:1AA
3.3:1AA18
1.8:1Fail
1.2:1Fail

Similar palettes

More like Green Urban Oasis

View all earth
Bamboo Grove Calm
Mystic Herb Garden
Ancient Grove Calm
Ancient Moss Rune
Bamboo Grove
Canopy Whisper Deep