Cream and Sugar to Batch Brew color palette

DBCEBACream and Sugar 9DA8CBOld World 93866CWilderness 596780Admiral Blue 453E31Batch Brew

About this palette

Cream and Sugar to Batch Brew is a 5-color muted palette: #DBCEBA (Cream and Sugar), #9DA8CB (Old World), #93866C (Wilderness), #596780 (Admiral Blue), #453E31 (Batch Brew). It mixes gray, blue, yellow tones and feels cool overall. The strongest text pairing is #DBCEBA on #453E31 with a contrast ratio of 6.82:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cream and Sugar	rgb(219, 206, 186)	hsl(36, 31%, 79%)
Old World	rgb(157, 168, 203)	hsl(226, 31%, 71%)
Wilderness	rgb(147, 134, 108)	hsl(40, 15%, 50%)
Admiral Blue	rgb(89, 103, 128)	hsl(218, 18%, 43%)
Batch Brew	rgb(69, 62, 49)	hsl(39, 17%, 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.

Aa6.82:1 Good#DBCEBA on #453E31
Aa6.82:1 Good#453E31 on #DBCEBA
Aa4.48:1 Poor#9DA8CB on #453E31
Aa4.48:1 Poor#453E31 on #9DA8CB
Aa3.69:1 Poor#DBCEBA on #596780
Aa3.69:1 Poor#596780 on #DBCEBA

Color blindness preview

CSS variables

/* Cream and Sugar to Batch Brew — https://swatchly.xyz/palette/dbceba-9da8cb-93866c-596780-453e31 */
:root {
  --cream-and-sugar: #dbceba;
  --old-world: #9da8cb;
  --wilderness: #93866c;
  --admiral-blue: #596780;
  --batch-brew: #453e31;
}

Tailwind CSS v4

/* Cream and Sugar to Batch Brew — https://swatchly.xyz/palette/dbceba-9da8cb-93866c-596780-453e31 */
@theme {
  --color-cream-and-sugar: #dbceba;
  --color-cream-and-sugar-50: #f7efe3;
  --color-cream-and-sugar-100: #ece3d6;
  --color-cream-and-sugar-200: #dbceba;
  --color-cream-and-sugar-300: #c4b9a8;
  --color-cream-and-sugar-400: #a79b88;
  --color-cream-and-sugar-500: #8d816e;
  --color-cream-and-sugar-600: #736856;
  --color-cream-and-sugar-700: #5d5343;
  --color-cream-and-sugar-800: #4a4133;
  --color-cream-and-sugar-900: #393226;
  --color-cream-and-sugar-950: #241e16;
  --color-old-world: #9da8cb;
  --color-old-world-50: #f5f8ff;
  --color-old-world-100: #eaefff;
  --color-old-world-200: #d4dcf6;
  --color-old-world-300: #bdc7e4;
  --color-old-world-400: #9da8cb;
  --color-old-world-500: #818bad;
  --color-old-world-600: #656f8f;
  --color-old-world-700: #4f5775;
  --color-old-world-800: #3c435d;
  --color-old-world-900: #2c3348;
  --color-old-world-950: #1a1e2e;
  --color-wilderness: #93866c;
  --color-wilderness-50: #fcf5e5;
  --color-wilderness-100: #f3ebd9;
  --color-wilderness-200: #e1d7c3;
  --color-wilderness-300: #ccc1a9;
  --color-wilderness-400: #aea188;
  --color-wilderness-500: #93866c;
  --color-wilderness-600: #786b53;
  --color-wilderness-700: #60553e;
  --color-wilderness-800: #4b422e;
  --color-wilderness-900: #3a3221;
  --color-wilderness-950: #251f13;
  --color-admiral-blue: #596780;
  --color-admiral-blue-50: #f0f5ff;
  --color-admiral-blue-100: #e0ebfd;
  --color-admiral-blue-200: #cad6ec;
  --color-admiral-blue-300: #b1bfd7;
  --color-admiral-blue-400: #909eb9;
  --color-admiral-blue-500: #74829c;
  --color-admiral-blue-600: #596780;
  --color-admiral-blue-700: #455167;
  --color-admiral-blue-800: #353f52;
  --color-admiral-blue-900: #283141;
  --color-admiral-blue-950: #181e29;
  --color-batch-brew: #453e31;
  --color-batch-brew-50: #f9f5ec;
  --color-batch-brew-100: #f0eae1;
  --color-batch-brew-200: #ddd7cb;
  --color-batch-brew-300: #c7bfb2;
  --color-batch-brew-400: #a79f91;
  --color-batch-brew-500: #8b8375;
  --color-batch-brew-600: #70685b;
  --color-batch-brew-700: #585145;
  --color-batch-brew-800: #453e31;
  --color-batch-brew-900: #342f27;
  --color-batch-brew-950: #201d16;
}