Palette

Urban Rooftop Garden

Fresh greens and soft earth tones, bringing the tranquility of nature to a bustling urban rooftop.

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

#4F6B4F#7B9F7B#B0D8B0#E2F5E2#3A503A

Palette guide

How to use Urban Rooftop Garden

Overview

The Urban Rooftop Garden palette brings the tranquility of nature to a bustling urban rooftop with its fresh greens and soft earth tones. Featuring the deep grounding of #3A503A and #4F6B4F, it evokes lush foliage, while #7B9F7B and #B0D8B0 introduce lighter, softer growth. The ethereal #E2F5E2 provides an airy, expansive feel, like an open sky. This palette is an excellent choice for designers and developers aiming to create refreshing, organic, and harmonious experiences. It perfectly balances urban sophistication with natural serenity, making it ideal for projects that celebrate sustainability and green living within cityscapes.

Best used for

Eco-friendly brand identities
Nature-focused web and app designs
Gardening and landscaping websites
Health and wellness product packaging
Sustainable architecture visualizations
Organic food and beverage marketing

Suggested color roles

primary

Utilize #3A503A (Deep Forest Green) for primary headings, brand logos, and foundational elements to establish a strong, natural presence.

secondary

Employ #4F6B4F (Medium Green) for main body text, subheadings, or distinct content sections to maintain an earthy feel.

accent

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

background

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

text

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

Accessibility notes

Ensure #3A503A text on #E2F5E2 meets WCAG AA contrast standards for optimal readability.
Be cautious when using #B0D8B0 or #7B9F7B 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

Lush Canopy

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

#3A503A · #E2F5E2 · #4F6B4F

Fresh Growth

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

#7B9F7B · #B0D8B0 · #E2F5E2

Rooted Harmony

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

#4F6B4F · #3A503A · #E2F5E2

CSS variables

:root {
  --urban-rooftop-garden-2-1: #4F6B4F;
  --urban-rooftop-garden-2-2: #7B9F7B;
  --urban-rooftop-garden-2-3: #B0D8B0;
  --urban-rooftop-garden-2-4: #E2F5E2;
  --urban-rooftop-garden-2-5: #3A503A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-rooftop-garden-2": {
        1: "#4F6B4F",
        2: "#7B9F7B",
        3: "#B0D8B0",
        4: "#E2F5E2",
        5: "#3A503A",
      }
    }
  }
}

Hex values

Color 1#4F6B4F

Color 2#7B9F7B

Color 3#B0D8B0

Color 4#E2F5E2

Color 5#3A503A

Accessibility

Contrast checker

2:1Fail

3.7:1AA18

5.2:1AA

1.5:1Fail

2:1Fail

1.9:1Fail

2.6:1Fail

3:1Fail

3.7:1AA18

1.9:1Fail

1.4:1Fail

5.6:1AA