What are the hex codes in the Mango Lagoon palette?

The Mango Lagoon color palette consists of Amber #FFB300, Cadet #00A896, Emerald #02C39A, Vanilla #F0F3BD.

How should I use the Mango Lagoon palette on a website?

Use Vanilla #F0F3BD as the background, Cadet #00A896 for text, Amber #FFB300 for buttons and links, and Emerald #02C39A for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Mango Lagoon have enough contrast for text?

The highest-contrast pair is #00A896 on #F0F3BD with a ratio of 2.59:1, which does not meet WCAG AA; add a darker or lighter neutral for body text.

#FFB300Amber

#00A896Cadet

#02C39AEmerald

#F0F3BDVanilla

Mango Lagoon color palette

Tropical Teal

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Amber	`#FFB300`	`rgb(255, 179, 0)`	`hsl(42, 100%, 50%)`	`oklch(81.8% 0.171 78)`
Cadet	`#00A896`	`rgb(0, 168, 150)`	`hsl(174, 100%, 33%)`	`oklch(65.6% 0.118 182)`
Emerald	`#02C39A`	`rgb(2, 195, 154)`	`hsl(167, 98%, 39%)`	`oklch(72.7% 0.143 171)`
Vanilla	`#F0F3BD`	`rgb(240, 243, 189)`	`hsl(63, 69%, 85%)`	`oklch(94.9% 0.070 110)`

Why it works and how to use it

Mango Lagoon is a vivid complementary color palette tagged tropical, teal. Near-complementary hues (about 132° apart) make this a high-contrast, attention-grabbing combination. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Amber takes the lead while the rest support. Lightness runs from 33% to 85%. Well suited to websites, presentations and branding.

Background: Vanilla (#F0F3BD) is the lightest color, so it belongs on large surfaces.
Text: Cadet (#00A896) on #F0F3BD gives 2.59:1, so pair it with a darker neutral for body copy.
Primary: Amber (#FFB300) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Emerald (#02C39A) for highlights, badges and hover states.

No pair inside the palette reaches 4.5:1, so add black or white for body text.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Mango Lagoon

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#FFB300

#00A896

#02C39A

#F0F3BD

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#00A896` on `#F0F3BD`	Aa	2.59:1	Fail
`#02C39A` on `#F0F3BD`	Aa	1.97:1	Fail
`#FFB300` on `#00A896`	Aa	1.66:1	Fail
`#FFB300` on `#F0F3BD`	Aa	1.56:1	Fail
`#00A896` on `#02C39A`	Aa	1.32:1	Fail
`#FFB300` on `#02C39A`	Aa	1.26:1	Fail

Similar palettes 24 more in this mood