Twilight Marketplace

Warm yellows and cool jewel tones collide against white, creating sharp visual tension wrapped in sophisticated restraint.

Open in generator

Colors

~Venerable White#F7F7F4

~Red Herring#DB1942

~Grape#713768

~Lost in Space#00366C

~White#FFFFFF

~Enchanting Ivy#2E5754

~Honey and Thyme#AEAB0A

~Mamba Yellow#FFCF00

Psychology

The high contrast between luminous yellows and deep cool tones (navy blue, teal, purple) creates visual energy while the neutral whites provide visual rest, preventing overwhelming saturation. Warm hues advance while cool recedes, establishing spatial depth and hierarchy that guides attention across compositions. The complementary harmony between yellow and purple generates psychological vibrancy without feeling chaotic, appealing to viewers seeking both excitement and balance.

Usage

Ideal for luxury product packaging, tech startup branding, and editorial design that requires both visual punch and refined sophistication. The mixed temperature profile serves projects needing to balance energetic engagement with professional credibility, such as high-end fashion catalogs and wine label design. Strong contrast makes this palette particularly effective for web interfaces and poster design where hierarchy and readability are essential.

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,
    #f7f7f4 0%,
    #db1942 14%,
    #713768 29%,
    #00366c 43%,
    #ffffff 57%,
    #2e5754 71%,
    #aeab0a 86%,
    #ffcf00 100%
  );

Tailwind v4

/* app.css — Tailwind v4 */
@theme {
  --color-gradient-1: #f7f7f4;
  --color-gradient-2: #db1942;
  --color-gradient-3: #713768;
  --color-gradient-4: #00366c;
  --color-gradient-5: #ffffff;
  --color-gradient-6: #2e5754;
  --color-gradient-7: #aeab0a;
  --color-gradient-8: #ffcf00;
}

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

CSS Variables

--color-1: #f7f7f4;
--color-2: #db1942;
--color-3: #713768;
--color-4: #00366c;
--color-5: #ffffff;
--color-6: #2e5754;
--color-7: #aeab0a;
--color-8: #ffcf00;

Hex values

#f7f7f4, #db1942, #713768, #00366c, #ffffff, #2e5754, #aeab0a, #ffcf00

Building something? Get this palette via the REST API.

History

Similar palettes

Neon Bloom Dusk

Jade Hour Glow

Midnight Brass

Indigo Hour Study

Twilight Alchemy

Neon Descent Study

Silk Hour Reverie

Cotton Candy Dawn

Pastel Lagoon