Teal Depth Morning

Cool, submerged light filtered through layered water and stone, balancing deep greens with luminous blues in quiet equilibrium.

Open in generator

Colors

~Midori#305D40

~Pine Scented Lagoon#247074

~Underwater Moonlight#5787A9

~Wisteria Blue#889DCB

~Purple Illusion#AFBAF1

Psychology

The palette's cool temperature and moderate contrast create a sense of calm stability rather than tension, with the muted green anchoring the composition while lighter blues provide visual lift without jarring contrast. The progression from deep teal through mid-tone blue to pale lavender establishes visual hierarchy that guides attention naturally, mimicking how cool colors recede in space and create perceived depth. This triadic balance between green and blue families suggests contemplation and trust, commonly associated with professional and meditative environments.

Usage

Well-suited for luxury wellness branding, corporate digital interfaces, and editorial photography where moderate contrast supports readability without visual fatigue. Projects requiring sophisticated restraint, such as tech product packaging, architectural visualization, and minimal lifestyle publications, benefit from the palette's cool elegance and balanced lightness. The muted saturation works particularly well for healthcare design, financial services, and academic institutional materials 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,
    #305d40 0%,
    #247074 25%,
    #5787a9 50%,
    #889dcb 75%,
    #afbaf1 100%
  );

Tailwind v4

/* app.css — Tailwind v4 */
@theme {
  --color-gradient-1: #305d40;
  --color-gradient-2: #247074;
  --color-gradient-3: #5787a9;
  --color-gradient-4: #889dcb;
  --color-gradient-5: #afbaf1;
}

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

CSS Variables

--color-1: #305d40;
--color-2: #247074;
--color-3: #5787a9;
--color-4: #889dcb;
--color-5: #afbaf1;

Hex values

#305d40, #247074, #5787a9, #889dcb, #afbaf1

Building something? Get this palette via the REST API.

History

Similar palettes

Jade Hour Glow

Shallow Waters

Pastel Lagoon Study

Misty Lagoon Hour

Mineral Spring Dawn

Coastal Inlet Calm

Slate Pool Breath

Coastal Linen Study

Midnight Pool Glow