English Walnut to Gothic Color Palette

About this palette

English Walnut to Gothic is a 5-color muted palette: #3B2C26 (English Walnut), #BCDAE0 (Quick-Freeze), #544339 (Turtle), #9DA5B5 (Robotic Gods), #6B898D (Gothic). It mixes gray tones and feels balanced overall. The strongest text pairing is #3B2C26 on #BCDAE0 with a contrast ratio of 9.05:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
English Walnut	rgb(59, 44, 38)	hsl(17, 22%, 19%)
Quick-Freeze	rgb(188, 218, 224)	hsl(190, 37%, 81%)
Turtle	rgb(84, 67, 57)	hsl(22, 19%, 28%)
Robotic Gods	rgb(157, 165, 181)	hsl(220, 14%, 66%)
Gothic	rgb(107, 137, 141)	hsl(187, 14%, 49%)

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.

Aa9.05:1 Very good#3B2C26 on #BCDAE0
Aa9.05:1 Very good#BCDAE0 on #3B2C26
Aa6.36:1 Good#BCDAE0 on #544339
Aa6.36:1 Good#544339 on #BCDAE0
Aa5.39:1 Good#3B2C26 on #9DA5B5
Aa5.39:1 Good#9DA5B5 on #3B2C26
Aa3.79:1 Poor#544339 on #9DA5B5
Aa3.79:1 Poor#9DA5B5 on #544339

Color blindness preview

CSS variables

/* English Walnut to Gothic — https://swatchly.xyz/palette/3b2c26-bcdae0-544339-9da5b5-6b898d */
:root {
  --english-walnut: #3b2c26;
  --quick-freeze: #bcdae0;
  --turtle: #544339;
  --robotic-gods: #9da5b5;
  --gothic: #6b898d;
}

Tailwind CSS v4

/* English Walnut to Gothic — https://swatchly.xyz/palette/3b2c26-bcdae0-544339-9da5b5-6b898d */
@theme {
  --color-english-walnut: #3b2c26;
  --color-english-walnut-50: #fef2ee;
  --color-english-walnut-100: #f5e8e3;
  --color-english-walnut-200: #e3d4ce;
  --color-english-walnut-300: #cebdb6;
  --color-english-walnut-400: #af9c95;
  --color-english-walnut-500: #938179;
  --color-english-walnut-600: #77665f;
  --color-english-walnut-700: #5f4f49;
  --color-english-walnut-800: #4a3d37;
  --color-english-walnut-900: #3b2c26;
  --color-english-walnut-950: #231b18;
  --color-quick-freeze: #bcdae0;
  --color-quick-freeze-50: #e5f6fa;
  --color-quick-freeze-100: #d9ecf0;
  --color-quick-freeze-200: #bcdae0;
  --color-quick-freeze-300: #aac3c8;
  --color-quick-freeze-400: #89a5aa;
  --color-quick-freeze-500: #6e8a90;
  --color-quick-freeze-600: #557075;
  --color-quick-freeze-700: #415a5e;
  --color-quick-freeze-800: #31474b;
  --color-quick-freeze-900: #24363a;
  --color-quick-freeze-950: #152224;
  --color-turtle: #544339;
  --color-turtle-50: #fef2ec;
  --color-turtle-100: #f5e8e1;
  --color-turtle-200: #e4d4cb;
  --color-turtle-300: #cfbeb4;
  --color-turtle-400: #b29f94;
  --color-turtle-500: #988479;
  --color-turtle-600: #7d6b60;
  --color-turtle-700: #66554c;
  --color-turtle-800: #544339;
  --color-turtle-900: #40342c;
  --color-turtle-950: #29201b;
  --color-robotic-gods: #9da5b5;
  --color-robotic-gods-50: #f2f6ff;
  --color-robotic-gods-100: #e8edf7;
  --color-robotic-gods-200: #d4dae6;
  --color-robotic-gods-300: #bdc4d2;
  --color-robotic-gods-400: #9da5b5;
  --color-robotic-gods-500: #818998;
  --color-robotic-gods-600: #676e7d;
  --color-robotic-gods-700: #505764;
  --color-robotic-gods-800: #3e434f;
  --color-robotic-gods-900: #2f333d;
  --color-robotic-gods-950: #1c1f26;
  --color-gothic: #6b898d;
  --color-gothic-50: #e7f8fb;
  --color-gothic-100: #daeef1;
  --color-gothic-200: #c3dbde;
  --color-gothic-300: #a9c4c8;
  --color-gothic-400: #87a5a9;
  --color-gothic-500: #6b898d;
  --color-gothic-600: #526f73;
  --color-gothic-700: #3e585c;
  --color-gothic-800: #2f4548;
  --color-gothic-900: #223638;
  --color-gothic-950: #142223;
}