What are the hex codes in the Oat Milk palette?

The Oat Milk color palette consists of Hazelnut #A68A64, Sand #C2B280, Bone #E6DCC3, Smoke #FAF7F0.

How should I use the Oat Milk palette on a website?

Use Smoke #FAF7F0 as the background, Hazelnut #A68A64 for text, Bone #E6DCC3 for buttons and links, and Sand #C2B280 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Oat Milk have enough contrast for text?

The highest-contrast pair is #A68A64 on #FAF7F0 with a ratio of 3.05:1, which passes WCAG AA for large text only.

#A68A64Hazelnut

#C2B280Sand

#E6DCC3Bone

#FAF7F0Smoke

Oat Milk color palette

Muted Warm Earthy Brown Beige White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Hazelnut	`#A68A64`	`rgb(166, 138, 100)`	`hsl(35, 27%, 52%)`	`oklch(65.0% 0.063 75)`
Sand	`#C2B280`	`rgb(194, 178, 128)`	`hsl(45, 35%, 63%)`	`oklch(76.5% 0.069 92)`
Bone	`#E6DCC3`	`rgb(230, 220, 195)`	`hsl(43, 41%, 83%)`	`oklch(89.6% 0.035 89)`
Smoke	`#FAF7F0`	`rgb(250, 247, 240)`	`hsl(42, 50%, 96%)`	`oklch(97.7% 0.010 87)`

Why it works and how to use it

Oat Milk is a pastel light, monochromatic color palette tagged muted, warm, earthy. All four colors sit within 10° of hue, so the scheme reads as one color explored across light and dark. The colors are light and airy, which suits friendly, soft-spoken brands. The overall temperature is warm.

The palette holds together thanks to its monochromatic hue relationship and a soft light-to-dark ladder (96% down to 52% lightness). A natural fit for wellness, organic and outdoor brands.

Background: Smoke (#FAF7F0) is the lightest color, so it belongs on large surfaces.
Text: Hazelnut (#A68A64) on #FAF7F0 gives 3.05:1, enough for large headings only.
Primary: Bone (#E6DCC3) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Sand (#C2B280) for highlights, badges and hover states.

No pair inside the palette reaches 4.5:1, so add black or white for body text.

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

BrandFeaturesPricingBlogGet started

Design faster with Oat Milk

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

#A68A64

#C2B280

#E6DCC3

#FAF7F0

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
`#A68A64` on `#FAF7F0`	Aa	3.05:1	AA large only
`#A68A64` on `#E6DCC3`	Aa	2.39:1	Fail
`#C2B280` on `#FAF7F0`	Aa	1.97:1	Fail
`#A68A64` on `#C2B280`	Aa	1.55:1	Fail
`#C2B280` on `#E6DCC3`	Aa	1.54:1	Fail
`#E6DCC3` on `#FAF7F0`	Aa	1.28:1	Fail

Similar palettes 24 more in this mood