Palette

Fiery Dragon Scale

Intense, glowing reds and deep maroons, like the shimmering, ancient scales of a dragon.

darkdark5 colors

More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#4F0F0B#992F2B#E04F4A#FF8C88#7D1F1A

Palette guide

How to use Fiery Dragon Scale

Overview

The Fiery Dragon Scale palette evokes the intense, glowing reds and deep maroons of ancient dragon scales. This powerful collection features rich, dark tones like #4F0F0B and #7D1F1A, complemented by vibrant reds #992F2B, #E04F4A, and the lighter #FF8C88. It's an excellent choice for designers and developers aiming to create bold, mysterious, and strong visual narratives. The palette offers a dramatic range for crafting immersive digital environments, impactful brand identities, or captivating illustrations with a touch of mythical grandeur and intensity.

Best used for

fantasy gaming UI/UX
mythology-themed branding
dark mode website designs
dramatic digital art
luxury product packaging
bold event invitations

Suggested color roles

primary

#E04F4A for high-impact calls to action, main headings, or focal points that demand attention.

secondary

#992F2B for supporting content, navigation, or secondary buttons, adding depth.

accent

#FF8C88 for bright highlights, small icons, or elements needing a subtle, glowing edge.

background

#4F0F0B for a deep, mysterious backdrop, or #7D1F1A for a slightly warmer, dark base.

text

Use white or a very light cream for text on darker colors like #4F0F0B and #7D1F1A, and a dark charcoal for lighter backgrounds.

Accessibility notes

White text will provide excellent contrast against #4F0F0B, #7D1F1A, #992F2B, and #E04F4A.
Ensure sufficient contrast when using #FF8C88 text on #E04F4A or #992F2B backgrounds.
Avoid placing #E04F4A text directly on #992F2B for small text; increase font size if necessary.
For improved readability, use a darker text color (e.g., deep charcoal) on #FF8C88.

Recommended combinations

Dragon's Fire

Creates a powerful, dark-to-bright gradient for hero sections or dramatic visual statements.

#4F0F0B · #992F2B · #E04F4A

Mystic Glow

A captivating blend for highlights and interactive elements, evoking a magical shimmer.

#7D1F1A · #E04F4A · #FF8C88

Ancient Scales

Provides a rich, deep base for backgrounds and foundational design elements, conveying power.

#4F0F0B · #7D1F1A · #992F2B

CSS variables

:root {
  --fiery-dragon-scale-2-1: #4F0F0B;
  --fiery-dragon-scale-2-2: #992F2B;
  --fiery-dragon-scale-2-3: #E04F4A;
  --fiery-dragon-scale-2-4: #FF8C88;
  --fiery-dragon-scale-2-5: #7D1F1A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fiery-dragon-scale-2": {
        1: "#4F0F0B",
        2: "#992F2B",
        3: "#E04F4A",
        4: "#FF8C88",
        5: "#7D1F1A",
      }
    }
  }
}

Hex values

Color 1#4F0F0B

Color 2#992F2B

Color 3#E04F4A

Color 4#FF8C88

Color 5#7D1F1A

Accessibility

Contrast checker

2:1Fail

3.8:1AA18

6.7:1AA

1.5:1Fail

2:1Fail

1.9:1Fail

3.3:1AA18

1.3:1Fail

3.8:1AA18

1.9:1Fail

1.7:1Fail

2.6:1Fail

6.7:1AA

3.3:1AA18

1.7:1Fail

4.5:1AA18

1.5:1Fail

1.3:1Fail

2.6:1Fail

4.5:1AA18

Similar palettes

More like Fiery Dragon Scale

Celestial Altar Stone