Back to palettes

Palette

Monsoon Bloom

Captures the lush, rejuvenated greens and vibrant life emerging after a tropical monsoon rain.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F6B4A#8B9E7A#BDC49D#E0E3B6#F2F3D1

Palette guide

How to use Monsoon Bloom

Overview

The "Monsoon Bloom" palette, from the Earth category, beautifully captures the lush, rejuvenated greens and subtle vibrancy of nature after a refreshing rain. It ranges from the deep, grounded #4F6B4A and #8B9E7A to softer, almost sun-kissed shades like #BDC49D and #E0E3B6, culminating in the delicate, near-white #F2F3D1. This palette is perfect for designs aiming to convey freshness, growth, and organic beauty. Designers can leverage it for wellness brands, eco-conscious products, or natural-themed websites. Developers will find these hex codes excellent for creating inviting UI elements, soft backgrounds, and harmonious visual experiences that evoke tranquility and natural elegance.

Best used for

  • Organic food and beverage branding
  • Health, wellness, and spa websites
  • Eco-tourism and nature conservation initiatives
  • Gardening and botanical art designs
  • Children's educational apps with a natural theme
  • Sustainable fashion e-commerce

Suggested color roles

primary

#4F6B4A - A rich, deep green, ideal for primary branding, headers, or strong calls to action, symbolizing growth and stability.

secondary

#8B9E7A - A muted, earthy green, excellent for secondary content blocks, navigation, or supportive graphic elements.

accent

#BDC49D - A soft, light green-yellow, perfect for subtle highlights, interactive states, or delicate decorative elements.

background

#F2F3D1 - A very light, almost off-white green, providing an airy and natural canvas that allows darker tones to breathe.

text

#4F6B4A - A deep, legible green for primary body text against light backgrounds like #F2F3D1, ensuring natural readability. Alternatively, use a very dark brown or charcoal.

Accessibility notes

  • Ensure sufficient contrast for text, especially when using #8B9E7A on #BDC49D.
  • For #F2F3D1 backgrounds, #4F6B4A provides excellent contrast; use a dark text color.
  • Avoid pairing #E0E3B6 with #F2F3D1 for small text due to low contrast.
  • Use clear visual cues beyond color for interactive elements, especially with subtle color shifts.

Recommended combinations

Fresh Growth

Strong, natural primary with a clean background and a supportive secondary green.

#4F6B4A · #F2F3D1 · #8B9E7A

Soft Harmony

Creating gentle gradients or layered backgrounds for a serene, natural feel.

#8B9E7A · #BDC49D · #E0E3B6

Botanical Highlight

Deep primary with a soft accent for interactive elements on a light, airy canvas.

#4F6B4A · #BDC49D · #F2F3D1

CSS variables

:root {
  --monsoon-bloom-2-1: #4F6B4A;
  --monsoon-bloom-2-2: #8B9E7A;
  --monsoon-bloom-2-3: #BDC49D;
  --monsoon-bloom-2-4: #E0E3B6;
  --monsoon-bloom-2-5: #F2F3D1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "monsoon-bloom-2": {
        1: "#4F6B4A",
        2: "#8B9E7A",
        3: "#BDC49D",
        4: "#E0E3B6",
        5: "#F2F3D1",
      }
    }
  }
}

Related searches

natural green paletteearthy color schemefresh spring colorsorganic brand colorslush nature palette

Palette colors

Hex values

Color 1#4F6B4A
·
Color 2#8B9E7A
·
Color 3#BDC49D
·
Color 4#E0E3B6
·
Color 5#F2F3D1
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.1:1Fail
3.3:1AA18
4.5:1AA18
5.2:1AA
2
2.1:1Fail
1.6:1Fail
2.2:1Fail
2.5:1Fail
3
3.3:1AA18
1.6:1Fail
1.4:1Fail
1.6:1Fail
4
4.5:1AA18
2.2:1Fail
1.4:1Fail
1.2:1Fail
5
5.2:1AA
2.5:1Fail
1.6:1Fail
1.2:1Fail

Similar palettes

More like Monsoon Bloom

View all earth