Back to palettes

Palette

Dragon Scales Gleam

A moody yet alluring mix of muted, metallic hues, like the scales of an ancient, sleeping dragon.

darkdark5 colors
More dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#283845#6D6A75#B79C9B#E4B8C1#565063

Palette guide

How to use Dragon Scales Gleam

Overview

The Dragon Scales Gleam palette (version 3) presents a sophisticated, moody blend of muted, metallic hues. Dominated by the deep charcoal of #283845 and the subtle warmth of #6D6A75, it evokes the ancient and mysterious. Lighter tones like the rosy #B79C9B and the soft blush of #E4B8C1 add a delicate contrast, preventing the palette from becoming overly dark. The grounding presence of #565063 provides a cohesive bridge. This palette is excellent for designers and developers aiming to create elegant, understated, yet intriguing digital experiences, suitable for luxury brands or historical themes.

Best used for

  • Luxury brand websites and apps
  • Elegant editorial layouts
  • UI design for sophisticated software
  • Fashion or beauty product showcases
  • Photography portfolios with a moody aesthetic
  • Historical or fantasy game interfaces

Suggested color roles

primary

Use #283845 (Dark Charcoal) as the dominant background or primary text color for a strong, sophisticated foundation.

secondary

Apply #6D6A75 (Muted Gray-Purple) for secondary content blocks, navigation bars, or subtle UI elements, adding depth.

accent

Highlight key information or interactive elements with #B79C9B (Rose Taupe), providing a soft, elegant focal point.

background

Utilize #565063 (Deep Mauve Gray) for background sections or large panels, offering a rich, understated canvas.

text

Pair light text like #E4B8C1 (Pale Pink) or white against #283845 for headings, and use #283845 or a deep charcoal for body text on lighter backgrounds.

Accessibility notes

  • Ensure sufficient contrast when using #B79C9B text on #565063 or #6D6A75 backgrounds.
  • For body text, use a very dark color like #283845 against #E4B8C1 or #B79C9B.
  • Avoid using #6D6A75 on #565063 for critical text due to low contrast.
  • White or very light text provides excellent contrast on #283845 and #565063.

Recommended combinations

Ancient Mystery

Excellent for sophisticated website headers, landing pages, or elegant print materials.

#283845 · #6D6A75 · #B79C9B

Subtle Elegance

Ideal for soft backgrounds, card components, or secondary information panels, offering gentle contrast.

#565063 · #E4B8C1 · #6D6A75

Deep & Delicate

Use for prominent call-to-actions, elegant typography, or product highlights against dark themes.

#283845 · #E4B8C1 · #B79C9B

CSS variables

:root {
  --dragon-scales-gleam-3-1: #283845;
  --dragon-scales-gleam-3-2: #6D6A75;
  --dragon-scales-gleam-3-3: #B79C9B;
  --dragon-scales-gleam-3-4: #E4B8C1;
  --dragon-scales-gleam-3-5: #565063;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "dragon-scales-gleam-3": {
        1: "#283845",
        2: "#6D6A75",
        3: "#B79C9B",
        4: "#E4B8C1",
        5: "#565063",
      }
    }
  }
}

Related searches

moody metallic color palettedark fantasy web designelegant muted colorscharcoal rose taupe palettesophisticated grey purple

Palette colors

Hex values

Color 1#283845
·
Color 2#6D6A75
·
Color 3#B79C9B
·
Color 4#E4B8C1
·
Color 5#565063
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.3:1Fail
4.7:1AA
6.8:1AA
1.6:1Fail
2
2.3:1Fail
2.1:1Fail
3:1AA18
1.5:1Fail
3
4.7:1AA
2.1:1Fail
1.4:1Fail
3:1AA18
4
6.8:1AA
3:1AA18
1.4:1Fail
4.4:1AA18
5
1.6:1Fail
1.5:1Fail
3:1AA18
4.4:1AA18

Similar palettes

More like Dragon Scales Gleam

View all dark