Palette

Mythic Dragon Scale

Reflects the cool, metallic iridescence of dragon scales, shifting between deep greens and silvers.

coolelegant5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Mythic Dragon Scale 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 Mythic Dragon Scale.

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

Data visualization

#3D4F4F#5F7A7A#8FB4B4#C0D8D8#A0C0C0

Palette guide

How to use Mythic Dragon Scale

Overview

The 'Mythic Dragon Scale' palette captures the cool, metallic iridescence of legendary scales, shifting between deep greens and silvers. This elegant collection features a muted dark teal, #3D4F4F, alongside a slightly lighter cool green, #5F7A7A, and a shimmering silver-green, #8FB4B4. The brightest tone, #C0D8D8, offers a delicate highlight, while #A0C0C0 provides a balanced mid-tone. Ideal for designers and developers seeking a sophisticated yet fantastical aesthetic, this palette excels in creating interfaces, branding, or digital art that convey strength, mystery, and a subtle, otherworldly beauty, without being overly dramatic.

Best used for

Sci-fi or fantasy game UI and concept art
Elegant technology branding and web design
Luxury packaging with a mysterious edge
Modern architectural renders and interior design
High-end fashion accessories or jewelry marketing
Data visualization requiring a cool, sophisticated touch

Suggested color roles

primary

Use #3D4F4F as a strong, cool base for backgrounds or primary structural elements, setting a mystical tone.

secondary

Employ #5F7A7A for content panels, secondary navigation, or to build depth in larger areas.

accent

Apply #C0D8D8 for subtle highlights, interactive elements, or delicate details that need a shimmering effect.

background

Excellent for cool, sophisticated dark mode themes using #3D4F4F, or a lighter #5F7A7A for a softer approach.

text

White or a very light gray like #C0D8D8 offers optimal contrast on darker shades. For lighter backgrounds, a deep charcoal is recommended.

Accessibility notes

Ensure sufficient contrast for light text (e.g., white or #C0D8D8) on #3D4F4F and #5F7A7A.
Avoid using #C0D8D8 for small text on #8FB4B4 or #A0C0C0, as contrast may be insufficient.
When using lighter shades as text on a white background, ensure a minimum contrast ratio of 4.5:1.
Consider bolding text or increasing font size for better readability on mid-tone backgrounds.

Recommended combinations

Deep Scale

A dark, cool base with gradual lightening for a layered, metallic look, ideal for backgrounds.

#3D4F4F · #5F7A7A · #C0D8D8

Shimmering Edge

Utilize lighter tones for content areas, framed by the darkest shade for contrast and definition.

#8FB4B4 · #A0C0C0 · #3D4F4F

Iridescent Glint

Combine mid-to-light tones for a subtle, shimmering gradient effect in UI elements or illustrations.

#5F7A7A · #C0D8D8 · #A0C0C0

CSS variables

:root {
  --mythic-dragon-scale-1: #3D4F4F;
  --mythic-dragon-scale-2: #5F7A7A;
  --mythic-dragon-scale-3: #8FB4B4;
  --mythic-dragon-scale-4: #C0D8D8;
  --mythic-dragon-scale-5: #A0C0C0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "mythic-dragon-scale": {
        1: "#3D4F4F",
        2: "#5F7A7A",
        3: "#8FB4B4",
        4: "#C0D8D8",
        5: "#A0C0C0",
      }
    }
  }
}

Hex values

Color 1#3D4F4F

Color 2#5F7A7A

Color 3#8FB4B4

Color 4#C0D8D8

Color 5#A0C0C0

Accessibility

Contrast checker

1.9:1Fail

3.9:1AA18

5.8:1AA

4.4:1AA18

1.9:1Fail

2.1:1Fail

3.1:1AA18

2.4:1Fail

3.9:1AA18

2.1:1Fail

1.5:1Fail

1.2:1Fail

5.8:1AA

3.1:1AA18

1.5:1Fail

1.3:1Fail

4.4:1AA18

2.4:1Fail

1.2:1Fail

1.3:1Fail

Similar palettes

More like Mythic Dragon Scale

Aurora Horizon Whisper