Back to palettes

Palette

Fiery Dragon Scales

Intense, burning reds and oranges that conjure images of mythical dragon scales glowing with inner fire.

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

#8C0F0F#B23B3B#D16B6B#6A0A0A#A64A4A

Palette guide

How to use Fiery Dragon Scales

Overview

The 'Fiery Dragon Scales' palette (ID: fiery-dragon-scales-2) is a vibrant and intense collection of reds, perfectly embodying the energetic and bold spirit of mythical fire. It features a strong, deep crimson (#8C0F0F) that acts as a powerful anchor, complemented by rich ruby tones like #B23B3B and #A64A4A. The palette is further enlivened by brighter, glowing reds such as #D16B6B, which adds a crucial touch of radiance. This selection is ideal for designers and developers aiming to create impactful, dramatic, and emotionally charged experiences. Its inherently bold nature ensures high visibility and a memorable aesthetic for any project.

Best used for

  • Fantasy game UI and character design
  • Dramatic book covers and movie posters
  • Impactful brand logos and marketing materials
  • Warning indicators and urgent alerts in UI
  • Energetic event promotions and signage
  • Gothic or mythical themed websites

Suggested color roles

primary

#8C0F0F serves as a powerful primary color for strong calls to action, main headers, or dominant brand elements.

secondary

#B23B3B works well for supporting elements, subheadings, or secondary interactive components, offering depth.

accent

#D16B6B is perfect for glowing highlights, interactive states, or small, vibrant details that need to pop.

background

#6A0A0A provides a deep, dramatic, and grounding backdrop, allowing brighter colors to truly shine.

text

Use #D16B6B on #6A0A0A for good contrast, or a stark white or light gray for general readability on darker reds.

Accessibility notes

  • Ensure #D16B6B text on #6A0A0A background meets WCAG AA standards for larger text.
  • Darker shades like #8C0F0F will require light text (e.g., white, #D16B6B) for optimal readability.
  • Avoid placing #B23B3B text directly on #8C0F0F for small font sizes due to insufficient contrast.
  • Always test the contrast of interactive elements to ensure they are clearly distinguishable.

Recommended combinations

Bold Header

For a powerful header section with a dark base, strong title, and vibrant accent.

#6A0A0A · #8C0F0F · #D16B6B

Fiery Button

A primary button with a mid-tone base, brighter hover state, and dark text/border.

#B23B3B · #D16B6B · #6A0A0A

Dramatic Card

A card background with a vibrant highlight and a strong primary element.

#A64A4A · #D16B6B · #8C0F0F

CSS variables

:root {
  --fiery-dragon-scales-2-1: #8C0F0F;
  --fiery-dragon-scales-2-2: #B23B3B;
  --fiery-dragon-scales-2-3: #D16B6B;
  --fiery-dragon-scales-2-4: #6A0A0A;
  --fiery-dragon-scales-2-5: #A64A4A;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "fiery-dragon-scales-2": {
        1: "#8C0F0F",
        2: "#B23B3B",
        3: "#D16B6B",
        4: "#6A0A0A",
        5: "#A64A4A",
      }
    }
  }
}

Related searches

vibrant red palettedragon scales color schemebold crimson huesenergetic design colorsfantasy theme palette

Palette colors

Hex values

Color 1#8C0F0F
·
Color 2#B23B3B
·
Color 3#D16B6B
·
Color 4#6A0A0A
·
Color 5#A64A4A
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.6:1Fail
2.8:1Fail
1.3:1Fail
1.7:1Fail
2
1.6:1Fail
1.7:1Fail
2.2:1Fail
1:1Fail
3
2.8:1Fail
1.7:1Fail
3.6:1AA18
1.6:1Fail
4
1.3:1Fail
2.2:1Fail
3.6:1AA18
2.2:1Fail
5
1.7:1Fail
1:1Fail
1.6:1Fail
2.2:1Fail

Similar palettes

More like Fiery Dragon Scales

View all vibrant