coolvibrant
Tropical Lagoon Color Palette
Tropical Lagoon is a cool and vibrant color palette of 5 colors: Lapis Lazuli (#05668d), Teal (#028090), Light Sea Green (#00a896), Mint (#02c39a) and Pale Goldenrod (#f0f3bd). Its dominant hue is blue.
The darkest color, Lapis Lazuli, on the lightest, Pale Goldenrod, gives a 5.54:1 contrast ratio — enough for body text at WCAG AA. 1 pair in this palette passes AA for normal text. Mint (#02c39a) is its most saturated color and a natural choice for buttons and links.
Colors
- Lapis Lazuli
- Teal
- Light Sea Green
- Mint
- Pale Goldenrod
CSS Output
:root {
--tropical-lagoon-1: #05668d;
--tropical-lagoon-2: #028090;
--tropical-lagoon-3: #00a896;
--tropical-lagoon-4: #02c39a;
--tropical-lagoon-5: #f0f3bd;
}Tropical Lagoon on a Website
A quick preview on a landing page: the most colorful colors become the primary and accent, a light one the surface. For a more realistic look across many designs, open it in the Palette Visualizer below.
See it on real designs
This is a single preview. The Palette Visualizer shows the palette on 11 designs — dashboards, mobile apps, pricing and blog pages, posters and business cards — lets you change which color plays which role, switch to dark mode and check contrast.
Accessible Color Combinations
Pairs from this palette that work as text on a background, with their WCAG contrast ratio. AA needs 4.5:1 for body text; large text needs 3:1.
- Lapis Lazuli on Pale Goldenrod#05668d on #f0f3bd5.54:1AA
- Teal on Pale Goldenrod#028090 on #f0f3bd4.06:1AA Large