Back to palettes

Palette

Urban Jungle Bloom

Lively greens and pops of warm orange and red, like unexpected bursts of nature flourishing in a concrete jungle.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#2B6B58#5A9B80#D3EDD5#F5A962#EF5B5B

Palette guide

How to use Urban Jungle Bloom

Overview

The Urban Jungle Bloom palette is a vibrant and energetic collection, perfect for designs that aim to bring the lively spirit of nature into urban contexts. It features deep, grounding greens like #2B6B58 and #5A9B80, which evoke lush foliage. These are beautifully contrasted by the soft, airy #D3EDD5, providing a fresh backdrop. The palette truly blooms with its energetic accents: a warm, inviting orange #F5A962 and a bold, playful red #EF5B5B. This combination offers designers and developers a dynamic range to create engaging, memorable, and visually impactful projects that pop with natural vitality.

Best used for

  • Lively children's product branding
  • Eco-friendly lifestyle websites
  • Creative event posters and flyers
  • Mobile app interfaces with a playful feel
  • Activewear or outdoor gear advertising
  • Digital illustrations and game design

Suggested color roles

primary

Use #2B6B58 as a deep, grounding primary color for headers, main navigation, or large background blocks.

secondary

Apply #5A9B80 for supporting elements, subheadings, or as a softer contrast to the primary green.

accent

Deploy #EF5B5B or #F5A962 for calls-to-action, important notifications, or vibrant graphic elements to draw attention.

background

Utilize #D3EDD5 as a light, airy background color that allows the deeper greens and warm accents to truly stand out.

text

For optimal readability on light backgrounds, use a dark color like #2B6B58 or a standard charcoal. On dark backgrounds, use #D3EDD5.

Accessibility notes

  • Ensure sufficient contrast when pairing #D3EDD5 text with lighter palette colors; use a dark green like #2B6B58 for legibility.
  • The vibrant accents #F5A962 and #EF5B5B will require strong contrast backgrounds (e.g., #2B6B58 or #D3EDD5) for accessibility.
  • Avoid using #5A9B80 as primary text on #D3EDD5 without checking WCAG contrast ratios (aim for at least AA).
  • Consider using a bold font for smaller text elements if lighter colors are used for legibility.

Recommended combinations

Nature's Base

Creates a harmonious and natural foundation, great for main content areas and subtle branding.

#2B6B58 · #5A9B80 · #D3EDD5

Vibrant Pop

Ideal for a light background with energetic, eye-catching accents for buttons or highlights.

#D3EDD5 · #F5A962 · #EF5B5B

Deep Energy

Combines a strong primary green with a warm accent and a light secondary for balanced impact.

#2B6B58 · #F5A962 · #D3EDD5

CSS variables

:root {
  --urban-jungle-bloom-1: #2B6B58;
  --urban-jungle-bloom-2: #5A9B80;
  --urban-jungle-bloom-3: #D3EDD5;
  --urban-jungle-bloom-4: #F5A962;
  --urban-jungle-bloom-5: #EF5B5B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "urban-jungle-bloom": {
        1: "#2B6B58",
        2: "#5A9B80",
        3: "#D3EDD5",
        4: "#F5A962",
        5: "#EF5B5B",
      }
    }
  }
}

Related searches

vibrant green orange paletteenergetic nature color schemeurban garden UI colorsplayful branding palettecity bloom design colors

Palette colors

Hex values

Color 1#2B6B58
·
Color 2#5A9B80
·
Color 3#D3EDD5
·
Color 4#F5A962
·
Color 5#EF5B5B
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
5:1AA
3.2:1AA18
1.9:1Fail
2
1.9:1Fail
2.6:1Fail
1.7:1Fail
1:1Fail
3
5:1AA
2.6:1Fail
1.6:1Fail
2.7:1Fail
4
3.2:1AA18
1.7:1Fail
1.6:1Fail
1.7:1Fail
5
1.9:1Fail
1:1Fail
2.7:1Fail
1.7:1Fail

Similar palettes

More like Urban Jungle Bloom

View all vibrant
Emerald City Lights
Circus Tent Fun
City Lights Energy
Cyber Glow Graffiti
Dragonfly Wing Iridescence
Electric Future Drive