#F3F5E9Linen
#9E7F00Olive
#794F15Coffee
#495344Graphite

Fresh Olive & Coffee color palette

WarmEarthyWhiteBrownGray
Open in generator
Ask AI about this palette: ChatGPTClaudePerplexity

Fresh Olive & Coffee is a analogous color palette tagged warm, earthy, white. Analogous neighbors on the wheel (Linen, Olive, Coffee) give it a natural, low-tension flow. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

Color codes click any value to copy

SwatchNameHEXRGBHSLOKLCH
Linen#F3F5E9rgb(243, 245, 233)hsl(70, 38%, 94%)oklch(96.5% 0.016 114)
Olive#9E7F00rgb(158, 127, 0)hsl(48, 100%, 31%)oklch(60.8% 0.124 92)
Coffee#794F15rgb(121, 79, 21)hsl(35, 70%, 28%)oklch(46.4% 0.090 70)
Graphite#495344rgb(73, 83, 68)hsl(100, 10%, 30%)oklch(42.9% 0.027 135)

Why it works and how to use it

The palette holds together thanks to its analogous hue relationship and a strong light-to-dark ladder (94% down to 28% lightness). A natural fit for wellness, organic and outdoor brands.

  • Background: Linen (#F3F5E9) is the lightest color, so it belongs on large surfaces.
  • Text: Graphite (#495344) on #F3F5E9 gives 7.31:1, passing WCAG AAA.
  • Primary: Olive (#9E7F00) is the most saturated mid-tone; use it for buttons and links (3.47:1 against the background, fine for UI elements).
  • Accent: Coffee (#794F15) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Linen on Graphite at 7.31:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Fresh Olive & Coffee

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary
Card title
Card title
Card title
Roles are assigned by lightness.

Color blindness simulation

#F3F5E9
#9E7F00
#794F15
#495344

Color-blind check: under protanopia, Coffee and Graphite become hard to tell apart, so do not rely on that pair alone to carry meaning.

Contrast check WCAG ratios between palette colors

PairSampleRatioLevel
#F3F5E9 on #495344Aa7.31:1AAA
#F3F5E9 on #794F15Aa6.47:1AA
#F3F5E9 on #9E7F00Aa3.47:1AA large only
#9E7F00 on #495344Aa2.11:1Fail
#9E7F00 on #794F15Aa1.87:1Fail
#794F15 on #495344Aa1.13:1Fail

Similar palettes 24 more in this mood

More warm palettes →More earthy palettes →More white palettes →More brown palettes →More gray palettes →