#9FE2BFSeafoam Green hex code: #9FE2BF · RGB 159, 226, 191. Also called sea foam, seafoam.
Seafoam green is a pale green with a blue tint, named after the color of foam on breaking waves. Values vary between sources; #9FE2BF is a widely used version. It sits between mint and aqua: lighter and softer than both.
Seafoam is a staple of coastal and beach brands, spas, retro 1950s styling (kitchen appliances and cars of that era made it famous), nurseries and summer campaigns.
Seafoam is very light, so use dark text on it and avoid white labels. It pairs naturally with sand, coral, navy and white. For a button, step down to a deep seafoam like #1E8360 to give white text enough contrast.
Popular color names rarely have one official value. "Reference" values are the ones commonly listed in general color references; "HueWiz pick" values are lighter, deeper or muted versions chosen for interface work. Click a code to copy it.
#9FE2BFrgb(159, 226, 191) · HueWiz pick#93E9D4rgb(147, 233, 212) · HueWiz pick#A8D5BArgb(168, 213, 186) · HueWiz pick#5FB892rgb(95, 184, 146) · HueWiz pickThe same base color in a light and a dark theme. Surfaces and text are tinted with seafoam green's hue; links are adjusted until they reach 4.5:1 against the surface. The accent comes from the first palette below.
Spring collection
Designed around seafoam green.
A short paragraph shows how body text reads on this surface, with an inline link in the brand color.
#EFFAF3 · text #12241B · link #3C7D5ESpring collection
Designed around seafoam green.
A short paragraph shows how body text reads on this surface, with an inline link in the brand color.
#091710 · text #E9F1EC · link #9FE2BFHand-picked combinations that work with seafoam green. Hover a swatch to see its code; click to copy.
WCAG 2.x asks for 4.5:1 for normal text (AA), 3:1 for large text and 7:1 for AAA. Ratios are truncated, not rounded, so a pass shown here is a real pass. Check your exact pairs in the contrast checker.
| Pairing | Ratio | Normal text | Large text |
|---|---|---|---|
| White text on seafoam green | 1.48:1 | Fail | Fail |
| Black text on seafoam green | 14.10:1 | AAA | AAA |
| Seafoam Green text on white | 1.48:1 | Fail | Fail |
| Seafoam Green text on near-black #111111 | 12.68:1 | AAA | AAA |
| White text on deeper seafoam green #428364 | 4.50:1 | AA | AAA |
An 11-step 50–950 ramp generated in OKLCH from #9FE2BF. Light steps suit backgrounds and borders, middle steps buttons, dark steps text. This is a generated ramp, not an official Tailwind palette.
@import "tailwindcss";
@theme {
--color-seafoam-green-50: #E2FFEF;
--color-seafoam-green-100: #C1FDDD;
--color-seafoam-green-200: #ABECCA;
--color-seafoam-green-300: #94D3B2;
--color-seafoam-green-400: #7FB498;
--color-seafoam-green-500: #6A967F;
--color-seafoam-green-600: #557A67;
--color-seafoam-green-700: #446152;
--color-seafoam-green-800: #334A3E;
--color-seafoam-green-900: #23332B;
--color-seafoam-green-950: #151E19;
--color-seafoam-green: #9FE2BF;
}:root {
--seafoam-green: #9FE2BF;
--seafoam-green-rgb: 159 226 191;
--seafoam-green-light: #C1FDDD;
--seafoam-green-dark: #334A3E;
}
.btn-seafoam-green {
background: #428364;
color: #000000;
}Need semantic roles (surface, text, primary, accent) and exports? Open seafoam green in the Tailwind color generator.
#9FE2BF is the value HueWiz uses for seafoam green; it equals rgb(159, 226, 191). Other common versions include #93E9D4 (blue seafoam), #A8D5BA (muted seafoam), #5FB892 (deep seafoam).
With an HSL hue of 149° and 54% saturation, seafoam green reads as a cool green.
Use dark text. White on #9FE2BF measures 1.48:1 and black measures 14.10:1; WCAG AA needs 4.5:1 for normal text. For white text, deepen it to about #428364.
Try coastal (#9FE2BF, #F2E3C6, #FFFFFF); retro diner (#9FE2BF, #FF6F61, #FFF6E5); calm spa (#F3FAF6, #A8D5BA, #5FB892). Each palette above can be copied or opened in the HueWiz studio.
Seafoam Green isn't a CSS keyword. These built-in CSS colors are the nearest by perceptual (OKLab) distance; lower ΔE means closer.