Bay

#b3e2d3

Airy teal-blue with baylike green warmth for layouts

Save
Share

About Bay

Bay is the one that actually has warmth without looking washed out. It's lighter and more saturated than , 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 's weight and 's clinical lean. Unlike , Bay won't feel heavy in tight spaces. Unlike , 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.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

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

Aa
1.43:1Fail

On Gray 100 #f5f5f5

Aa
1.31:1Fail

On Gray 900 #18181b

Aa
12.43:1AAA

On Black #000000

Aa
14.74:1AAA

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

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Similar colors

Create a gradient with Bay

Open the generator with this color pre-loaded.

Start creating