Palette

Rainfall Petal Burst

The rich, saturated colors of flora after a cleansing monsoon rain, vibrant and alive.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Rainfall Petal Burst 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 Rainfall Petal Burst.

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

Data visualization

#4682B4#6A5ACD#8A2BE2#B0C4DE#DA70D6

Palette guide

How to use Rainfall Petal Burst

Overview

The Rainfall Petal Burst palette captures the vivid, saturated hues of flowers after a monsoon rain, offering an energetic yet sophisticated blend of blues and purples. This captivating collection features the solid steel blue of #4682B4, the elegant slate blue of #6A5ACD, and the striking blue violet of #8A2BE2. These are beautifully complemented by the soft light steel blue of #B0C4DE, providing a gentle base, and the vibrant orchid pink of #DA70D6, which introduces a lively, floral pop. Designers and developers can leverage this palette for projects that seek to combine natural tranquility with a burst of creative, expressive energy, perfect for artistic or feminine branding.

Best used for

Creative and artistic portfolios
Fashion or beauty brand marketing
Event promotions for arts or music festivals
Floral design or gardening related content
Whimsical e-commerce sites
Personal blogs or lifestyle platforms

Suggested color roles

primary

#4682B4 (Steel Blue) - A stable, deep blue for main headings, foundational elements, or large background areas.

secondary

#6A5ACD (Slate Blue) - Excellent for sub-headings, secondary calls-to-action, or to add a touch of regal depth.

accent

#DA70D6 (Orchid) - Use sparingly for vibrant highlights, interactive elements, or focal points that require an energetic, floral pop.

background

#B0C4DE (Light Steel Blue) - A soft, muted blue-grey background that provides a calm canvas, allowing the brighter colors to emerge.

text

#8A2BE2 (Blue Violet) - A rich, dark purple that offers good readability against #B0C4DE. Alternatively, black or dark charcoal for general body text.

Accessibility notes

Ensure sufficient contrast for text, especially when using #DA70D6 on #B0C4DE or other light backgrounds.
#B0C4DE (Light Steel Blue) should not be used for text on other light colors within the palette.
Text on #4682B4, #6A5ACD, or #8A2BE2 should be white or a very light color for optimal readability.
Be mindful of color blind users when using similar shades of blue and purple together for critical information.

Recommended combinations

Monsoon Bloom

A striking combination for vibrant headers or graphic elements, balancing strong blue with energetic purples.

#4682B4 · #8A2BE2 · #DA70D6

Petal Soft

A gentle background (#B0C4DE) with a sophisticated primary (#6A5ACD) and a playful accent (#DA70D6).

#B0C4DE · #6A5ACD · #DA70D6

Violet Depth

Creates a rich, layered effect, using deeper blues and purples for a luxurious feel.

#6A5ACD · #8A2BE2 · #4682B4

CSS variables

:root {
  --rainfall-petal-burst-1: #4682B4;
  --rainfall-petal-burst-2: #6A5ACD;
  --rainfall-petal-burst-3: #8A2BE2;
  --rainfall-petal-burst-4: #B0C4DE;
  --rainfall-petal-burst-5: #DA70D6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "rainfall-petal-burst": {
        1: "#4682B4",
        2: "#6A5ACD",
        3: "#8A2BE2",
        4: "#B0C4DE",
        5: "#DA70D6",
      }
    }
  }
}

Hex values

Color 1#4682B4

Color 2#6A5ACD

Color 3#8A2BE2

Color 4#B0C4DE

Color 5#DA70D6

Accessibility

Contrast checker

1.3:1Fail

1.5:1Fail

2.3:1Fail

1.4:1Fail

1.3:1Fail

1.1:1Fail

3:1Fail

1.8:1Fail

1.5:1Fail

1.1:1Fail

3.3:1AA18

2.1:1Fail

2.3:1Fail

3:1Fail

3.3:1AA18

1.6:1Fail

1.4:1Fail

1.8:1Fail

2.1:1Fail

1.6:1Fail

Similar palettes

More like Rainfall Petal Burst

Cybernetic Voltage Surge

Electric Circuit Pulse