Soft Butter

#f4e1b6

Warm butter-yellow green for light, cozy UI

Save
Share

About Soft Butter

I keep Soft Butter in the back of my brain like a pantry staple: a pale, creamy green-leaning yellow that looks gentler than it reads on paper. Compared with , it feels lighter and less beige, with a calmer saturation. It also sits cooler than , but not so subdued that it turns neutral like Cloud of .

Soft Butter works when you want "warm background" without that extra yellowness that pulls focus. I use it for product pages and ecommerce modules where people are the main event, and for health, wellness, and CPG layouts that need a smooth field for photos and type. In UI, it's great in settings like onboarding screens, editorial landing pages, and SaaS panels that shouldn't compete with charts and dark green accents.

Quirk: next to true paper white, it holds its own, but if you pair it with overly warm browns, it can start to look a bit flat. I like it with deeper greens or espresso tones to keep it grounded.

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.29:1Fail

On Gray 100 #f5f5f5

Aa
1.18:1Fail

On Gray 900 #18181b

Aa
13.74:1AAA

On Black #000000

Aa
16.29: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

#f6e3b4
#f4e0bb
#f7dfaf

Create a gradient with Soft Butter

Open the generator with this color pre-loaded.

Start creating