#5A5934
#776D5C
#BE957B
#DFACA6
#73684CCocoa
#A38580Stone
#829CAFPewter
#B1C2CBSilver
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.
Color codes click any value to copy
| Swatch | 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
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 SecondaryCard title
Card title
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.
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
#A1C6CA
#AC976F
#A086A3
#347175
#6D5B3A
#6F658B
#678962
#BAB3E4
#BEC2DE
#A2B98F
#9696AB
#927553
#645762
#777F9B
#888D72
#A0A793
#58737F
#9E8A87
#8EAEC2
#C6B48B
#5D4037
#8D6E63
#BCAAA4
#EFEBE9
#4B3832
#854442
#BE9B7B
#FFF4E6
#8C6A5D
#C6A48E
#E9D8C0
#5C7A6B
#9E6B73
#C99CA2
#E9D5D3
#F7F2EF
#3D272C
#9B7981
#AC9498
#E4C8CE
#DFCEAD
#BFA797
#96978E
#6A8667
#6B4936
#6D6541
#869884
#ADD7D2
#875659
#AD8A8C
#839AB9
#95A78C
#626442
#57879F
#B5889C
#9BB2C2
#475C4E
#BEA5CC
#CCC49F
#CDC3D7
#94875B
#C4C0BF
#FAD0AB
#FFDEE6
#B2DFD2
#859577
#776A4C
#41271C
#666A77
#A58265
#93A3C2
#C7D4A7
#4C5577
#628B6D
#AD8178
#BD9C99
#CAAB80
#B193A4
#A46268
#874A2D
#8A784C
#A3897C
#BFA58B
#C1C1B5
#81775C
#999997
#B5E4CC
#E5FDDE
#75837A
#A6885E
#ABACAA
#EEEABE