Palette

Baroque Night Grandeur

Deep, rich jewel tones with a touch of gold, capturing the opulent grandeur of a baroque night.

DarkElegant5 colors

More Dark palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Baroque Night Grandeur 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 Baroque Night Grandeur.

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

Data visualization

#263238#455A64#7B1FA2#AD1457#FFEB3B

Palette guide

How to use Baroque Night Grandeur

Overview

The Baroque Night Grandeur palette captures the opulent grandeur of a baroque night, blending deep, rich jewel tones with a dazzling touch of gold. This elegant collection features a profound dark slate #263238, a softer cool grey #455A64, a majestic deep purple #7B1FA2, and a vibrant ruby red #AD1457. Designers can utilize these powerful hues to create sophisticated, high-impact designs for luxury brands, artistic ventures, or dramatic digital experiences. Developers will find these bold colors excellent for crafting interfaces that convey prestige and elegance, ensuring visual impact. The brilliant gold #FFEB3B adds a luminous contrast, perfect for evoking historical richness and dramatic splendor.

Best used for

Luxury event branding
High-end fashion editorials
Theatrical production design
Prestige jewelry displays
Dark mode UI themes
Art gallery websites

Suggested color roles

primary

#263238 - A deep, sophisticated dark slate, ideal for dominant backgrounds, strong brand elements, or primary text in dark mode.

secondary

#455A64 - A softer, cool dark grey, perfect for secondary backgrounds, navigation, or subtle content dividers.

accent

#FFEB3B - A brilliant, luminous gold, ideal for dazzling highlights, prestigious emblems, or key interactive elements.

background

#263238 - The primary choice for a dark, luxurious background, providing maximum contrast for the vibrant accents.

text

A clean white or #FFEB3B for headings, ensuring high contrast and a luxurious, readable appearance against dark backgrounds.

Accessibility notes

Ensure white or #FFEB3B text on #263238, #455A64, #7B1FA2, or #AD1457 backgrounds meets WCAG AA contrast.
Avoid using #7B1FA2 or #AD1457 for small text on #455A64 background without careful contrast checks.
Use #FFEB3B for all interactive elements to ensure visibility and clear affordance.
For a truly opulent feel, consider larger font sizes for headings and key information.

Recommended combinations

Night Jewels

A dramatic dark background with brilliant gold accents and a majestic deep purple for emphasis.

#263238 · #FFEB3B · #7B1FA2

Regal Contrast

Creates a sophisticated dark mode palette with a vibrant ruby red and dazzling gold.

#455A64 · #AD1457 · #FFEB3B

Grand Gold

A strong deep purple paired with brilliant gold, anchored by dark slate for maximum impact and luxury.

#7B1FA2 · #FFEB3B · #263238

CSS variables

:root {
  --baroque-night-grandeur-1: #263238;
  --baroque-night-grandeur-2: #455A64;
  --baroque-night-grandeur-3: #7B1FA2;
  --baroque-night-grandeur-4: #AD1457;
  --baroque-night-grandeur-5: #FFEB3B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "baroque-night-grandeur": {
        1: "#263238",
        2: "#455A64",
        3: "#7B1FA2",
        4: "#AD1457",
        5: "#FFEB3B",
      }
    }
  }
}

Hex values

Color 1#263238

Color 2#455A64

Color 3#7B1FA2

Color 4#AD1457

Color 5#FFEB3B

Accessibility

Contrast checker

1.8:1Fail

1.6:1Fail

1.9:1Fail

10.8:1AAA

1.8:1Fail

1.1:1Fail

1:1Fail

5.9:1AA

1.6:1Fail

1.1:1Fail

1.2:1Fail

6.7:1AA

1.9:1Fail

1:1Fail

1.2:1Fail

5.7:1AA

10.8:1AAA

5.9:1AA

6.7:1AA

5.7:1AA

Similar palettes

More like Baroque Night Grandeur

View all Dark

Velvet Midnight Lounge

Deep Space Orchid

Gatsby Glam Evening

Gatsby Night Glam

Imperial Gemstone Array

Starlight Masquerade Ball