Palette

Emerald Dragonfly Wings

A radiant spectrum of greens and teals, capturing the iridescent, delicate 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 Emerald Dragonfly Wings 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 Emerald Dragonfly Wings.

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

Data visualization

#003300#006633#009966#33CC99#66FFCC

Palette guide

How to use Emerald Dragonfly Wings

Overview

The Emerald Dragonfly Wings palette (ID: emerald-dragonfly-wings-2) is a radiant spectrum of greens and teals, capturing the iridescent, delicate beauty of a dragonfly's wings. It spans from the deep #003300, through the rich #006633 and #009966, culminating in the vibrant #33CC99 and ethereal #66FFCC. This palette is exceptionally vibrant and fresh, perfect for designs that aim to convey natural beauty, lightness, and a touch of magic. It's an excellent choice for eco-conscious brands, whimsical digital interfaces, or artistic projects seeking a lively, harmonious, and shimmering aesthetic with a strong emphasis on emerald and aqua tones.

Best used for

Nature-inspired branding and packaging
Children's book illustrations and animations
Eco-friendly product websites
Digital art with whimsical or magical themes
Fashion and beauty brands with a natural focus
Interactive web experiences and mobile apps

Suggested color roles

primary

Use #003300 for dominant elements, headers, or backgrounds to establish depth and a strong natural foundation.

secondary

Employ #006633 or #009966 for supporting graphics, subheadings, or interactive elements, adding richness and texture.

accent

Apply #66FFCC for subtle highlights, delicate patterns, or ethereal background accents to introduce lightness and shimmer.

background

Utilize #66FFCC for clean, airy backgrounds that allow the deeper greens to pop, or a crisp white for maximum contrast.

text

For body text, use a dark charcoal like #333333. For headlines on lighter backgrounds, #003300 provides excellent readability. Use white for text on #003300.

Accessibility notes

Ensure #003300 or #006633 text on #66FFCC meets WCAG contrast standards.
Avoid using #66FFCC for small text on light backgrounds; it's best for large headlines or accents.
The lighter greens #33CC99 and #66FFCC may have low contrast when used together; separate them.
Pair #003300 with #66FFCC for a high-contrast, accessible combination for primary content.

Recommended combinations

Deep Woods

Ideal for creating a profound, immersive feel in branding, website hero sections, or illustrations with natural textures.

#003300 · #006633 · #009966

Iridescent Glow

Perfect for gradients, glowing effects, or interactive UI elements that need to convey lightness and vibrancy.

#009966 · #33CC99 · #66FFCC

Vibrant Contrast

Use for impactful call-to-action buttons, key highlights, or sections that require a bold yet naturally inviting visual statement.

#003300 · #66FFCC · #33CC99

CSS variables

:root {
  --emerald-dragonfly-wings-2-1: #003300;
  --emerald-dragonfly-wings-2-2: #006633;
  --emerald-dragonfly-wings-2-3: #009966;
  --emerald-dragonfly-wings-2-4: #33CC99;
  --emerald-dragonfly-wings-2-5: #66FFCC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "emerald-dragonfly-wings-2": {
        1: "#003300",
        2: "#006633",
        3: "#009966",
        4: "#33CC99",
        5: "#66FFCC",
      }
    }
  }
}

Hex values

Color 1#003300

Color 2#006633

Color 3#009966

Color 4#33CC99

Color 5#66FFCC

Accessibility

Contrast checker

2:1Fail

3.9:1AA18

6.9:1AA

11.4:1AAA

2:1Fail

1.9:1Fail

3.5:1AA18

5.7:1AA

3.9:1AA18

1.9:1Fail

1.8:1Fail

2.9:1Fail

6.9:1AA

3.5:1AA18

1.8:1Fail

1.6:1Fail

11.4:1AAA

5.7:1AA

2.9:1Fail

1.6:1Fail

Similar palettes

More like Emerald Dragonfly Wings

View all Vibrant

Aurora Blossom Dreams