Back to palettes

Palette

Azure Dragon Scales

Radiant blues reminiscent of a mythical dragon's iridescent scales, majestic and strong.

VibrantEnergetic5 colors
More Vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#00BFFF#4169E1#00008B#008B8B#ADD8E6

Palette guide

How to use Azure Dragon Scales

Overview

The Azure Dragon Scales palette bursts with radiant blues, reminiscent of a mythical dragon's iridescent scales—majestic and strong. This vibrant collection features the energetic sky blue of #00BFFF, the classic royal blue of #4169E1, the profound navy of #00008B, and the striking dark cyan of #008B8B, balanced by the softest aqua of #ADD8E6. Designers and developers will find this palette exhilarating for projects that demand dynamism, power, and a touch of fantasy. Its unique blend of blues and a hint of teal provides ample opportunity for creating captivating visuals and energetic user experiences.

Best used for

  • Fantasy game interfaces
  • Esports branding
  • Tech startups (innovative)
  • Children's entertainment platforms
  • Event promotion (dynamic)
  • Creative agency portfolios

Suggested color roles

primary

#00BFFF serves as a bold and energetic primary, excellent for calls to action, prominent headings, or dynamic brand elements.

secondary

#4169E1 provides a stable, royal blue secondary, suitable for subheadings, navigation, or supporting visual blocks.

accent

#008B8B offers a unique dark cyan accent, perfect for interactive elements, hover states, or distinctive graphic details.

background

#ADD8E6 creates a light, ethereal backdrop, allowing the vibrant blues to truly pop and enhancing content clarity.

text

Use #00008B or a deep charcoal for body text on #ADD8E6 or #00BFFF backgrounds (with caution for #00BFFF).

Accessibility notes

  • Ensure #00008B text on #ADD8E6 backgrounds meets WCAG AA contrast standards.
  • Avoid using #ADD8E6 for small text on any other palette color due to insufficient contrast.
  • Use #00BFFF or #4169E1 for critical interactive elements to ensure clear visibility and user engagement.
  • For large text, #008B8B on #ADD8E6 can work, but always verify contrast ratios.

Recommended combinations

Mythic Glow

Creates a luminous gradient, ideal for hero sections or dynamic backgrounds with a magical feel.

#ADD8E6 · #00BFFF · #4169E1

Dragon's Depth

Excellent for creating a sense of power and mystery, suitable for dark mode or strong branding.

#00008B · #4169E1 · #008B8B

Vibrant Scales

A balanced contrast for lively UI, combining bright primary with light background and unique accent.

#00BFFF · #ADD8E6 · #008B8B

CSS variables

:root {
  --azure-dragon-scales-1: #00BFFF;
  --azure-dragon-scales-2: #4169E1;
  --azure-dragon-scales-3: #00008B;
  --azure-dragon-scales-4: #008B8B;
  --azure-dragon-scales-5: #ADD8E6;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "azure-dragon-scales": {
        1: "#00BFFF",
        2: "#4169E1",
        3: "#00008B",
        4: "#008B8B",
        5: "#ADD8E6",
      }
    }
  }
}

Related searches

vibrant blue fantasy palettedragon scale colorsenergetic blue web designroyal blue teal schememythical creature colors

Palette colors

Hex values

Color 1#00BFFF
·
Color 2#4169E1
·
Color 3#00008B
·
Color 4#008B8B
·
Color 5#ADD8E6
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.3:1Fail
7.2:1AAA
2:1Fail
1.4:1Fail
2
2.3:1Fail
3.2:1AA18
1.2:1Fail
3.2:1AA18
3
7.2:1AAA
3.2:1AA18
3.7:1AA18
10:1AAA
4
2:1Fail
1.2:1Fail
3.7:1AA18
2.7:1Fail
5
1.4:1Fail
3.2:1AA18
10:1AAA
2.7:1Fail

Similar palettes

More like Azure Dragon Scales

View all Vibrant
City Night Electric
Cyber Future
Mediterranean Tile Warmth
Retro Comic Brights
Abstract Brush Stroke
Abstract Canvas Stripe