Earthy combinationsOrganic foundation

Olive and Cream Color Combination

Olive is a green with yellow in it, so it sits easily beside a warm cream — the pair feels like canvas and foliage.

Hex codes #808000 and #FFFDD0 — a organic foundation pair with a 4.04:1 contrast ratio between the two colors.

Values for this combination

Olive
RGB
rgb(128, 128, 0)
HSL
hsl(60, 100%, 25%)
Hex
#808000
Cream
RGB
rgb(255, 253, 208)
HSL
hsl(57, 100%, 91%)
Hex
#FFFDD0

Contrast between Olive and Cream

Contrast ratio 4.04:1. This only decides whether one color of the pair can carry text on the other — the colors themselves always work side by side.

AA · Normal text (≥ 4.5:1)FAIL
AA · Large text (≥ 3:1)PASS
AAA · Normal text (≥ 7:1)FAIL
AAA · Large text (≥ 4.5:1)FAIL
Aa

Cream text on a Olive surface, at 4.04:1.

Aa

Olive text on a Cream surface, at 4.04:1.

Where this pair works

  • Organic food
  • Sustainability reports
  • Outdoor gear

Give Olive (#808000) roughly 60% of the surface, Cream (#FFFDD0) about 30%, and leave the last 10% for the neutral below. That split is what keeps a two-color combination from turning into a fight.

A five-color set from this pair

Olive and Cream as a working palette: a pale tint of the lighter color for backgrounds, both colors as they are, a deep shade of the darker color for text and a neutral for everything in between.

  • Pale tint#faf8e1backgrounds and large surfaces · closest to OldLace
  • Primary#808000the dominant color · closest to Olive
  • Secondary#FFFDD0the accent color · closest to Cream
  • Deep shade#4d4d00text, borders and icons · closest to ArmyGreen
  • Neutral#f6f6f4dividers and quiet surfaces · closest to WhiteSmoke

Explore Olive and Cream on their own

More color combinations

Olive and Cream are a organic foundation pair: olive is a green with yellow in it, so it sits easily beside a warm cream — the pair feels like canvas and foliage.

Frequently asked questions

Yes — this pair is used for organic food, sustainability reports, outdoor gear. The two colors measure 4.04:1 against each other, which is enough for large text and graphics, but not for body text.

Good to know

  • Every value on this page is calculated from #808000 and #FFFDD0 — nothing is hardcoded.
  • Build a longer palette out of Olive or Cream in the palette generator, or test your own text pair in the contrast checker.

Put this combination to work

Turn Olive and Cream into a full palette, a gradient or a set of shades — or check the pair against WCAG.

From the blog