Peat & Tidepool

A grounded palette of cool water and muted earth, where soft light filters through layered depths and weathered texture.

Open in generator

Colors

~Puma#5A4824

~Swamp Sessions#9EA577

~Basswood Green#A7C4A7

~Fresh Breeze#7AB4A0

~Night Watch#367775

~Finnish Fiord#AFE7F1

~Under the Sea#54818F

~Frozen Wave#5791A6

Psychology

The dominant teals and greens create a receding, contemplative space that lowers visual stimulation and invites focus, while the warm anchor of Puma prevents the palette from feeling cold or clinical. Low chromatic saturation across all eight colors signals restraint and maturity, evoking trust and stability rather than urgency. The triadic harmony between warm yellow, cool greens, and cool teals produces natural visual balance without sharp contrast, allowing compositions to feel composed rather than tense.

Usage

Ideal for editorial design, interior branding, and heritage packaging where sophisticated restraint communicates authenticity. The mixed lightness range and moderate contrast work well for sustainable product lines, architectural visualization, and wellness applications that require both visual depth and approachability. The palette's cool dominance with warm grounding suits nature-focused photography, nonprofit branding, and minimalist web interfaces where calm authority is essential.

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,
    #5a4824 0%,
    #9ea577 14%,
    #a7c4a7 29%,
    #7ab4a0 43%,
    #367775 57%,
    #afe7f1 71%,
    #54818f 86%,
    #5791a6 100%
  );

Tailwind v4

/* app.css — Tailwind v4 */
@theme {
  --color-gradient-1: #5a4824;
  --color-gradient-2: #9ea577;
  --color-gradient-3: #a7c4a7;
  --color-gradient-4: #7ab4a0;
  --color-gradient-5: #367775;
  --color-gradient-6: #afe7f1;
  --color-gradient-7: #54818f;
  --color-gradient-8: #5791a6;
}

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

CSS Variables

--color-1: #5a4824;
--color-2: #9ea577;
--color-3: #a7c4a7;
--color-4: #7ab4a0;
--color-5: #367775;
--color-6: #afe7f1;
--color-7: #54818f;
--color-8: #5791a6;

Hex values

#5a4824, #9ea577, #a7c4a7, #7ab4a0, #367775, #afe7f1, #54818f, #5791a6

Building something? Get this palette via the REST API.

History

Similar palettes

Frosted Meadow

Shallow Waters

Misty Lagoon Hour

Jade Hour Glow

Frosted Lavender Drift

Moss Shallow Study

Coastal Linen Study

Midnight Pool Glow

Mineral Spring Dawn