Fove
All palettes

Still water, warm sand

Quiet Lagoon

Quiet confidence for brands that want to feel considered, tactile, and unhurried.

Editorial landing pagesWellness dashboardsPortfolio covers
Open in editor

Palette story

Quiet Lagoon

#0E3B43
Color 1
#357266
Color 2
#9DC4B5
Color 3
#E8D9B5
Color 4
#F4EFE6
Color 5

Quiet Lagoon starts with the deep blue-green of protected water and moves toward the color of sun-warmed sand. It is not a tropical palette. It is quieter than that: more like a magazine spread about a coastal house, a product page for a thoughtful tool, or a brand system that wants calm without becoming beige.

The darkest teal gives the palette authority. The middle green keeps it human. The pale sand and ivory tones create room for text, product screenshots, and photographic material. This makes Quiet Lagoon especially useful for gradients because the contrast can be dramatic or soft depending on where the dark color is placed.

Use it when the interface should feel clear, composed, and grown up. Let the teal carry the emotional weight, then use the warmer neutrals as light rather than decoration.

How to use it

Quiet Lagoon works beautifully as a large background field behind black or ivory typography. For landing pages, keep the darkest color near one edge and let the sand move across the rest of the canvas. For slides, reverse the relationship: use the pale field as the page and bring teal in as a soft corner or side glow.

Color story

The palette is built like a shoreline. There is depth, plant life, mineral warmth, and finally a breathable paper white. The strongest designs usually repeat that order: depth first, atmosphere second, light last.

Live gradients

Put the palette to work.

Remix this palette

Hero background

A full-bleed field with enough motion for a landing page and enough restraint for text.

Split layout

Use the gradient as one half of the composition, then let white space carry the copy.

Feature pillars

Repeat the palette across cards so the page feels like one system, not separate moments.

Design system utility

Ramps, variables, and production handoff.

Use the editorial page for direction, then take the palette into product work with OKLCH ramps and CSS variables.

OKLCH ramps included
c1#0E3B43
c2#357266
c3#9DC4B5
c4#E8D9B5
Color 1 - quiet-lagoon-1#0E3B43
Color 2 - quiet-lagoon-2#357266
Color 3 - quiet-lagoon-3#9DC4B5
Color 4 - quiet-lagoon-4#E8D9B5
Color 5 - quiet-lagoon-5#F4EFE6