Midnight Marmalade

Deep jewel tones meet warm spice and acid yellow, creating tension between shadow and luminous warmth in high-contrast layers.

Open in generator

Colors

~Lost in Space#00376C

~White#FFFFFF

~Red Herring#DB1942

~Mutabilis#C79590

~Succulent Lime#DBD65A

~Murasaki#501D45

~White#FFFFFF

Psychology

The triadic harmony of deep sapphire, plum, and citrine creates visual vibration and high energy, while the muted terracotta acts as a grounding anchor between warm and cool zones. Deep, low-saturation purples and blues recede visually, allowing the vivid yellows and reds to advance and command attention, triggering alertness and sophistication rather than restlessness. This push-pull between saturated accents and moderate darks establishes controlled drama that reads as intentional luxury rather than chaotic.

Usage

Ideal for luxury cosmetics packaging, high-end wine labels, and editorial fashion spreads where color contrast signals premium positioning and creative confidence. The balanced mix of dark depths and acidic highlights works particularly well in restaurant identity systems and artisan confectionery branding that aim to convey both indulgence and modernity. Projects requiring bold visual hierarchy without losing sophistication benefit from this palette's ability to command attention while maintaining elegance.

Code

CSS Gradient

/* CSS gradient approximation of mesh gradient */
/* Note: This is a linear approximation. For the full animated mesh effect, use the React/JS export. */
background: linear-gradient(
    90deg,
    #00376c 0%,
    #ffffff 17%,
    #db1942 33%,
    #c79590 50%,
    #dbd65a 67%,
    #501d45 83%,
    #ffffff 100%
  );

Tailwind v4

/* app.css — Tailwind v4 */
@theme {
  --color-gradient-1: #00376c;
  --color-gradient-2: #ffffff;
  --color-gradient-3: #db1942;
  --color-gradient-4: #c79590;
  --color-gradient-5: #dbd65a;
  --color-gradient-6: #501d45;
  --color-gradient-7: #ffffff;
}

/* Usage: bg-gradient-1, text-gradient-2, etc. */

CSS Variables

--color-1: #00376c;
--color-2: #ffffff;
--color-3: #db1942;
--color-4: #c79590;
--color-5: #dbd65a;
--color-6: #501d45;
--color-7: #ffffff;

Hex values

#00376c, #ffffff, #db1942, #c79590, #dbd65a, #501d45, #ffffff

Building something? Get this palette via the REST API.

History

Similar palettes

Indigo Hour Study

Roasted Almond Bloom

Pastel Lagoon

Buttercream Lagoon

Porcelain & Cobalt

Kiln Ember Dusk

Midnight Brass

Silk Hour Reverie

Peach Hour