Cream color palettes

Use cream color palettes with parchment, oat, tan, and ink tones for editorial layouts, premium brands, portfolios, and readable warm interfaces.

Explore the toolbox
PastelVintageRetroNeonGoldLightDarkWarmColdSummerFallWinterSpringHappyNatureEarthNightSpaceRainbowGradientSunsetSkySeaColorfulSkinFoodCreamCoffeeWeddingChristmasHalloween

How to use cream color palettes

Cream palettes are almost entirely near-whites: butter, oat, peach and greige. They give you a set of paper surfaces for separating sections; the text color, borders and accents mostly have to come from elsewhere.

Where cream palettes work

  • Long-form articles, newsletters and documentation
  • Portfolios, studios and boutique hotel sites
  • Menus, invitations and stationery-style landing pages

Cream is a family of near-whites

The 184 cream palettes are the lightest collection on the site: average lightness is about 77%, and only 9 of 736 swatches are dark. Within that pale range there are three distinct directions, and the right one depends on what will sit on top.

  • Butter cream, slightly yellow: #FEFAE0, #FFFBEB. Pairs well with olive and sage.
  • Oat and peach, slightly pink: #F8EAD8, #FAEDCD. Sits comfortably with warm photography and brown type.
  • Greige, slightly gray: #ECE8DD, #E1D7C6. Works with cool accents such as #579BB1.

The steps are too close to act as borders

Cream palettes often step from one near-white to the next. That works for section bands and card backgrounds, but not for anything that has to be seen as a boundary. #E1D7C6 against #F8F4EA is 1.30:1, and #ECE8DD against it is 1.11:1.

WCAG asks for 3:1 when a border is the only thing that identifies a control, such as a text input. For form fields on cream, use a darker taupe or the ink color, and keep the palette's pale steps for layout.

Picking the ink

Because the collection supplies almost no dark colors, the text color is your decision, and cream costs a little contrast compared with white. A mid gray like #6B7280 is 4.83:1 on white but 4.60:1 on #FEFAE0, still a pass but with almost no margin; anything lighter fails. The cool blue #579BB1 from the greige palette is 2.84:1 on #F8F4EA, so keep it for decoration.

Warm darks hold up better and look less stark than black: #2B2620 is 14.25:1 on #FEFAE0, and #5C5647 is a usable muted text color at 6.94:1.

css
:root {
  --paper: #fefae0;
  --paper-2: #faedcd;   /* section bands */
  --rule: #ccd5ae;      /* decorative only, 1.46:1 */
  --ink: #2b2620;       /* 14.25:1 on --paper */
  --ink-muted: #5c5647; /* 6.94:1 on --paper */
}

Pairing the colors

Use the lightest cream as the page and a slightly darker step for alternating sections or cards. Pair with a warm near-black ink and one muted accent, such as sage, dusty blue or terracotta, for links and buttons.

Contrast and readability

Gray text loses margin on cream: #6B7280 drops from 4.83:1 on white to 4.60:1 on #FEFAE0, and a taupe like #8A8270 is only 3.62:1 there, a fail for body text. Choose a warm dark ink, and give input borders at least 3:1.

Questions

What is the HEX code for cream?
There is no single standard. #FFFDD0 is a widely used value, and CSS has no cream keyword; the nearest named colors are ivory #FFFFF0, cornsilk #FFF8DC, beige #F5F5DC and linen #FAF0E6. The palettes here range from yellow creams like #FEFAE0 to pinker oat tones like #F8EAD8.
Is a cream background easier to read than white?
Some readers find it softer, but there is no strong evidence that it improves reading in general, and it slightly lowers contrast. If you use cream, compensate with a darker text color than you would use on white, and recheck muted text, placeholders and disabled states.

Updated