What are the hex codes in the Cocoa & Pewter Breeze palette?

The Cocoa & Pewter Breeze color palette consists of Cocoa #73684C, Stone #A38580, Pewter #829CAF, Silver #B1C2CB.

How should I use the Cocoa & Pewter Breeze palette on a website?

Use Silver #B1C2CB as the background, Cocoa #73684C for text, Pewter #829CAF for buttons and links, and Stone #A38580 for accents. No pair inside the palette reaches 4.5:1, so add black or white for body text.

Which colors in Cocoa & Pewter Breeze have enough contrast for text?

The highest-contrast pair is #73684C on #B1C2CB with a ratio of 3:1, which passes WCAG AA for large text only.

#73684CCocoa

#A38580Stone

#829CAFPewter

#B1C2CBSilver

Cocoa & Pewter Breeze color palette

Muted Vintage Brown Gray

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Cocoa	`#73684C`	`rgb(115, 104, 76)`	`hsl(43, 20%, 37%)`	`oklch(52.0% 0.044 89)`
Stone	`#A38580`	`rgb(163, 133, 128)`	`hsl(9, 16%, 57%)`	`oklch(64.3% 0.038 29)`
Pewter	`#829CAF`	`rgb(130, 156, 175)`	`hsl(205, 22%, 60%)`	`oklch(67.9% 0.041 240)`
Silver	`#B1C2CB`	`rgb(177, 194, 203)`	`hsl(201, 20%, 75%)`	`oklch(80.4% 0.023 231)`

Why it works and how to use it

Cocoa & Pewter Breeze is a muted complementary color palette tagged muted, vintage, brown. Near-complementary hues (about 162° apart) make this a high-contrast, attention-grabbing combination. Saturation stays low across the board, giving it a calm, editorial feel. Warm and cool hues are mixed, which adds depth.

The palette holds together thanks to its complementary hue relationship and a soft light-to-dark ladder (75% down to 37% lightness). A natural fit for websites, presentations and branding.

Background: Silver (#B1C2CB) is the lightest color, so it belongs on large surfaces.
Text: Cocoa (#73684C) on #B1C2CB gives 3:1, enough for large headings only.
Primary: Pewter (#829CAF) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Stone (#A38580) 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 Cocoa & Pewter Breeze

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

#73684C

#A38580

#829CAF

#B1C2CB

Color-blind check: under protanopia and deuteranopia, Stone and Pewter become hard to tell apart, so do not rely on that pair alone to carry meaning.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#73684C` on `#B1C2CB`	Aa	3:1	AA large only
`#73684C` on `#829CAF`	Aa	1.92:1	Fail
`#A38580` on `#B1C2CB`	Aa	1.84:1	Fail
`#73684C` on `#A38580`	Aa	1.63:1	Fail
`#829CAF` on `#B1C2CB`	Aa	1.56:1	Fail
`#A38580` on `#829CAF`	Aa	1.18:1	Fail

Similar palettes 24 more in this mood