What are the hex codes in the Beige & Forest palette?

The Beige & Forest color palette consists of Eggshell #F3EBDD, Oat #DCCFB8, Juniper #436449, Raisin #1C2A20.

How should I use the Beige & Forest palette on a website?

Use Eggshell #F3EBDD as the background, Raisin #1C2A20 for text, Oat #DCCFB8 for buttons and links, and Juniper #436449 for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Eggshell on Raisin at 12.66:1.

Which colors in Beige & Forest have enough contrast for text?

The highest-contrast pair is #F3EBDD on #1C2A20 with a ratio of 12.66:1, which passes WCAG AA for normal text.

#F3EBDDEggshell

#DCCFB8Oat

#436449Juniper

#1C2A20Raisin

Beige & Forest color palette

Dark Muted Minimal White Beige Gray

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Eggshell	`#F3EBDD`	`rgb(243, 235, 221)`	`hsl(38, 48%, 91%)`	`oklch(94.3% 0.021 82)`
Oat	`#DCCFB8`	`rgb(220, 207, 184)`	`hsl(38, 34%, 79%)`	`oklch(85.9% 0.034 82)`
Juniper	`#436449`	`rgb(67, 100, 73)`	`hsl(131, 20%, 33%)`	`oklch(47.0% 0.058 149)`
Raisin	`#1C2A20`	`rgb(28, 42, 32)`	`hsl(137, 20%, 14%)`	`oklch(26.9% 0.027 153)`

Why it works and how to use it

Beige & Forest is a split color palette tagged dark, muted, minimal. The hues span about 99°, enough contrast to create a focal point without the harshness of true complements. Neither washed out nor loud, it adapts to most contexts. The overall temperature is warm.

With 4 chromatic colors, Oat takes the lead while the rest support. Lightness runs from 14% to 91%. Well suited to websites, presentations and branding.

Background: Eggshell (#F3EBDD) is the lightest color, so it belongs on large surfaces.
Text: Raisin (#1C2A20) on #F3EBDD gives 12.66:1, passing WCAG AAA.
Primary: Oat (#DCCFB8) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Juniper (#436449) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Eggshell on Raisin at 12.66:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Beige & Forest

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

#F3EBDD

#DCCFB8

#436449

#1C2A20

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
`#F3EBDD` on `#1C2A20`	Aa	12.66:1	AAA
`#DCCFB8` on `#1C2A20`	Aa	9.75:1	AAA
`#F3EBDD` on `#436449`	Aa	5.62:1	AA
`#DCCFB8` on `#436449`	Aa	4.33:1	AA large only
`#436449` on `#1C2A20`	Aa	2.25:1	Fail
`#F3EBDD` on `#DCCFB8`	Aa	1.3:1	Fail

Similar palettes 24 more in this mood