Terracotta Tide Contrast

Warm earth tones meet cool depths, creating tactile richness with sharp, purposeful contrast and balanced intensity.

Open in generator

Colors

~Black#000000

~Shiritorier’s Orange#F19400

~Pistachio#98C574

~Lost in Space#00366C

~White#FFFFFF

~Merlot#74003D

~Windy Meadow#AAA374

~High Dive#4DBDD2

Psychology

The palette pairs warm yellows and deep magentas against cool blues and teals, creating visual tension that demands attention without feeling chaotic. The high contrast between light and dark values, combined with complementary color relationships, triggers both arousal and stability, making the palette energizing yet grounded. Black and white anchors provide stark endpoints that amplify the saturation of mid-tone colors, a principle that enhances perceived depth and sophistication.

Usage

Strong candidates include luxury cosmetics packaging, contemporary art direction, and editorial design where boldness and clarity are essential. The palette's mixed temperature range and high contrast work well for restaurant branding and fashion lookbooks that need to convey both warmth and modernity. Projects requiring strong visual hierarchy and psychological balance, such as tech product interfaces or premium beverage labels, benefit from this palette's complementary harmony and tonal range.

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%,
    #f19400 14%,
    #98c574 29%,
    #00366c 43%,
    #ffffff 57%,
    #74003d 71%,
    #aaa374 86%,
    #4dbdd2 100%
  );

Tailwind v4

/* app.css — Tailwind v4 */
@theme {
  --color-gradient-1: #000000;
  --color-gradient-2: #f19400;
  --color-gradient-3: #98c574;
  --color-gradient-4: #00366c;
  --color-gradient-5: #ffffff;
  --color-gradient-6: #74003d;
  --color-gradient-7: #aaa374;
  --color-gradient-8: #4dbdd2;
}

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

CSS Variables

--color-1: #000000;
--color-2: #f19400;
--color-3: #98c574;
--color-4: #00366c;
--color-5: #ffffff;
--color-6: #74003d;
--color-7: #aaa374;
--color-8: #4dbdd2;

Hex values

#000000, #f19400, #98c574, #00366c, #ffffff, #74003d, #aaa374, #4dbdd2

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