Porcelain & Cobalt
Crisp linen and soft candlelight against deep water, where warm accents glow like distant fire on pale stone.
Psychology
The triadic balance of warm red and yellow against cool blue creates dynamic tension without harshness, anchored by abundant white space that prevents visual fatigue. The muted blue-gray and saturated deeper blue recede and ground the composition, while warm accent colors advance forward, triggering subtle visual movement that feels intentional rather than chaotic. Low chromatic saturation in the blues and red-toned mid-tones signals restraint and sophistication, allowing the vivid yellow to command attention without overwhelming the palette's fundamentally calm character.
Usage
Ideal for luxury stationery systems, editorial typography layouts, and minimalist interior design schemes where soft sophistication meets purposeful contrast. Projects requiring high readability with emotional depth, such as museum branding, fine art catalogs, and premium hospitality collateral, benefit from this palette's ability to suggest both calm and visual hierarchy. The abundant neutrals create breathing room while warm and cool accents guide the viewer's eye through content without aggressive color competition.
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,
#ffffff 0%,
#ffffff 14%,
#c35757 29%,
#00366c 43%,
#ffffff 57%,
#7083a3 71%,
#fccc4f 86%,
#ffffff 100%
);Tailwind v4
/* app.css — Tailwind v4 */
@theme {
--color-gradient-1: #ffffff;
--color-gradient-2: #ffffff;
--color-gradient-3: #c35757;
--color-gradient-4: #00366c;
--color-gradient-5: #ffffff;
--color-gradient-6: #7083a3;
--color-gradient-7: #fccc4f;
--color-gradient-8: #ffffff;
}
/* Usage: bg-gradient-1, text-gradient-2, etc. */CSS Variables
--color-1: #ffffff; --color-2: #ffffff; --color-3: #c35757; --color-4: #00366c; --color-5: #ffffff; --color-6: #7083a3; --color-7: #fccc4f; --color-8: #ffffff;
Hex values
#ffffff, #ffffff, #c35757, #00366c, #ffffff, #7083a3, #fccc4f, #ffffff
Building something? Get this palette via the REST API.
History
Similar palettes
Buttercream Lagoon
Abyssal Hearth
Dusk Linen Study
Slate & Honey Hour
Indigo Hour Study
Pastel Lagoon
Peach Hour
Caramel Linen Hour
Midnight Brass