Bok Choy
#bccab3
Light, neutral-leaning green for warm, airy layouts
About Bok Choy
Bok Choy sits in that rare spot where a green feels genuinely soft without going pale or apologetic. It's got enough saturation to read as deliberate, but it doesn't have the warmth that makes Big Spender feel optimistic or the depth that gives Ambrosia its weight. This one's cooler, almost grayed, the kind of color that doesn't announce itself but holds better against type than you'd expect.
It works on product interfaces, editorial backgrounds, and health/wellness apps where you need green that feels natural without being loud. Use it as a secondary background, a status color, or a container for content-heavy layouts. Unlike Bitter Melon, which disappears into the background, Bok Choy stays slightly visible. Unlike Big Spender, there's no yellow warmth to apologize for.
Pair it with charcoal or deep greens and it gains definition. Against white it'll read noticeably cooler than Ambrosia does, more neutral territory. That coolness is the tell for where it actually belongs in a system.
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.