What are the hex codes in the Blue Gray & Cocoa Shore palette?

The Blue Gray & Cocoa Shore color palette consists of Peach Puff #F5D6BC, Blue Gray #64A4CD, Cocoa #8C5A38, Espresso #3D2416.

How should I use the Blue Gray & Cocoa Shore palette on a website?

Use Peach Puff #F5D6BC as the background, Espresso #3D2416 for text, Blue Gray #64A4CD for buttons and links, and Cocoa #8C5A38 for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Peach Puff on Espresso at 10.41:1.

Which colors in Blue Gray & Cocoa Shore have enough contrast for text?

The highest-contrast pair is #F5D6BC on #3D2416 with a ratio of 10.41:1, which passes WCAG AA for normal text.

#F5D6BCPeach Puff

#64A4CDBlue Gray

#8C5A38Cocoa

#3D2416Espresso

Blue Gray & Cocoa Shore color palette

Muted Beige Brown

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Peach Puff	`#F5D6BC`	`rgb(245, 214, 188)`	`hsl(27, 74%, 85%)`	`oklch(89.5% 0.049 62)`
Blue Gray	`#64A4CD`	`rgb(100, 164, 205)`	`hsl(203, 51%, 60%)`	`oklch(69.2% 0.089 238)`
Cocoa	`#8C5A38`	`rgb(140, 90, 56)`	`hsl(24, 43%, 38%)`	`oklch(51.5% 0.082 54)`
Espresso	`#3D2416`	`rgb(61, 36, 22)`	`hsl(22, 47%, 16%)`	`oklch(28.9% 0.045 50)`

Why it works and how to use it

Blue Gray & Cocoa Shore is a complementary color palette tagged muted, beige, brown. Peach Puff and Espresso sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. Neither washed out nor loud, it adapts to most contexts. Warm and cool hues are mixed, which adds depth.

With 4 chromatic colors, Blue Gray takes the lead while the rest support. Lightness runs from 16% to 85%. Well suited to websites, presentations and branding.

Background: Peach Puff (#F5D6BC) is the lightest color, so it belongs on large surfaces.
Text: Espresso (#3D2416) on #F5D6BC gives 10.41:1, passing WCAG AAA.
Primary: Blue Gray (#64A4CD) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Cocoa (#8C5A38) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Peach Puff on Espresso at 10.41:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Blue Gray & Cocoa Shore

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

#F5D6BC

#64A4CD

#8C5A38

#3D2416

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
`#F5D6BC` on `#3D2416`	Aa	10.41:1	AAA
`#64A4CD` on `#3D2416`	Aa	5.29:1	AA
`#F5D6BC` on `#8C5A38`	Aa	4.19:1	AA large only
`#8C5A38` on `#3D2416`	Aa	2.49:1	Fail
`#64A4CD` on `#8C5A38`	Aa	2.13:1	Fail
`#F5D6BC` on `#64A4CD`	Aa	1.97:1	Fail

:root {
  --peach-puff: #F5D6BC;
  --blue-gray: #64A4CD;
  --cocoa: #8C5A38;
  --espresso: #3D2416;
}

$peach-puff: #F5D6BC;
$blue-gray: #64A4CD;
$cocoa: #8C5A38;
$espresso: #3D2416;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'peach-puff': '#F5D6BC',
        'blue-gray': '#64A4CD',
        'cocoa': '#8C5A38',
        'espresso': '#3D2416',
      },
    },
  },
};

{
  "name": "Blue Gray & Cocoa Shore",
  "colors": [
    "#F5D6BC",
    "#64A4CD",
    "#8C5A38",
    "#3D2416"
  ]
}

background: linear-gradient(135deg, #F5D6BC, #64A4CD, #8C5A38, #3D2416);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-06-20 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood