Seaside Circuit

High-contrast palette merging cool waters with electric accents, evoking tension between calm depth and vivid pulse.

Open in generator

Colors

~Black#000000

~Seaside#66A3B2

~Vampire Love Story#E10079

~Lost in Space#00366C

~White#FFFFFF

~Papyrus#9D9100

~Serpent Sceptre#BACC00

~Foliage#A1B28A

Psychology

The triadic harmony of deep blue, vivid magenta, and chartreuse creates visual tension that commands attention while remaining structurally balanced. Cool teals and greens recede into depth, while the saturated pink and yellow-green advance forward, establishing spatial hierarchy that draws the eye through layers. The high contrast between achromatic black and white anchors the composition, preventing the warm accents from feeling chaotic or overwhelming.

Usage

Ideal for tech product interfaces, music festival branding, and contemporary art catalogs where dynamic energy must coexist with visual sophistication. Projects requiring bold visual separation between foreground elements and calm background zones benefit from this palette's distinct temperature shifts. Works particularly well for digital-first design and editorial layouts that need to guide attention through competing information hierarchies.

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

Tailwind v4

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

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

CSS Variables

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

Hex values

#000000, #66a3b2, #e10079, #00366c, #ffffff, #9d9100, #bacc00, #a1b28a

Building something? Get this palette via the REST API.

History

Similar palettes

Neon Bloom Dusk

Jade Hour Glow

Shallow Waters

Indigo Hour Study

Frosted Lavender Drift

Pastel Lagoon Study

Pastel Lagoon

Butter Meadow Soft