Abyssal Hearth
Deep ocean shadows meet warm clay and pale candlelight, creating tension between cool depths and glowing warmth.
Psychology
The complementary pairing of dominant deep blues against warm oranges and pinks creates visual vibration and high engagement, while the pale yellow acts as a stabilizing neutral that prevents the palette from feeling chaotic.
The two very dark blues establish psychological depth and stability, anchoring the composition, while warm mid-tones advance forward, creating a clear spatial hierarchy that guides the eye and conveys sophistication rather than harshness.
The two very dark blues establish psychological depth and stability, anchoring the composition, while warm mid-tones advance forward, creating a clear spatial hierarchy that guides the eye and conveys sophistication rather than harshness.
Usage
Effective for luxury cosmetics packaging, editorial design, and high-end hospitality branding where the contrast commands attention without compromising elegance.
Artisanal food labels, wine packaging, and architectural visualization benefit from the balance between cool restraint and warm approachability, signaling both premium quality and human craftsmanship.
The palette excels in digital interfaces and print campaigns targeting design-conscious audiences who respond to bold, intentional color choices over safer alternatives.
Artisanal food labels, wine packaging, and architectural visualization benefit from the balance between cool restraint and warm approachability, signaling both premium quality and human craftsmanship.
The palette excels in digital interfaces and print campaigns targeting design-conscious audiences who respond to bold, intentional color choices over safer alternatives.
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,
#151e3f 0%,
#030027 25%,
#f2f3d9 50%,
#dc9e82 75%,
#c16e70 100%
);Tailwind v4
/* app.css — Tailwind v4 */
@theme {
--color-gradient-1: #151e3f;
--color-gradient-2: #030027;
--color-gradient-3: #f2f3d9;
--color-gradient-4: #dc9e82;
--color-gradient-5: #c16e70;
}
/* Usage: bg-gradient-1, text-gradient-2, etc. */CSS Variables
--color-1: #151e3f; --color-2: #030027; --color-3: #f2f3d9; --color-4: #dc9e82; --color-5: #c16e70;
Hex values
#151e3f, #030027, #f2f3d9, #dc9e82, #c16e70
Building something? Get this palette via the REST API.
History
Similar palettes
Indigo Hour Study
Sorbet Afternoon
Blackberry Bakery Noon
Velvet Bakery Rest
Midnight Brass
Flamingo Hour
Terracotta Sunrise
Silk Hour Reverie
Twilight Alchemy
