What are the hex codes in the Butter & Jam palette?

The Butter & Jam color palette consists of Peach #FFF3B0, Marigold #E09F3E, Cranberry #9E2A2B, Rosewood #540B0E.

How should I use the Butter & Jam palette on a website?

Use Peach #FFF3B0 as the background, Rosewood #540B0E for text, Marigold #E09F3E for buttons and links, and Cranberry #9E2A2B for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Peach on Rosewood at 13.07:1.

Which colors in Butter & Jam have enough contrast for text?

The highest-contrast pair is #FFF3B0 on #540B0E with a ratio of 13.07:1, which passes WCAG AA for normal text.

#FFF3B0Peach

#E09F3EMarigold

#9E2A2BCranberry

#540B0ERosewood

Butter & Jam color palette

Food Dark Warm Red

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Peach	`#FFF3B0`	`rgb(255, 243, 176)`	`hsl(51, 100%, 85%)`	`oklch(95.8% 0.086 99)`
Marigold	`#E09F3E`	`rgb(224, 159, 62)`	`hsl(36, 72%, 56%)`	`oklch(74.9% 0.134 74)`
Cranberry	`#9E2A2B`	`rgb(158, 42, 43)`	`hsl(359, 58%, 39%)`	`oklch(46.8% 0.152 25)`
Rosewood	`#540B0E`	`rgb(84, 11, 14)`	`hsl(358, 77%, 19%)`	`oklch(29.1% 0.104 25)`

Why it works and how to use it

Butter & Jam is a vivid analogous color palette tagged food, dark, warm. Analogous neighbors on the wheel (Peach, Marigold, Cranberry) 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, Marigold takes the lead while the rest support. Lightness runs from 19% to 85%. Well suited to menus and packaging.

Background: Peach (#FFF3B0) is the lightest color, so it belongs on large surfaces.
Text: Rosewood (#540B0E) on #FFF3B0 gives 13.07:1, passing WCAG AAA.
Primary: Marigold (#E09F3E) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Cranberry (#9E2A2B) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Peach on Rosewood at 13.07:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Butter & Jam

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

#FFF3B0

#E09F3E

#9E2A2B

#540B0E

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
`#FFF3B0` on `#540B0E`	Aa	13.07:1	AAA
`#FFF3B0` on `#9E2A2B`	Aa	6.63:1	AA
`#E09F3E` on `#540B0E`	Aa	6.43:1	AA
`#E09F3E` on `#9E2A2B`	Aa	3.26:1	AA large only
`#FFF3B0` on `#E09F3E`	Aa	2.03:1	Fail
`#9E2A2B` on `#540B0E`	Aa	1.97:1	Fail

Similar palettes 24 more in this mood