Fove
All palettes

Coral heat, ocean depth

Coral Reef

Vibrant, fresh, and lively without becoming loud.

Campaign pagesPresentation coversBrand refreshes
Open in editor

Palette story

Coral Reef

#FF6B5B
Color 1
#F9E1D4
Color 2
#A7CDD9
Color 3
#3D7691
Color 4
#0E2A38
Color 5

Coral Reef has a strong temperature shift: warm coral on one side, cool ocean on the other. That contrast makes the palette feel alive. It can be playful, but the deep blue keeps it from becoming decorative or childish.

The key is to let coral behave like living color rather than warning color. Use it in broad soft shapes, not only as a button accent. The pale ice tone gives the eye somewhere to rest, and the ocean tones create enough contrast for serious typography.

How to use it

In gradients, place coral and blue as large fields that meet through a soft transition. For slides, this palette is excellent when the title sits on a quiet pale area and the color energy happens around it.

Color story

The story is underwater brightness: coral, filtered light, mineral blue, and the dark edge where the reef drops away. It is optimistic because it has depth.

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#FF6B5B
c2#F9E1D4
c3#A7CDD9
c4#3D7691
Color 1 - coral-reef-1#FF6B5B
Color 2 - coral-reef-2#F9E1D4
Color 3 - coral-reef-3#A7CDD9
Color 4 - coral-reef-4#3D7691
Color 5 - coral-reef-5#0E2A38