What are the hex codes in the Cocoa & Sage Field palette?

The Cocoa & Sage Field color palette consists of Beige #F0FFE2, Sage #A8B67F, Cocoa #8E5704, Jet #35311D.

How should I use the Cocoa & Sage Field palette on a website?

Use Beige #F0FFE2 as the background, Jet #35311D for text, Cocoa #8E5704 for buttons and links, and Sage #A8B67F for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Beige on Jet at 12.5:1.

Which colors in Cocoa & Sage Field have enough contrast for text?

The highest-contrast pair is #F0FFE2 on #35311D with a ratio of 12.5:1, which passes WCAG AA for normal text.

#F0FFE2Beige

#A8B67FSage

#8E5704Cocoa

#35311DJet

Cocoa & Sage Field color palette

Modern Earthy Beige Brown

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Beige	`#F0FFE2`	`rgb(240, 255, 226)`	`hsl(91, 100%, 94%)`	`oklch(98.1% 0.041 130)`
Sage	`#A8B67F`	`rgb(168, 182, 127)`	`hsl(75, 27%, 61%)`	`oklch(75.2% 0.076 120)`
Cocoa	`#8E5704`	`rgb(142, 87, 4)`	`hsl(36, 95%, 29%)`	`oklch(50.7% 0.110 68)`
Jet	`#35311D`	`rgb(53, 49, 29)`	`hsl(50, 29%, 16%)`	`oklch(31.2% 0.033 98)`

Why it works and how to use it

Cocoa & Sage Field is a vivid analogous color palette tagged modern, earthy, beige. Analogous neighbors on the wheel (Beige, Sage, Cocoa) give it a natural, low-tension flow. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. The overall temperature is warm.

With 4 chromatic colors, Cocoa takes the lead while the rest support. Lightness runs from 16% to 94%. Well suited to wellness, organic and outdoor brands.

Background: Beige (#F0FFE2) is the lightest color, so it belongs on large surfaces.
Text: Jet (#35311D) on #F0FFE2 gives 12.5:1, passing WCAG AAA.
Primary: Cocoa (#8E5704) is the most saturated mid-tone; use it for buttons and links (5.72:1 against the background, fine for UI elements).
Accent: Sage (#A8B67F) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Beige on Jet at 12.5:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Cocoa & Sage Field

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

Roles are assigned by lightness.

Color blindness simulation

#F0FFE2

#A8B67F

#8E5704

#35311D

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#F0FFE2` on `#35311D`	Aa	12.5:1	AAA
`#A8B67F` on `#35311D`	Aa	6.01:1	AA
`#F0FFE2` on `#8E5704`	Aa	5.72:1	AA
`#A8B67F` on `#8E5704`	Aa	2.75:1	Fail
`#8E5704` on `#35311D`	Aa	2.19:1	Fail
`#F0FFE2` on `#A8B67F`	Aa	2.08:1	Fail

Similar palettes 24 more in this mood