Start generating

Beach Dune to Wood Bark color palette

C5BB9FBeach DuneBE9C96Coca Mocha778C9ASea Lion4B6473Night Market443D24Madras332320Wood Bark
Open in generator Export PNG, PDF, ASE…

About this palette

Beach Dune to Wood Bark is a 6-color muted, gradient palette: #C5BB9F (Beach Dune), #BE9C96 (Coca Mocha), #778C9A (Sea Lion), #4B6473 (Night Market), #443D24 (Madras), #332320 (Wood Bark). It mixes yellow, red, gray, blue, brown tones and feels warm overall. The strongest text pairing is #C5BB9F on #332320 with a contrast ratio of 7.83:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Beach Dunergb(197, 187, 159)hsl(44, 25%, 70%)
Coca Mochargb(190, 156, 150)hsl(9, 24%, 67%)
Sea Lionrgb(119, 140, 154)hsl(204, 15%, 54%)
Night Marketrgb(75, 100, 115)hsl(202, 21%, 37%)
Madrasrgb(68, 61, 36)hsl(47, 31%, 20%)
Wood Barkrgb(51, 35, 32)hsl(9, 23%, 16%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

  • Aa7.83:1 Very good#C5BB9F on #332320
  • Aa7.83:1 Very good#332320 on #C5BB9F
  • Aa5.98:1 Good#BE9C96 on #332320
  • Aa5.98:1 Good#332320 on #BE9C96
  • Aa5.66:1 Good#C5BB9F on #443D24
  • Aa5.66:1 Good#443D24 on #C5BB9F
  • Aa4.33:1 Poor#BE9C96 on #443D24
  • Aa4.33:1 Poor#443D24 on #BE9C96

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Beach Dune to Wood Bark — https://swatchly.xyz/palette/c5bb9f-be9c96-778c9a-4b6473-443d24-332320 */
:root {
  --beach-dune: #c5bb9f;
  --coca-mocha: #be9c96;
  --sea-lion: #778c9a;
  --night-market: #4b6473;
  --madras: #443d24;
  --wood-bark: #332320;
}

Tailwind CSS v4

/* Beach Dune to Wood Bark — https://swatchly.xyz/palette/c5bb9f-be9c96-778c9a-4b6473-443d24-332320 */
@theme {
  --color-beach-dune: #c5bb9f;
  --color-beach-dune-50: #f8f2e2;
  --color-beach-dune-100: #eee7d5;
  --color-beach-dune-200: #dad3bd;
  --color-beach-dune-300: #c5bb9f;
  --color-beach-dune-400: #a69d82;
  --color-beach-dune-500: #8c8268;
  --color-beach-dune-600: #726950;
  --color-beach-dune-700: #5b533c;
  --color-beach-dune-800: #48412d;
  --color-beach-dune-900: #383221;
  --color-beach-dune-950: #231f13;
  --color-coca-mocha: #be9c96;
  --color-coca-mocha-50: #fff3f1;
  --color-coca-mocha-100: #fee7e3;
  --color-coca-mocha-200: #edd3ce;
  --color-coca-mocha-300: #dabcb7;
  --color-coca-mocha-400: #be9c96;
  --color-coca-mocha-500: #a1807a;
  --color-coca-mocha-600: #846560;
  --color-coca-mocha-700: #6b4f4a;
  --color-coca-mocha-800: #553d38;
  --color-coca-mocha-900: #422d2a;
  --color-coca-mocha-950: #2a1b19;
  --color-sea-lion: #778c9a;
  --color-sea-lion-50: #ecf7ff;
  --color-sea-lion-100: #e0eef8;
  --color-sea-lion-200: #cbdce7;
  --color-sea-lion-300: #b3c6d2;
  --color-sea-lion-400: #92a7b5;
  --color-sea-lion-500: #778c9a;
  --color-sea-lion-600: #5d717e;
  --color-sea-lion-700: #475a66;
  --color-sea-lion-800: #364650;
  --color-sea-lion-900: #28363e;
  --color-sea-lion-950: #172127;
  --color-night-market: #4b6473;
  --color-night-market-50: #ebf7ff;
  --color-night-market-100: #ddeef9;
  --color-night-market-200: #c9ddea;
  --color-night-market-300: #b2c9d7;
  --color-night-market-400: #92acbb;
  --color-night-market-500: #7892a2;
  --color-night-market-600: #607989;
  --color-night-market-700: #4b6473;
  --color-night-market-800: #394e5b;
  --color-night-market-900: #2a3c47;
  --color-night-market-950: #19262e;
  --color-madras: #443d24;
  --color-madras-50: #faf5e5;
  --color-madras-100: #f0ebd9;
  --color-madras-200: #ded8c2;
  --color-madras-300: #c7c0a7;
  --color-madras-400: #a7a084;
  --color-madras-500: #8b8368;
  --color-madras-600: #6f684e;
  --color-madras-700: #57513a;
  --color-madras-800: #443d24;
  --color-madras-900: #332f1e;
  --color-madras-950: #1f1c10;
  --color-wood-bark: #332320;
  --color-wood-bark-50: #fef2ef;
  --color-wood-bark-100: #f6e8e5;
  --color-wood-bark-200: #e4d3d0;
  --color-wood-bark-300: #cfbcb9;
  --color-wood-bark-400: #b09c98;
  --color-wood-bark-500: #97837f;
  --color-wood-bark-600: #7d6a66;
  --color-wood-bark-700: #675552;
  --color-wood-bark-800: #544441;
  --color-wood-bark-900: #443734;
  --color-wood-bark-950: #332320;
}

Similar palettes