Back to palettes

Palette

Dragon Scales Gleam

Shimmering greens and blues evoke the mythical beauty of iridescent dragon scales, reflecting light and shadow.

vibrantenergetic5 colors
More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Dragon Scales Gleam 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 Dragon Scales Gleam.

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

Data visualization

#2E8B57#3CB371#40E0D0#6495ED#0000CD

Palette guide

How to use Dragon Scales Gleam

Overview

The Dragon Scales Gleam palette offers a vibrant blend of greens and blues, evoking mythical fantasy with an energetic feel. Featuring strong hues like the deep emerald of #2E8B57 and the refreshing aqua of #40E0D0, it's perfect for designs needing a magical yet modern touch. The inclusion of a vivid royal blue, #0000CD, adds depth and contrast, while softer tones like #3CB371 and the gentle cornflower blue #6495ED provide versatility. This palette is ideal for creating dynamic, engaging user experiences, allowing designers and developers to build interfaces that shimmer with life and imagination, from digital landscapes to interactive elements.

Best used for

  • Fantasy-themed video games or mobile apps
  • Nature-inspired branding or websites
  • Children's educational content design
  • Vibrant event posters or digital invitations
  • Interactive dashboards requiring visual energy
  • Eco-friendly product packaging

Suggested color roles

primary

Use #2E8B57 (Sea Green) as a foundational color for main sections or prominent UI elements, establishing a strong, natural base.

secondary

Apply #6495ED (Cornflower Blue) for secondary content areas, navigation, or as a complementary background, offering a calming contrast.

accent

Highlight interactive elements, call-to-action buttons, or key information with #40E0D0 (Turquoise), providing a bright, eye-catching shimmer.

background

Utilize #3CB371 (Medium Sea Green) for subtle backgrounds or larger content blocks, creating a soft yet vibrant canvas.

text

Employ #0000CD (Medium Blue) for headlines or important text where good contrast is needed, or a dark charcoal/black for body copy against lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast between #0000CD text and lighter backgrounds like #3CB371 or #6495ED.
  • Avoid placing #40E0D0 text directly on #3CB371 or #2E8B57 without checking WCAG contrast ratios.
  • Use a dark text (e.g., black or #0000CD) against #40E0D0 for optimal readability.
  • Consider using a near-white or light gray text on #2E8B57 or #0000CD for better legibility, especially for body text.

Recommended combinations

Mystic Depths

Ideal for header sections, hero images, or dramatic UI elements where depth and vibrancy are key.

#2E8B57 · #0000CD · #40E0D0

Shimmering Forest

Excellent for natural-themed backgrounds, card components, or secondary content blocks, offering a harmonious blend.

#3CB371 · #6495ED · #2E8B57

Energetic Focus

Perfect for calls-to-action, alerts, or elements requiring high visibility and a pop of color.

#40E0D0 · #0000CD · #3CB371

CSS variables

:root {
  --dragon-scales-gleam-2-1: #2E8B57;
  --dragon-scales-gleam-2-2: #3CB371;
  --dragon-scales-gleam-2-3: #40E0D0;
  --dragon-scales-gleam-2-4: #6495ED;
  --dragon-scales-gleam-2-5: #0000CD;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dragon-scales-gleam-2": {
        1: "#2E8B57",
        2: "#3CB371",
        3: "#40E0D0",
        4: "#6495ED",
        5: "#0000CD",
      }
    }
  }
}

Related searches

vibrant green blue palettefantasy color schemeemerald turquoise blue colorsmagical ui colorsnature inspired web design

Palette colors

Hex values

Color 1#2E8B57
·
Color 2#3CB371
·
Color 3#40E0D0
·
Color 4#6495ED
·
Color 5#0000CD
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.6:1Fail
1.4:1Fail
2.6:1Fail
2
1.6:1Fail
1.6:1Fail
1.1:1Fail
4.2:1AA18
3
2.6:1Fail
1.6:1Fail
1.8:1Fail
6.8:1AA
4
1.4:1Fail
1.1:1Fail
1.8:1Fail
3.8:1AA18
5
2.6:1Fail
4.2:1AA18
6.8:1AA
3.8:1AA18

Similar palettes

More like Dragon Scales Gleam

View all vibrant
Aurora Borealis
Aurora Veil Lights
Carnival Kaleidoscope
Cyber Glow
Dragon Scale Shimmer
Dragonfly Wing Iridescence