Buttercream

#efe0cd

Softer, cooler butter-yellow cream for airy layouts

Save
Share

About Buttercream

Buttercream sits in that tricky zone where it's almost there but not quite committed. It's got warmth, yeah, but it's been diluted past the point where you can point to the peach undertone and name it. Compared to 's confident clay-and-apricot stance or even 's soft-but-readable presence, this one's playing it safer. It reads less like a choice and more like the color that shows up when you're hedging your bets.

You'll find it in product packaging for natural or minimal brands, the kind that live on premium grocery shelves. It works in cosmetics packaging, spa apps, and educational interfaces where you need warmth that doesn't feel loud or dated. The lightness keeps it from feeling heavy, which matters when you're designing for simplicity or restraint. It's the shade that disappears into "neutral" faster than its more saturated cousins, which is fine if that's what the brief calls for.

The catch: pair it with anything mid-tone and it flattens hard. It needs either white space around it or something genuinely dark to lean against. Otherwise it just bleeds into the background. Worth testing at actual size before you commit; on screen, especially in dim lighting, the distinction between this and straight cream gets fuzzy fast.

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

On Gray 100 #f5f5f5

Aa
1.19:1Fail

On Gray 900 #18181b

Aa
13.68:1AAA

On Black #000000

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

#eadfce
#ebdecc
#f4e2cf
#eae0c8

Create a gradient with Buttercream

Open the generator with this color pre-loaded.

Start creating