Back to palettes

Palette

Fairy Ring

A soft, whimsical blend of pastels, inspired by mythical fairy circles in a magical forest.

pastelplayful5 colors
More pastel palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#90EE90#DDA0DD#FFB6C1#ADD8E6#F5DEB3

Palette guide

How to use Fairy Ring

Overview

The Fairy Ring palette offers a soft, whimsical blend of pastels, perfect for designs evoking magic and fantasy. Comprising delicate hues like the light green #90EE90, enchanting purple #DDA0DD, and a sweet pink #FFB6C1, this scheme is inspired by mythical fairy circles. Designers and developers can leverage its gentle nature to create inviting and dreamy user experiences, ensuring a playful and imaginative mood. The light blue #ADD8E6 and pale yellow #F5DEB3 complete this harmonious collection, providing versatility for various applications seeking a touch of enchantment.

Best used for

  • Children's book illustrations
  • Whimsical branding for boutiques
  • Fantasy-themed event decor
  • Soft UI/UX designs for creative apps
  • Magical greeting cards and stationery
  • Nursery or playroom design concepts

Suggested color roles

primary

Use #DDA0DD (Plum) as the main color for magical elements, headers, or backgrounds that need a deep, yet soft, presence.

secondary

Employ #90EE90 (Light Green) for natural accents, subtle UI elements, or to balance the warmer tones.

accent

Apply #FFB6C1 (Light Pink) for playful highlights, call-to-action buttons, or decorative details that require a sweet pop.

background

Utilize #F5DEB3 (Moccasin) for a warm, inviting canvas, ensuring content stands out with gentle contrast.

text

For optimal readability, use a dark charcoal or deep purple text color on lighter backgrounds. Consider white or a very light gray for text on #DDA0DD or #ADD8E6.

Accessibility notes

  • Ensure sufficient contrast when using lighter palette colors like #F5DEB3 for backgrounds with lighter text colors.
  • Test text legibility on #FFB6C1 and #ADD8E6; aim for dark text for body copy.
  • Consider larger font sizes for headings or important information when using lower contrast color pairings.
  • Provide alternative text for graphical elements where color conveys meaning, especially with similar pastel shades.

Recommended combinations

Whimsical Trio

Ideal for prominent headers, playful graphics, or feature blocks that need to convey a dreamy atmosphere.

#DDA0DD · #FFB6C1 · #ADD8E6

Nature's Whisper

Perfect for subtle background patterns, illustrative elements, or soft gradients that evoke a natural, magical setting.

#90EE90 · #F5DEB3 · #ADD8E6

Dreamy Contrast

Effective for creating visual hierarchy in UI components or adding depth to illustrations without losing the palette's softness.

#DDA0DD · #ADD8E6 · #FFB6C1

CSS variables

:root {
  --fairy-ring-1: #90EE90;
  --fairy-ring-2: #DDA0DD;
  --fairy-ring-3: #FFB6C1;
  --fairy-ring-4: #ADD8E6;
  --fairy-ring-5: #F5DEB3;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fairy-ring": {
        1: "#90EE90",
        2: "#DDA0DD",
        3: "#FFB6C1",
        4: "#ADD8E6",
        5: "#F5DEB3",
      }
    }
  }
}

Related searches

pastel fantasy colorsmagical forest palettesoft whimsical hueslight fairy tale colorsenchanted garden palette

Palette colors

Hex values

Color 1#90EE90
·
Color 2#DDA0DD
·
Color 3#FFB6C1
·
Color 4#ADD8E6
·
Color 5#F5DEB3
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1.2:1Fail
1.1:1Fail
1.1:1Fail
2
1.5:1Fail
1.3:1Fail
1.4:1Fail
1.6:1Fail
3
1.2:1Fail
1.3:1Fail
1.1:1Fail
1.3:1Fail
4
1.1:1Fail
1.4:1Fail
1.1:1Fail
1.2:1Fail
5
1.1:1Fail
1.6:1Fail
1.3:1Fail
1.2:1Fail

Similar palettes

More like Fairy Ring

View all pastel