Cotton Ball
#f2f7fd
Soft near-white gray with cotton-cool restraint
About Cotton Ball
Cotton Ball is what happens when you want the safety of near-white but need it to lean slightly warmer than the blues sitting next to it. It's got enough restraint that it won't fight your dark backgrounds, but it lacks that cyan whisper Bubbles carries or the deliberate coolness of Cold Canada. This is the shade that disappears most easily, which is exactly the point sometimes.
Reach for it in interfaces where warmth matters without drawing attention: healthcare dashboards, educational platforms, financial apps where the background should feel approachable rather than sterile. It works for body text in dark mode, form inputs, secondary UI elements, anywhere you need contrast that reads as "designed" rather than "default." It's more saturated than Polar Bear in a Blizzard but trades that color's soft cream undertone for something closer to true neutral.
The catch: that warmth only reads right if you're already pairing it with genuinely warm or middle-gray neutrals. Sit it next to the cooler grays in this family and it'll feel slightly out of step, like it's not quite committed to either direction.
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.