Citrine Voltage Midnight

A sharp collision of midnight depths and electric yellows, anchored by black and white for maximum visual punch and clarity.

Open in generator

Colors

~Black#000000

~Merlot Magic#BA3B4F

~Papyrus#9D9100

~Lost in Space#00366C

~White#FFFFFF

~Serpent Sceptre#BACC00

~Mamba Yellow#FFCF00

~Seaside#66A3B2

Psychology

The complementary harmony between the dominant yellows (Mamba Yellow, Papyrus, Serpent Sceptre) and cool blues (Lost in Space, Seaside) creates visual tension that demands attention without feeling chaotic. High contrast extremes of pure black and white amplify this effect, while the warm magentas and cool teals add complexity that prevents monotony. This combination triggers cognitive engagement rather than passive acceptance, making viewers actively process the palette.

Usage

Strong choice for tech startup branding, music festival posters, and luxury packaging design where high contrast and visual drama signal sophistication and modernity. The mixed temperature profile suits editorial spreads combining photography with bold typography, as well as product design that needs to stand out on crowded shelves. The complementary yellows and blues work particularly well in interactive digital interfaces where contrast improves usability while maintaining visual interest.

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,
    #000000 0%,
    #ba3b4f 14%,
    #9d9100 29%,
    #00366c 43%,
    #ffffff 57%,
    #bacc00 71%,
    #ffcf00 86%,
    #66a3b2 100%
  );

Tailwind v4

/* app.css — Tailwind v4 */
@theme {
  --color-gradient-1: #000000;
  --color-gradient-2: #ba3b4f;
  --color-gradient-3: #9d9100;
  --color-gradient-4: #00366c;
  --color-gradient-5: #ffffff;
  --color-gradient-6: #bacc00;
  --color-gradient-7: #ffcf00;
  --color-gradient-8: #66a3b2;
}

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

CSS Variables

--color-1: #000000;
--color-2: #ba3b4f;
--color-3: #9d9100;
--color-4: #00366c;
--color-5: #ffffff;
--color-6: #bacc00;
--color-7: #ffcf00;
--color-8: #66a3b2;

Hex values

#000000, #ba3b4f, #9d9100, #00366c, #ffffff, #bacc00, #ffcf00, #66a3b2

Building something? Get this palette via the REST API.

History

Similar palettes

Jade Hour Glow

Indigo Hour Study

Neon Bloom Dusk

Shallow Waters

Pastel Lagoon

Butter Meadow Soft

Frosted Lavender Drift

Pastel Lagoon Study