Palette

Fiery Dragon Scales

A bold and powerful palette, echoing the intense, shimmering hues of mythical dragon scales bathed in firelight.

vibrantenergetic5 colors

More vibrant palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#8B0000#CC5500#FFD700#FF6347#4B0082

Palette guide

How to use Fiery Dragon Scales

Overview

The 'Fiery Dragon Scales' palette (ID: fiery-dragon-scales) is a bold and powerful collection, echoing the intense, shimmering hues of mythical dragon scales bathed in firelight. It masterfully blends deep crimson (#8B0000) with vibrant orange (#CC5500), radiant gold (#FFD700), and a striking coral-red (#FF6347), anchored by a surprising, regal dark indigo (#4B0082). This combination creates a dynamic visual narrative suitable for designers and developers building projects that demand energy, fantasy, and a touch of mystique, offering both warmth and dramatic contrast.

Best used for

Fantasy game UI and mythological creature design
Impactful book covers and theatrical set design
Premium brand packaging and luxury goods
Cosmic or space-themed websites and digital art
Vibrant event branding and promotional materials
Historical or epic storytelling visuals

Suggested color roles

primary

#8B0000 for strong foundational elements, main headers, or dominant sections, offering a powerful base.

secondary

#CC5500 for supporting elements, subheadings, or secondary calls to action, adding warmth.

accent

#FFD700 or #FF6347 for glowing highlights, interactive states, or key focal points that demand attention.

background

#4B0082 provides a deep, contrasting, and mysterious backdrop, or a subtle #8B0000 for a fiery canvas.

text

Use #FFD700 or #FF6347 on dark backgrounds like #4B0082, or a clean white/near-white for general readability.

Accessibility notes

Ensure #FFD700 or #FF6347 text on #4B0082 provides sufficient contrast according to WCAG guidelines.
#8B0000 requires light text (e.g., white or #FFD700) for readability; avoid dark text on this shade.
Avoid placing #CC5500 text on #FF6347 due to potential low contrast for smaller text sizes.
Consider larger font sizes for the more vibrant, lighter colors if used for body text to aid readability.

Recommended combinations

Royal & Fire

For a regal, high-contrast header or logo, combining depth with brilliant highlights.

#4B0082 · #FFD700 · #8B0000

Energetic CTA

A vibrant button with glowing accents, perfect for calls to action.

#CC5500 · #FF6347 · #FFD700

Dynamic Gradient

For a fiery transition in banners, backgrounds, or visual elements, evoking energy.

#8B0000 · #CC5500 · #FFD700

CSS variables

:root {
  --fiery-dragon-scales-1: #8B0000;
  --fiery-dragon-scales-2: #CC5500;
  --fiery-dragon-scales-3: #FFD700;
  --fiery-dragon-scales-4: #FF6347;
  --fiery-dragon-scales-5: #4B0082;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fiery-dragon-scales": {
        1: "#8B0000",
        2: "#CC5500",
        3: "#FFD700",
        4: "#FF6347",
        5: "#4B0082",
      }
    }
  }
}

Hex values

Color 1#8B0000

Color 2#CC5500

Color 3#FFD700

Color 4#FF6347

Color 5#4B0082

Accessibility

Contrast checker

2.3:1Fail

7.1:1AAA

3.4:1AA18

1.3:1Fail

2.3:1Fail

3.1:1AA18

1.5:1Fail

3:1AA18

7.1:1AAA

3.1:1AA18

2.1:1Fail

9.2:1AAA

3.4:1AA18

1.5:1Fail

2.1:1Fail

4.4:1AA18

1.3:1Fail

3:1AA18

9.2:1AAA

4.4:1AA18

Similar palettes

More like Fiery Dragon Scales

Crimson Glacier Peaks

Crimson Horizon

Dragon Scale Shimmer