Palette

Dragonfly Wing Iridescence

Captures the delicate, shimmering blues and greens found in a dragonfly's translucent, iridescent wings.

coolelegant5 colors

More cool 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

#1A3E3E#2B6E6E#4FBDBD#70EBEB#B4FBFB

Palette guide

How to use Dragonfly Wing Iridescence

Overview

The Dragonfly Wing Iridescence palette (version 2) captures the delicate, shimmering blues and greens found in a dragonfly's translucent wings. Ranging from the deep teal of #1A3E3E to the ethereal #B4FBFB, this palette offers a cool, elegant, and refreshing feel. The mid-tones like #2B6E6E and the vibrant #4FBDBD provide excellent depth and contrast, while #70EBEB adds a bright, airy quality. Designers and developers can leverage this palette to create sophisticated digital experiences that evoke tranquility, natural beauty, and a touch of magic, ideal for clean, modern interfaces across various platforms.

Best used for

Nature-themed websites or apps
Spa or wellness brand aesthetics
Modern tech interfaces
E-commerce for delicate jewelry
Environmental awareness campaigns
Clean, minimalist UI designs

Suggested color roles

primary

Establish a deep, calming foundation with #1A3E3E (Dark Teal) for main backgrounds, footers, or robust UI elements.

secondary

Utilize #2B6E6E (Deep Sea Green) for secondary content blocks, navigation, or as a complementary background, adding depth.

accent

Highlight interactive elements, call-to-action buttons, or key information with #4FBDBD (Medium Turquoise), offering a bright, elegant pop.

background

Apply #70EBEB (Light Cyan) for lighter content areas, subtle gradients, or as a primary background, creating an airy feel.

text

Pair dark text (e.g., black or #1A3E3E) against #B4FBFB for body copy, and white or a very light gray for headings on #1A3E3E.

Accessibility notes

Ensure sufficient contrast for #4FBDBD text on #70EBEB or #B4FBFB, as these pairs can be problematic.
White or very light text provides excellent readability on #1A3E3E and #2B6E6E.
Avoid using #70EBEB text on #4FBDBD for critical information due to potential readability issues.
For body text, use a dark color (e.g., black or #1A3E3E) against #B4FBFB.

Recommended combinations

Deep Waters

Ideal for robust headers, background sections, or elements requiring depth and a touch of mystery.

#1A3E3E · #2B6E6E · #4FBDBD

Ethereal Shimmer

Excellent for light backgrounds, subtle UI accents, or elements conveying delicacy and transparency.

#70EBEB · #B4FBFB · #4FBDBD

Modern Tranquility

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

#2B6E6E · #70EBEB · #1A3E3E

CSS variables

:root {
  --dragonfly-wing-iridescence-2-1: #1A3E3E;
  --dragonfly-wing-iridescence-2-2: #2B6E6E;
  --dragonfly-wing-iridescence-2-3: #4FBDBD;
  --dragonfly-wing-iridescence-2-4: #70EBEB;
  --dragonfly-wing-iridescence-2-5: #B4FBFB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dragonfly-wing-iridescence-2": {
        1: "#1A3E3E",
        2: "#2B6E6E",
        3: "#4FBDBD",
        4: "#70EBEB",
        5: "#B4FBFB",
      }
    }
  }
}

Hex values

Color 1#1A3E3E

Color 2#2B6E6E

Color 3#4FBDBD

Color 4#70EBEB

Color 5#B4FBFB

Accessibility

Contrast checker

2:1Fail

5.2:1AA

8.2:1AAA

10.1:1AAA

2:1Fail

2.6:1Fail

4.2:1AA18

5.1:1AA

5.2:1AA

2.6:1Fail

1.6:1Fail

1.9:1Fail

8.2:1AAA

4.2:1AA18

1.6:1Fail

1.2:1Fail

10.1:1AAA

5.1:1AA

1.9:1Fail

1.2:1Fail

Similar palettes

More like Dragonfly Wing Iridescence

View all cool

Amethyst Geode Sparkle

Antique Teal Patina

Art Deco Elegance

Imperial Jade Splendor

Mythic Dragon Scale

Orchid Garden Whisper