What are the hex codes in the Powder Blue & Stone Shore palette?

The Powder Blue & Stone Shore color palette consists of Powder Blue #B2DFD2, Stone #859577, Cocoa #776A4C, Espresso #41271C.

How should I use the Powder Blue & Stone Shore palette on a website?

Use Powder Blue #B2DFD2 as the background, Espresso #41271C for text, Cocoa #776A4C for buttons and links, and Stone #859577 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Powder Blue on Espresso at 9.39:1.

Which colors in Powder Blue & Stone Shore have enough contrast for text?

The highest-contrast pair is #B2DFD2 on #41271C with a ratio of 9.39:1, which passes WCAG AA for normal text.

#B2DFD2Powder Blue

#859577Stone

#776A4CCocoa

#41271CEspresso

Powder Blue & Stone Shore color palette

Muted Minimal Gray Brown

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Powder Blue	`#B2DFD2`	`rgb(178, 223, 210)`	`hsl(163, 41%, 79%)`	`oklch(86.8% 0.050 176)`
Stone	`#859577`	`rgb(133, 149, 119)`	`hsl(92, 12%, 53%)`	`oklch(64.9% 0.047 131)`
Cocoa	`#776A4C`	`rgb(119, 106, 76)`	`hsl(42, 22%, 38%)`	`oklch(52.9% 0.047 87)`
Espresso	`#41271C`	`rgb(65, 39, 28)`	`hsl(18, 40%, 18%)`	`oklch(30.3% 0.044 44)`

Why it works and how to use it

Powder Blue & Stone Shore is a complementary color palette tagged muted, minimal, gray. Powder Blue 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 3 chromatic colors, Cocoa takes the lead while the rest support. Lightness runs from 18% to 79%. Well suited to websites, presentations and branding.

Background: Powder Blue (#B2DFD2) is the lightest color, so it belongs on large surfaces.
Text: Espresso (#41271C) on #B2DFD2 gives 9.39:1, passing WCAG AAA.
Primary: Cocoa (#776A4C) is the most saturated mid-tone; use it for buttons and links (3.64:1 against the background, fine for UI elements).
Accent: Stone (#859577) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Powder Blue on Espresso at 9.39:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Powder Blue & Stone 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

#B2DFD2

#859577

#776A4C

#41271C

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
`#B2DFD2` on `#41271C`	Aa	9.39:1	AAA
`#859577` on `#41271C`	Aa	4.28:1	AA large only
`#B2DFD2` on `#776A4C`	Aa	3.64:1	AA large only
`#776A4C` on `#41271C`	Aa	2.58:1	Fail
`#B2DFD2` on `#859577`	Aa	2.19:1	Fail
`#859577` on `#776A4C`	Aa	1.66:1	Fail

:root {
  --powder-blue: #B2DFD2;
  --stone: #859577;
  --cocoa: #776A4C;
  --espresso: #41271C;
}

$powder-blue: #B2DFD2;
$stone: #859577;
$cocoa: #776A4C;
$espresso: #41271C;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'powder-blue': '#B2DFD2',
        'stone': '#859577',
        'cocoa': '#776A4C',
        'espresso': '#41271C',
      },
    },
  },
};

{
  "name": "Powder Blue & Stone Shore",
  "colors": [
    "#B2DFD2",
    "#859577",
    "#776A4C",
    "#41271C"
  ]
}

background: linear-gradient(135deg, #B2DFD2, #859577, #776A4C, #41271C);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2024-11-08 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood