Bay
#b3e2d3
Airy teal-blue with baylike green warmth for layouts
About Bay
Bay is the one that actually has warmth without looking washed out. It's lighter and more saturated than Antiguan, which means it reads as a real color choice instead of a whisper. You're getting actual presence here, the kind that doesn't need darker neighbors to prove it exists, but it's still restrained enough that it won't overwhelm a layout.
Reach for this in product interfaces, wellness dashboards, and light-mode design systems where you want something approachable but with enough backbone to anchor a page. It sits between Caribbean's weight and Cold Wave's clinical lean. Unlike Caribbean, Bay won't feel heavy in tight spaces. Unlike Cold Wave, it's got enough green warmth that it doesn't read as purely technical. It holds its color story cleanly across screens.
The saturation means it pairs best with minimal accent work or warm neutrals, don't crowd it. Use it as a primary surface or a secondary zone that has real breathing room. It's the shade that works harder than it looks.
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.