Palette

Fairy Garden Sprout

Delicate greens and blues evoke a whimsical miniature world full of magic and new growth.

pastelplayful5 colors

More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Fairy Garden Sprout 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 Garden Sprout.

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

Data visualization

#90EE90#AFEEEE#BDB76B#ADFF2F#D9F3DD

Palette guide

How to use Fairy Garden Sprout

Overview

The Fairy Garden Sprout palette offers a delightful blend of delicate greens and blues, perfect for evoking a whimsical, miniature world filled with magic and new growth. Featuring a soothing Light Green (#90EE90), a serene Pale Turquoise (#AFEEEE), and a grounding Khaki (#BDB76B), this scheme balances freshness with earthy stability. A vibrant Lime Green (#ADFF2F) provides an energetic accent, while the almost-white Mint Cream (#D9F3DD) serves as a soft, airy base. Designers and developers will find this palette ideal for creating gentle, inviting interfaces and branding that feels natural, playful, and optimistic, capturing the essence of a tranquil spring day.

Best used for

Children's product branding and packaging
Eco-friendly and sustainable lifestyle brands
Spa, wellness, and meditation app interfaces
Nature-themed blogs or garden design websites
Whimsical illustrations and digital art
Spring event invitations and decor

Suggested color roles

primary

#90EE90 (Light Green) - Ideal for dominant sections, main content backgrounds, or primary brand color to convey freshness and growth.

secondary

#AFEEEE (Pale Turquoise) - Use for complementary elements, secondary navigation, or as a soothing accent against the primary green.

accent

#ADFF2F (Lime Green) - Perfect for calls-to-action, interactive elements, or small details that require a vibrant, energetic pop.

background

#D9F3DD (Mint Cream) - An airy, near-white base that provides excellent contrast for darker text and allows other colors to shine.

text

#BDB76B (Khaki) - Suitable for headings, subheadings, or decorative text. For body text, consider a darker neutral like charcoal or black for optimal readability.

Accessibility notes

Avoid using #D9F3DD with #AFEEEE or #90EE90 for text, as contrast will be insufficient.
Ensure #BDB76B text on #D9F3DD or #AFEEEE meets WCAG AA contrast standards for readability.
Use the vibrant #ADFF2F primarily for graphical elements or larger text, and test contrast if used for critical information.
Pair #90EE90 or #AFEEEE backgrounds with a dark neutral text color (e.g., black or dark gray) for optimal body text legibility.

Recommended combinations

Fresh UI

Excellent for clean, modern user interfaces where #D9F3DD is the background, #90EE90 for primary elements, and #AFEEEE for secondary actions or borders.

#D9F3DD · #90EE90 · #AFEEEE

Playful Accent

Use #90EE90 as a base, #ADFF2F for eye-catching calls-to-action or highlighted text, and #BDB76B for supportive details or icons.

#90EE90 · #ADFF2F · #BDB76B

Earthy Serenity

Ideal for branding that needs a grounded yet gentle feel, with #BDB76B for headings, #D9F3DD for ample negative space, and #AFEEEE as a soft accent.

#BDB76B · #D9F3DD · #AFEEEE

CSS variables

:root {
  --fairy-garden-sprout-1: #90EE90;
  --fairy-garden-sprout-2: #AFEEEE;
  --fairy-garden-sprout-3: #BDB76B;
  --fairy-garden-sprout-4: #ADFF2F;
  --fairy-garden-sprout-5: #D9F3DD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fairy-garden-sprout": {
        1: "#90EE90",
        2: "#AFEEEE",
        3: "#BDB76B",
        4: "#ADFF2F",
        5: "#D9F3DD",
      }
    }
  }
}

Hex values

Color 1#90EE90

Color 2#AFEEEE

Color 3#BDB76B

Color 4#ADFF2F

Color 5#D9F3DD

Accessibility

Contrast checker

1.1:1Fail

1.5:1Fail

1.2:1Fail

1.1:1Fail

1.6:1Fail

1.1:1Fail

1.5:1Fail

1.6:1Fail

1.7:1Fail

1.8:1Fail

1.2:1Fail

1.1:1Fail

1.7:1Fail

1:1Fail

1.2:1Fail

1.1:1Fail

1.8:1Fail

1:1Fail

Similar palettes

More like Fairy Garden Sprout

Fairy Garden Sprout

See it in context.

Ready when you are.

Built with Fairy Garden Sprout.

How to use Fairy Garden Sprout

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Fresh UI

Playful Accent

Earthy Serenity

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Fairy Garden Sprout