Sea Foam
#87e0cf
Lighter sea-mint teal for airy, cooling highlights
About Sea Foam
Sea Foam looks like a light spritz of ocean mist on a white card. It's noticeably airier than Opulent Turquoise, and it doesn't carry the same crisp teal bite as Bambino. Compared with Beach Glass, it comes off less saturated and a touch more muted, so it feels more like softened sea air than a deliberately colored accent.
I use this for dashboards and finance apps when the UI needs a secondary tint that stays calm at a glance. Think status pills, quiet info banners, and subtle chart highlights in banking portals, logistics tracking, and subscription management screens. It's also great for media and workflow interfaces where you want a "fresh" hover layer without pushing the rest of the layout.
Pair it with off-white or very light gray, and if your neutrals are warm, it'll tilt greener. It holds up better when your typography has enough contrast weight to keep things readable.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
Variations
Shades
Darker variations, created by mixing toward black.
Tints
Lighter variations, created by mixing toward white.
Tones
Muted variations, created by reducing saturation.
Hues
Hue rotations around the color wheel.
Temperatures
Warm and cool shifts of this color.
Color harmonies
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.
