Back to palettes

Palette

Dragonfly Wing Iridescence

Shimmering blues and greens, capturing the delicate and iridescent beauty of a dragonfly's wings.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Dragonfly Wing Iridescence 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 Dragonfly Wing Iridescence.

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

Data visualization

#40E0D0#66CDAA#7FFFD4#00BFFF#8A2BE2

Palette guide

How to use Dragonfly Wing Iridescence

Overview

The Dragonfly Wing Iridescence palette (version 3) bursts with shimmering blues and greens, capturing the delicate and vibrant beauty of a dragonfly's wings. From the lively #40E0D0 (Turquoise) to the striking #8A2BE2 (Blue Violet), this palette offers an energetic and captivating visual experience. The lighter #7FFFD4 (Aqua) and #66CDAA (Medium Aquamarine) provide a fresh, airy feel, while #00BFFF (Deep Sky Blue) adds a bold, clear blue. This collection is perfect for designers and developers aiming to create dynamic, magical, and visually rich interfaces that stand out with their iridescent charm and lively color transitions.

Best used for

  • Vibrant digital art or illustration
  • Interactive educational apps for children
  • Fantasy-themed game interfaces
  • Creative portfolio websites
  • Event branding for festivals or concerts
  • Dynamic web applications

Suggested color roles

primary

Establish a fresh, energetic foundation with #40E0D0 (Turquoise) for main sections, headers, or prominent UI elements.

secondary

Utilize #00BFFF (Deep Sky Blue) for secondary content blocks, navigation bars, or as a strong complementary accent.

accent

Draw immediate attention to call-to-action buttons, interactive elements, or key information with #8A2BE2 (Blue Violet), offering a unique, powerful pop.

background

Apply #66CDAA (Medium Aquamarine) for lighter content areas, subtle gradients, or as a primary background, creating an inviting canvas.

text

Pair dark text (e.g., black or #8A2BE2) against #7FFFD4 for body copy, and white or a very light gray for headings on #40E0D0 or #00BFFF.

Accessibility notes

  • Ensure high contrast for #7FFFD4 text on #66CDAA or #40E0D0, as these can be low contrast.
  • White or very light text provides excellent readability on #00BFFF and #8A2BE2.
  • Avoid using #66CDAA text on #40E0D0 for critical information due to potential readability issues.
  • For body text, use a dark color (e.g., black or #8A2BE2) against #7FFFD4.

Recommended combinations

Vibrant Flight

Ideal for bold headers, hero sections, or impactful graphics that demand attention and a vibrant feel.

#40E0D0 · #00BFFF · #8A2BE2

Ethereal Greens

Excellent for light backgrounds, subtle UI accents, or elements conveying freshness and delicate beauty.

#66CDAA · #7FFFD4 · #40E0D0

Deep Iridescence

Use for content cards, informational panels, or interactive components that need a balanced, captivating presence.

#00BFFF · #8A2BE2 · #66CDAA

CSS variables

:root {
  --dragonfly-wing-iridescence-3-1: #40E0D0;
  --dragonfly-wing-iridescence-3-2: #66CDAA;
  --dragonfly-wing-iridescence-3-3: #7FFFD4;
  --dragonfly-wing-iridescence-3-4: #00BFFF;
  --dragonfly-wing-iridescence-3-5: #8A2BE2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dragonfly-wing-iridescence-3": {
        1: "#40E0D0",
        2: "#66CDAA",
        3: "#7FFFD4",
        4: "#00BFFF",
        5: "#8A2BE2",
      }
    }
  }
}

Related searches

vibrant blue green palettedragonfly iridescent colorsmagical UI color schemeturquoise violet designenergetic nature colors

Palette colors

Hex values

Color 1#40E0D0
·
Color 2#66CDAA
·
Color 3#7FFFD4
·
Color 4#00BFFF
·
Color 5#8A2BE2
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.3:1Fail
1.3:1Fail
3.6:1AA18
2
1.2:1Fail
1.6:1Fail
1.1:1Fail
3.1:1AA18
3
1.3:1Fail
1.6:1Fail
1.7:1Fail
4.9:1AA
4
1.3:1Fail
1.1:1Fail
1.7:1Fail
2.8:1Fail
5
3.6:1AA18
3.1:1AA18
4.9:1AA
2.8:1Fail

Similar palettes

More like Dragonfly Wing Iridescence

View all vibrant