Sweet Butter
#fffcd7
Softer, butter-yellow off-white for calm gray panels
About Sweet Butter
You can spot Sweet Butter the second you put it next to a true off-white. It reads like a faintly golden glaze over paper, not a clean near-white drifting grayward. Compared to Cheesecake, it holds more warmth and feels smoother, less punchy in the yellow. Next to Sun City and Lit, it stays gentler and more "spreadable" in tone, not as daylight-bright or crisp.
I reach for it when I want a soft, light background that still has personality in the corner of the UI, especially for food and retail brands, packaging mockups, and product cards where photography needs a buttery lift. It also works well for onboarding screens, pricing pages, and admin surfaces in hospitality and consumer services where the layout needs to feel friendly without turning creamy. Pair it with neutral grays for type and dividers so it doesn't compete.
Quirk: if your design leans too cool, the yellow bias shows up fast. If that happens, warm the supporting grays slightly and keep accents modest for a calmer result.
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.