Dark Orchestra to Batch Brew color palette

231C15Dark Orchestra 6C5A48Baby Bear F4E9DEGardenia BDB1A3Ashes to Ashes 987D65Gazelle 453B32Batch Brew

Open in generator Export PNG, PDF, ASE…

About this palette

Dark Orchestra to Batch Brew is a 6-color muted palette: #231C15 (Dark Orchestra), #6C5A48 (Baby Bear), #F4E9DE (Gardenia), #BDB1A3 (Ashes to Ashes), #987D65 (Gazelle), #453B32 (Batch Brew). It mixes gray, brown, white, orange tones and feels warm overall. The strongest text pairing is #231C15 on #F4E9DE with a contrast ratio of 14.06:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark Orchestra	rgb(35, 28, 21)	hsl(30, 25%, 11%)
Baby Bear	rgb(108, 90, 72)	hsl(30, 20%, 35%)
Gardenia	rgb(244, 233, 222)	hsl(30, 50%, 91%)
Ashes to Ashes	rgb(189, 177, 163)	hsl(32, 16%, 69%)
Gazelle	rgb(152, 125, 101)	hsl(28, 20%, 50%)
Batch Brew	rgb(69, 59, 50)	hsl(28, 16%, 23%)

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.

Aa14.06:1 Super#231C15 on #F4E9DE
Aa14.06:1 Super#F4E9DE on #231C15
Aa9.12:1 Very good#F4E9DE on #453B32
Aa9.12:1 Very good#453B32 on #F4E9DE
Aa8.00:1 Very good#231C15 on #BDB1A3
Aa8.00:1 Very good#BDB1A3 on #231C15
Aa5.50:1 Good#6C5A48 on #F4E9DE
Aa5.50:1 Good#F4E9DE on #6C5A48

Color blindness preview

CSS variables

/* Dark Orchestra to Batch Brew — https://swatchly.xyz/palette/231c15-6c5a48-f4e9de-bdb1a3-987d65-453b32 */
:root {
  --dark-orchestra: #231c15;
  --baby-bear: #6c5a48;
  --gardenia: #f4e9de;
  --ashes-to-ashes: #bdb1a3;
  --gazelle: #987d65;
  --batch-brew: #453b32;
}

Tailwind CSS v4

/* Dark Orchestra to Batch Brew — https://swatchly.xyz/palette/231c15-6c5a48-f4e9de-bdb1a3-987d65-453b32 */
@theme {
  --color-dark-orchestra: #231c15;
  --color-dark-orchestra-50: #faf4ef;
  --color-dark-orchestra-100: #f0eae4;
  --color-dark-orchestra-200: #ddd6cf;
  --color-dark-orchestra-300: #c8bfb7;
  --color-dark-orchestra-400: #a9a097;
  --color-dark-orchestra-500: #8d847b;
  --color-dark-orchestra-600: #726961;
  --color-dark-orchestra-700: #5a534b;
  --color-dark-orchestra-800: #464039;
  --color-dark-orchestra-900: #36302b;
  --color-dark-orchestra-950: #231c15;
  --color-baby-bear: #6c5a48;
  --color-baby-bear-50: #fff3e7;
  --color-baby-bear-100: #f6e9dc;
  --color-baby-bear-200: #e6d6c7;
  --color-baby-bear-300: #d2c1b0;
  --color-baby-bear-400: #b5a290;
  --color-baby-bear-500: #9c8875;
  --color-baby-bear-600: #826f5d;
  --color-baby-bear-700: #6c5a48;
  --color-baby-bear-800: #554637;
  --color-baby-bear-900: #423528;
  --color-baby-bear-950: #2a2117;
  --color-gardenia: #f4e9de;
  --color-gardenia-50: #faf4ee;
  --color-gardenia-100: #f4e9de;
  --color-gardenia-200: #ded6ce;
  --color-gardenia-300: #c8bfb6;
  --color-gardenia-400: #a9a096;
  --color-gardenia-500: #8e847a;
  --color-gardenia-600: #736a61;
  --color-gardenia-700: #5c544b;
  --color-gardenia-800: #484139;
  --color-gardenia-900: #38322b;
  --color-gardenia-950: #231e1a;
  --color-ashes-to-ashes: #bdb1a3;
  --color-ashes-to-ashes-50: #f4ede4;
  --color-ashes-to-ashes-100: #e9e0d6;
  --color-ashes-to-ashes-200: #d4cabe;
  --color-ashes-to-ashes-300: #bdb1a3;
  --color-ashes-to-ashes-400: #a09487;
  --color-ashes-to-ashes-500: #877c6e;
  --color-ashes-to-ashes-600: #6e6457;
  --color-ashes-to-ashes-700: #595044;
  --color-ashes-to-ashes-800: #473f35;
  --color-ashes-to-ashes-900: #393129;
  --color-ashes-to-ashes-950: #231e18;
  --color-gazelle: #987d65;
  --color-gazelle-50: #fff2e7;
  --color-gazelle-100: #f9e6d6;
  --color-gazelle-200: #e7d1be;
  --color-gazelle-300: #d2b9a3;
  --color-gazelle-400: #b49981;
  --color-gazelle-500: #987d65;
  --color-gazelle-600: #7d644d;
  --color-gazelle-700: #654e39;
  --color-gazelle-800: #503c2a;
  --color-gazelle-900: #3f2e1f;
  --color-gazelle-950: #281c11;
  --color-batch-brew: #453b32;
  --color-batch-brew-50: #fbf4ed;
  --color-batch-brew-100: #f1eae3;
  --color-batch-brew-200: #dfd6cd;
  --color-batch-brew-300: #c8beb4;
  --color-batch-brew-400: #a99d93;
  --color-batch-brew-500: #8c8177;
  --color-batch-brew-600: #70665c;
  --color-batch-brew-700: #584f46;
  --color-batch-brew-800: #453b32;
  --color-batch-brew-900: #342d27;
  --color-batch-brew-950: #201b17;
}