Moccasin

#fbebd6

Soft warm beige with subdued peach glow

Save
Share

About Moccasin

Moccasin reads like the moment a paper label turns from fresh to settled in your hand. It's a pale, creamy yellow with a softer, more "casual" warmth than , and it doesn't lean peach-clay the way does. Compared with , Moccasin keeps a bit more body and softness, so it feels less like a washed-out background and more like a gentle fill.

I use it as the one you reach for when you want brightness without the rosy lift or the muted drift. It works well in onboarding screens, card headers, and empty-state illustrations in product and fintech apps where you need warmth that stays calm. You'll also see it in retail packaging and healthcare and wellness UI for labels and callouts that should feel friendly but not sugary.

One quirk: because it's light and low-key, it pairs best with a slightly darker cream or a warm gray base so it doesn't blend into generic off-white margins. When you layer it over white, keep a clear spacing rhythm so it stays readable as a distinct tone.

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

On Gray 100 #f5f5f5

Aa
1.07:1Fail

On Gray 900 #18181b

Aa
15.15:1AAA

On Black #000000

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

Create a gradient with Moccasin

Open the generator with this color pre-loaded.

Start creating