Batch Brew to Swamp Sessions Color Palette

About this palette

Batch Brew to Swamp Sessions is a 5-color muted palette: #46392F (Batch Brew), #F5F8FF (Ghost White), #D0BEB6 (Mothy), #5A6E82 (Plumbeous), #95967E (Swamp Sessions). It mixes gray, white, blue tones and feels cool overall. The strongest text pairing is #46392F on #F5F8FF with a contrast ratio of 10.47:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Batch Brew	rgb(70, 57, 47)	hsl(26, 20%, 23%)
Ghost White	rgb(245, 248, 255)	hsl(222, 100%, 98%)
Mothy	rgb(208, 190, 182)	hsl(18, 22%, 76%)
Plumbeous	rgb(90, 110, 130)	hsl(210, 18%, 43%)
Swamp Sessions	rgb(149, 150, 126)	hsl(62, 10%, 54%)

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.

Aa10.47:1 Very good#46392F on #F5F8FF
Aa10.47:1 Very good#F5F8FF on #46392F
Aa6.21:1 Good#46392F on #D0BEB6
Aa6.21:1 Good#D0BEB6 on #46392F
Aa4.95:1 Good#F5F8FF on #5A6E82
Aa4.95:1 Good#5A6E82 on #F5F8FF
Aa3.68:1 Poor#46392F on #95967E
Aa3.68:1 Poor#95967E on #46392F

Color blindness preview

CSS variables

/* Batch Brew to Swamp Sessions — https://swatchly.xyz/palette/46392f-f5f8ff-d0beb6-5a6e82-95967e */
:root {
  --batch-brew: #46392f;
  --ghost-white: #f5f8ff;
  --mothy: #d0beb6;
  --plumbeous: #5a6e82;
  --swamp-sessions: #95967e;
}

Tailwind CSS v4

/* Batch Brew to Swamp Sessions — https://swatchly.xyz/palette/46392f-f5f8ff-d0beb6-5a6e82-95967e */
@theme {
  --color-batch-brew: #46392f;
  --color-batch-brew-50: #fcf3ec;
  --color-batch-brew-100: #f3e9e1;
  --color-batch-brew-200: #e1d5cc;
  --color-batch-brew-300: #cbbdb2;
  --color-batch-brew-400: #ab9c90;
  --color-batch-brew-500: #8e7f74;
  --color-batch-brew-600: #726459;
  --color-batch-brew-700: #594d44;
  --color-batch-brew-800: #46392f;
  --color-batch-brew-900: #342c25;
  --color-batch-brew-950: #201a15;
  --color-ghost-white: #f5f8ff;
  --color-ghost-white-50: #f5f8ff;
  --color-ghost-white-100: #ecedf2;
  --color-ghost-white-200: #d7d9de;
  --color-ghost-white-300: #c0c2c8;
  --color-ghost-white-400: #a0a2a8;
  --color-ghost-white-500: #84868d;
  --color-ghost-white-600: #696c72;
  --color-ghost-white-700: #53555b;
  --color-ghost-white-800: #404247;
  --color-ghost-white-900: #313337;
  --color-ghost-white-950: #1e1f22;
  --color-mothy: #d0beb6;
  --color-mothy-50: #fef3ef;
  --color-mothy-100: #f5e9e4;
  --color-mothy-200: #e3d5cf;
  --color-mothy-300: #d0beb6;
  --color-mothy-400: #af9f97;
  --color-mothy-500: #94837c;
  --color-mothy-600: #786961;
  --color-mothy-700: #60524c;
  --color-mothy-800: #4c3f3a;
  --color-mothy-900: #3b302c;
  --color-mothy-950: #251d1a;
  --color-plumbeous: #5a6e82;
  --color-plumbeous-50: #eef6ff;
  --color-plumbeous-100: #dfedfb;
  --color-plumbeous-200: #c9daea;
  --color-plumbeous-300: #b0c3d6;
  --color-plumbeous-400: #8fa4b9;
  --color-plumbeous-500: #74899d;
  --color-plumbeous-600: #5a6e82;
  --color-plumbeous-700: #455769;
  --color-plumbeous-800: #344453;
  --color-plumbeous-900: #273441;
  --color-plumbeous-950: #17202a;
  --color-swamp-sessions: #95967e;
  --color-swamp-sessions-50: #f1f2e2;
  --color-swamp-sessions-100: #e5e5d4;
  --color-swamp-sessions-200: #cfd0bc;
  --color-swamp-sessions-300: #b6b7a1;
  --color-swamp-sessions-400: #95967e;
  --color-swamp-sessions-500: #7c7d66;
  --color-swamp-sessions-600: #64654f;
  --color-swamp-sessions-700: #50513d;
  --color-swamp-sessions-800: #3f402f;
  --color-swamp-sessions-900: #323223;
  --color-swamp-sessions-950: #202015;
}