Palette

Urban Jungle Oasis

A refreshing blend of cool teals and muted greens, like a hidden green oasis within a bustling urban setting.

CoolCalm5 colors

More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F6D7A#718CA1#B7D4EA#86AA9A#C3DEDC

Palette guide

How to use Urban Jungle Oasis

Overview

The Urban Jungle Oasis palette (ID: urban-jungle-oasis-2) offers a refreshing escape with its cool, serene blend of teals and muted greens. Anchored by the sophisticated #4F6D7A and the lighter, airy #718CA1, it evokes a sense of calm and clarity. The soft, almost pastel #B7D4EA provides a gentle backdrop, while the subtle green of #86AA9A and the very light #C3DEDC add a touch of natural tranquility. This palette is perfect for creating modern, inviting, and calming digital or physical spaces, providing a harmonious balance ideal for user interfaces, brand identities, and environmental designs.

Best used for

Wellness and meditation app interfaces
Spa and holistic brand identities
Modern interior design concepts
Sustainable product packaging
Tranquil website layouts
Eco-conscious corporate branding

Suggested color roles

primary

Use #4F6D7A as a deep teal-blue, serving as a grounded, sophisticated base for headers or main UI elements.

secondary

Apply #718CA1 as a muted blue-gray, excellent for subheadings, secondary sections, or interactive states.

accent

Deploy #86AA9A as a soft sage green, providing a subtle, natural accent for icons or call-to-action details.

background

Utilize #B7D4EA as a very light, airy blue, creating a clean, open, and calm canvas.

text

For light backgrounds, use a dark charcoal or a deep navy like #4F6D7A for primary text. Lighter grays can be used for secondary information.

Accessibility notes

Ensure #86AA9A text has enough contrast against light backgrounds like #B7D4EA or #C3DEDC for legibility.
The lighter colors, #B7D4EA and #C3DEDC, should not be used for text on white or very light backgrounds.
Prioritize dark text like #4F6D7A or black on lighter backgrounds for optimal readability (WCAG AA minimum).
Always check WCAG contrast ratios for all text pairings, especially with the subtle cool tones in this palette.

Recommended combinations

Calm Waters

A smooth gradient from deep to light, creating a serene, expansive feel for backgrounds or large sections.

#4F6D7A · #718CA1 · #B7D4EA

Green Whisper

Light, airy base with a subtle, fresh green for delicate details and a sense of freshness.

#B7D4EA · #86AA9A · #C3DEDC

Modern Serenity

Balanced cool tones for a sophisticated, slightly moody aesthetic in a modern design.

#718CA1 · #86AA9A · #4F6D7A

CSS variables

:root {
  --urban-jungle-oasis-2-1: #4F6D7A;
  --urban-jungle-oasis-2-2: #718CA1;
  --urban-jungle-oasis-2-3: #B7D4EA;
  --urban-jungle-oasis-2-4: #86AA9A;
  --urban-jungle-oasis-2-5: #C3DEDC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-jungle-oasis-2": {
        1: "#4F6D7A",
        2: "#718CA1",
        3: "#B7D4EA",
        4: "#86AA9A",
        5: "#C3DEDC",
      }
    }
  }
}

Hex values

Color 1#4F6D7A

Color 2#718CA1

Color 3#B7D4EA

Color 4#86AA9A

Color 5#C3DEDC

Accessibility

Contrast checker

1.6:1Fail

3.6:1AA18

2.2:1Fail

3.9:1AA18

1.6:1Fail

2.3:1Fail

1.4:1Fail

2.5:1Fail

3.6:1AA18

2.3:1Fail

1.7:1Fail

1.1:1Fail

2.2:1Fail

1.4:1Fail

1.7:1Fail

1.8:1Fail

3.9:1AA18

2.5:1Fail

1.1:1Fail

1.8:1Fail

Similar palettes

More like Urban Jungle Oasis

View all Cool

Ancient Cypress Shade

Teal Ocean Depths

Aegean Coastline Muse

Aqua Tide Pool

Aurora Veil Dance

Coastal Pebble Wash