What are the hex codes in the Avocado & Putty Mood palette?

The Avocado & Putty Mood color palette consists of Raisin #2C1810, Coffee #6E4E3F, Avocado #5E892F, Putty #E0C097.

How should I use the Avocado & Putty Mood palette on a website?

Use Putty #E0C097 as the background, Raisin #2C1810 for text, Avocado #5E892F for buttons and links, and Coffee #6E4E3F for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Raisin on Putty at 9.76:1.

Which colors in Avocado & Putty Mood have enough contrast for text?

The highest-contrast pair is #2C1810 on #E0C097 with a ratio of 9.76:1, which passes WCAG AA for normal text.

#2C1810Raisin

#6E4E3FCoffee

#5E892FAvocado

#E0C097Putty

Avocado & Putty Mood color palette

Dark Black Brown Green Beige

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Raisin	`#2C1810`	`rgb(44, 24, 16)`	`hsl(17, 47%, 12%)`	`oklch(23.4% 0.036 42)`
Coffee	`#6E4E3F`	`rgb(110, 78, 63)`	`hsl(19, 27%, 34%)`	`oklch(45.4% 0.050 46)`
Avocado	`#5E892F`	`rgb(94, 137, 47)`	`hsl(89, 49%, 36%)`	`oklch(57.9% 0.129 131)`
Putty	`#E0C097`	`rgb(224, 192, 151)`	`hsl(34, 54%, 74%)`	`oklch(82.5% 0.066 74)`

Why it works and how to use it

Avocado & Putty Mood is a dark, split color palette tagged dark, black, brown. The hues span about 72°, 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, Avocado takes the lead while the rest support. Lightness runs from 12% to 74%. Well suited to dark-mode interfaces and gaming.

Background: Putty (#E0C097) is the lightest color, so it belongs on large surfaces.
Text: Raisin (#2C1810) on #E0C097 gives 9.76:1, passing WCAG AAA.
Primary: Avocado (#5E892F) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Coffee (#6E4E3F) for highlights, badges and hover states.

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

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

BrandFeaturesPricingBlogGet started

Design faster with Avocado & Putty Mood

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

#2C1810

#6E4E3F

#5E892F

#E0C097

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
`#2C1810` on `#E0C097`	Aa	9.76:1	AAA
`#6E4E3F` on `#E0C097`	Aa	4.3:1	AA large only
`#2C1810` on `#5E892F`	Aa	4.09:1	AA large only
`#5E892F` on `#E0C097`	Aa	2.39:1	Fail
`#2C1810` on `#6E4E3F`	Aa	2.27:1	Fail
`#6E4E3F` on `#5E892F`	Aa	1.8:1	Fail

Similar palettes 24 more in this mood