Gilded Noir

luxuriousmoody

Click any swatch to copy its hex.

See it in place

Design that earns its keep

A tiny landing page, painted entirely with this palette so you can judge it doing real work.

Get started

Fast

Ships static, loads instantly.

Honest

Every choice explained.

Drag to place · tap to copy

How the preview picks colors: the lightest swatch becomes the page background, the darkest becomes the text, and the most vivid becomes the button. Drag a chip onto any part of the mockup to override it — your arrangement is saved into this page's URL, so copying the link shares it.

Why it works

This is a classic luxury formula: metallic gold only reads as precious when it has darkness to glow against, and the near-black noir provides exactly that depth. Wine adds a second low-value tone so the shadows feel rich rather than flat, while bronze bridges gold and black through a shared warm undertone. Ivory keeps the scheme printable and gives type room to breathe.

Built around Gold.

Use this palette

Hex values
#d4af37, #1c1a17, #f4efe4, #5e2129, #8c7851
CSS custom properties
:root {
  --color-gold: #d4af37;
  --color-noir: #1c1a17;
  --color-ivory: #f4efe4;
  --color-wine: #5e2129;
  --color-bronze: #8c7851;
}
Tailwind v4 theme
@theme {
  --color-gold: #d4af37;
  --color-noir: #1c1a17;
  --color-ivory: #f4efe4;
  --color-wine: #5e2129;
  --color-bronze: #8c7851;
}
JSON
{
  "name": "Gilded Noir",
  "colors": [
    {
      "hex": "#d4af37",
      "role": "gold"
    },
    {
      "hex": "#1c1a17",
      "role": "noir"
    },
    {
      "hex": "#f4efe4",
      "role": "ivory"
    },
    {
      "hex": "#5e2129",
      "role": "wine"
    },
    {
      "hex": "#8c7851",
      "role": "bronze"
    }
  ]
}

Related palettes