Palette

Fairy Glen Bloom

Delicate and enchanting, this palette captures the soft, magical glow of a hidden forest glen.

pastelplayful5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#9370DB#D8BFD8#FFC0CB#ADD8E6#90EE90

Palette guide

How to use Fairy Glen Bloom

Overview

The Fairy Glen Bloom palette offers a delightful array of soft, enchanting pastels, perfect for designs requiring a gentle and whimsical touch. Featuring the serene lavender #9370DB, the delicate thistle #D8BFD8, the charming pink #FFC0CB, the airy light blue #ADD8E6, and the fresh light green #90EE90, this collection evokes the magic of a hidden spring garden. Designers can leverage these hues to create inviting user interfaces, evocative branding, or subtle visual narratives. Developers will find these hex codes easy to implement for backgrounds, hover states, and iconography, ensuring a consistent and harmonious aesthetic across digital platforms. Its soft nature makes it versatile for a range of lighthearted and sophisticated projects.

Best used for

Children's book illustrations and app design
Wedding invitations and event branding
Beauty product packaging and branding
Feminine fashion or lifestyle blog themes
Spring-themed marketing campaigns
Baby shower decor and nursery designs

Suggested color roles

primary

Use #9370DB for main branding elements, hero sections, or significant call-to-action buttons to maintain a soft yet noticeable presence.

secondary

Employ #ADD8E6 for subheadings, secondary navigation, or as a background for content blocks to add a calming, expansive feel.

accent

Apply #FFC0CB sparingly for interactive elements, highlights, or decorative flourishes to introduce a touch of warmth and playfulness.

background

Utilize #D8BFD8 as a primary background color for clean, airy layouts that allow other elements to gently stand out without harsh contrast.

text

For optimal readability on light backgrounds, use a dark charcoal or near-black text color. For headings, a dark version of #9370DB could be effective.

Accessibility notes

Most colors in this palette are light; ensure sufficient contrast by pairing them with much darker text or UI elements.
Avoid using #FFC0CB directly on #D8BFD8 for text, as their low contrast will fail accessibility standards.
When using #9370DB for active elements, ensure its contrast against surrounding background colors meets WCAG 2.1 AA standards.
Consider providing alternative text colors (e.g., pure white) for elements placed on the darker #9370DB to maintain readability.

Recommended combinations

Whimsical Duo

Ideal for header banners or graphic elements where a soft, inviting focal point is desired, with #D8BFD8 as a gentle backdrop.

#9370DB · #FFC0CB · #D8BFD8

Spring Fresh

Excellent for nature-themed layouts, fresh product displays, or subtle background patterns that evoke serenity.

#ADD8E6 · #90EE90 · #D8BFD8

Delicate Contrast

Use for UI components like cards or modal windows, leveraging #9370DB for primary actions and the others for support and accents.

#9370DB · #ADD8E6 · #FFC0CB

CSS variables

:root {
  --fairy-glen-bloom-1: #9370DB;
  --fairy-glen-bloom-2: #D8BFD8;
  --fairy-glen-bloom-3: #FFC0CB;
  --fairy-glen-bloom-4: #ADD8E6;
  --fairy-glen-bloom-5: #90EE90;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fairy-glen-bloom": {
        1: "#9370DB",
        2: "#D8BFD8",
        3: "#FFC0CB",
        4: "#ADD8E6",
        5: "#90EE90",
      }
    }
  }
}

Hex values

Color 1#9370DB

Color 2#D8BFD8

Color 3#FFC0CB

Color 4#ADD8E6

Color 5#90EE90

Accessibility

Contrast checker

2.2:1Fail

2.4:1Fail

2.5:1Fail

2.7:1Fail

2.2:1Fail

1.1:1Fail

1.2:1Fail

2.4:1Fail

1.1:1Fail

1:1Fail

1.1:1Fail

2.5:1Fail

1.1:1Fail

1:1Fail

1.1:1Fail

2.7:1Fail

1.2:1Fail

1.1:1Fail

Similar palettes

More like Fairy Glen Bloom

Fairy Glen Bloom

See it in context.

Ready when you are.

Built with Fairy Glen Bloom.

How to use Fairy Glen Bloom

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Whimsical Duo

Spring Fresh

Delicate Contrast

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Fairy Glen Bloom