Back to palettes

Palette

Urban Rooftop Garden

A refreshing blend of greens reflecting pockets of nature thriving amidst a city landscape.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#3A5743#6B8F6C#9DBB8A#D9EBDC#5C7A65

Palette guide

How to use Urban Rooftop Garden

Overview

The Urban Rooftop Garden palette offers a refreshing blend of greens, reflecting pockets of nature thriving amidst a bustling city landscape. With the deep, grounding #3A5743 and #5C7A65, it evokes lush foliage and fertile soil. The palette brightens with the soft, inviting #6B8F6C and #9DBB8A, culminating in the airy lightness of #D9EBDC, like clear skies above. This collection provides designers and developers with a harmonious and organic toolkit, ideal for crafting experiences that celebrate sustainability, natural growth, and the serene beauty of urban greenery. It's a perfect choice for projects aiming for a fresh, modern, and earthy aesthetic.

Best used for

  • Organic product branding and packaging
  • Sustainable living websites and blogs
  • Urban planning and green initiatives
  • Health and wellness applications
  • Natural food and beverage marketing
  • Eco-tourism websites

Suggested color roles

primary

Utilize #3A5743 (Deep Sage Green) for primary headings, brand logos, and foundational elements to establish a strong, earthy presence.

secondary

Employ #5C7A65 (Muted Green) for main body text, subheadings, or distinct content sections to maintain an organic feel.

accent

Apply #6B8F6C (Soft Forest Green) to interactive elements like buttons, links, or progress indicators for a fresh, inviting highlight.

background

Designate #D9EBDC (Very Light Green) as the main background color, providing a clean, airy, and expansive natural canvas.

text

For body text, #3A5743 (Deep Sage Green) offers excellent readability on light backgrounds, or use a dark brown/charcoal for optimal contrast.

Accessibility notes

  • Ensure #3A5743 text on #D9EBDC meets WCAG AA contrast standards for optimal readability.
  • Be cautious when using #9DBB8A or #6B8F6C for small text on very light backgrounds, as contrast may be low.
  • Provide clear visual indicators (e.g., bolding, underlines) for interactive elements that use mid-tone greens.
  • Test color pairings thoroughly to maintain legibility and prevent visual fatigue in extended reading.

Recommended combinations

Natural Growth

Ideal for main content blocks: dark green text on a very light green background with a soft green for supporting details.

#3A5743 · #D9EBDC · #6B8F6C

Urban Fresh

Perfect for card backgrounds, subtle UI elements, or interactive components, offering gentle tonal variation.

#5C7A65 · #9DBB8A · #D9EBDC

Earthy Layers

Use for headers or footers, combining a soft green background with deep green text and a light accent.

#6B8F6C · #3A5743 · #D9EBDC

CSS variables

:root {
  --urban-rooftop-garden-1: #3A5743;
  --urban-rooftop-garden-2: #6B8F6C;
  --urban-rooftop-garden-3: #9DBB8A;
  --urban-rooftop-garden-4: #D9EBDC;
  --urban-rooftop-garden-5: #5C7A65;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-rooftop-garden": {
        1: "#3A5743",
        2: "#6B8F6C",
        3: "#9DBB8A",
        4: "#D9EBDC",
        5: "#5C7A65",
      }
    }
  }
}

Related searches

urban green palettenatural city colorsrooftop garden designearthy UI schemesustainable brand greens

Palette colors

Hex values

Color 1#3A5743
·
Color 2#6B8F6C
·
Color 3#9DBB8A
·
Color 4#D9EBDC
·
Color 5#5C7A65
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.2:1Fail
3.8:1AA18
6.4:1AA
1.7:1Fail
2
2.2:1Fail
1.7:1Fail
2.9:1Fail
1.3:1Fail
3
3.8:1AA18
1.7:1Fail
1.7:1Fail
2.2:1Fail
4
6.4:1AA
2.9:1Fail
1.7:1Fail
3.8:1AA18
5
1.7:1Fail
1.3:1Fail
2.2:1Fail
3.8:1AA18

Similar palettes

More like Urban Rooftop Garden

View all earth
Botanical Groundcover Greens
Forest Canopy
Forest Moss Path
Urban Jungle Oasis
Agave Bloom Dawn
Ancient Forest Hush