What are the hex codes in the Brass & Cocoa Mood palette?

The Brass & Cocoa Mood color palette consists of Rosewood #56222E, Cocoa #916009, Brass #A8AC44, Celadon #AEECB1.

How should I use the Brass & Cocoa Mood palette on a website?

Use Celadon #AEECB1 as the background, Rosewood #56222E for text, Cocoa #916009 for buttons and links, and Brass #A8AC44 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Rosewood on Celadon at 9.27:1.

Which colors in Brass & Cocoa Mood have enough contrast for text?

The highest-contrast pair is #56222E on #AEECB1 with a ratio of 9.27:1, which passes WCAG AA for normal text.

#56222ERosewood

#916009Cocoa

#A8AC44Brass

#AEECB1Celadon

Brass & Cocoa Mood color palette

Warm Brown Green

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Rosewood	`#56222E`	`rgb(86, 34, 46)`	`hsl(346, 43%, 24%)`	`oklch(33.1% 0.078 8)`
Cocoa	`#916009`	`rgb(145, 96, 9)`	`hsl(38, 88%, 30%)`	`oklch(52.9% 0.110 73)`
Brass	`#A8AC44`	`rgb(168, 172, 68)`	`hsl(62, 43%, 47%)`	`oklch(72.1% 0.127 111)`
Celadon	`#AEECB1`	`rgb(174, 236, 177)`	`hsl(123, 62%, 80%)`	`oklch(88.6% 0.102 146)`

Why it works and how to use it

Brass & Cocoa Mood is a complementary color palette tagged warm, brown, green. Near-complementary hues (about 137° apart) make this a high-contrast, attention-grabbing combination. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is warm.

It works because the lightness range is wide (24% to 80%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.

Background: Celadon (#AEECB1) is the lightest color, so it belongs on large surfaces.
Text: Rosewood (#56222E) on #AEECB1 gives 9.27:1, passing WCAG AAA.
Primary: Cocoa (#916009) is the most saturated mid-tone; use it for buttons and links (3.98:1 against the background, fine for UI elements).
Accent: Brass (#A8AC44) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Rosewood on Celadon at 9.27:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Brass & Cocoa 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

#56222E

#916009

#A8AC44

#AEECB1

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
`#56222E` on `#AEECB1`	Aa	9.27:1	AAA
`#56222E` on `#A8AC44`	Aa	5.2:1	AA
`#916009` on `#AEECB1`	Aa	3.98:1	AA large only
`#56222E` on `#916009`	Aa	2.33:1	Fail
`#916009` on `#A8AC44`	Aa	2.23:1	Fail
`#A8AC44` on `#AEECB1`	Aa	1.78:1	Fail

Similar palettes 24 more in this mood