English Walnut to Freezing Vapour color palette

3C2B1EEnglish Walnut 5582A5Underwater Moonlight 93BDD1Gentle Sky 674D39Tobacco D0EAF7Freezing Vapour

Open in generator Export PNG, PDF, ASE…

About this palette

English Walnut to Freezing Vapour is a 5-color muted palette: #3C2B1E (English Walnut), #5582A5 (Underwater Moonlight), #93BDD1 (Gentle Sky), #674D39 (Tobacco), #D0EAF7 (Freezing Vapour). It mixes gray, blue, brown tones and feels cool overall. The strongest text pairing is #3C2B1E on #D0EAF7 with a contrast ratio of 10.79:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
English Walnut	rgb(60, 43, 30)	hsl(26, 33%, 18%)
Underwater Moonlight	rgb(85, 130, 165)	hsl(206, 32%, 49%)
Gentle Sky	rgb(147, 189, 209)	hsl(199, 40%, 70%)
Tobacco	rgb(103, 77, 57)	hsl(26, 29%, 31%)
Freezing Vapour	rgb(208, 234, 247)	hsl(200, 71%, 89%)

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.79:1 Very good#3C2B1E on #D0EAF7
Aa10.79:1 Very good#D0EAF7 on #3C2B1E
Aa6.71:1 Good#3C2B1E on #93BDD1
Aa6.71:1 Good#93BDD1 on #3C2B1E
Aa6.23:1 Good#674D39 on #D0EAF7
Aa6.23:1 Good#D0EAF7 on #674D39
Aa3.87:1 Poor#93BDD1 on #674D39
Aa3.87:1 Poor#674D39 on #93BDD1

Color blindness preview

CSS variables

/* English Walnut to Freezing Vapour — https://swatchly.xyz/palette/3c2b1e-5582a5-93bdd1-674d39-d0eaf7 */
:root {
  --english-walnut: #3c2b1e;
  --underwater-moonlight: #5582a5;
  --gentle-sky: #93bdd1;
  --tobacco: #674d39;
  --freezing-vapour: #d0eaf7;
}

Tailwind CSS v4

/* English Walnut to Freezing Vapour — https://swatchly.xyz/palette/3c2b1e-5582a5-93bdd1-674d39-d0eaf7 */
@theme {
  --color-english-walnut: #3c2b1e;
  --color-english-walnut-50: #fff3e9;
  --color-english-walnut-100: #f6e8de;
  --color-english-walnut-200: #e5d4c8;
  --color-english-walnut-300: #d0bdaf;
  --color-english-walnut-400: #b19c8d;
  --color-english-walnut-500: #958071;
  --color-english-walnut-600: #796557;
  --color-english-walnut-700: #604f42;
  --color-english-walnut-800: #4a3c31;
  --color-english-walnut-900: #3c2b1e;
  --color-english-walnut-950: #231a14;
  --color-underwater-moonlight: #5582a5;
  --color-underwater-moonlight-50: #e9f5ff;
  --color-underwater-moonlight-100: #d3ebff;
  --color-underwater-moonlight-200: #b3d7f5;
  --color-underwater-moonlight-300: #97c0e1;
  --color-underwater-moonlight-400: #729fc2;
  --color-underwater-moonlight-500: #5582a5;
  --color-underwater-moonlight-600: #3e698a;
  --color-underwater-moonlight-700: #2c5371;
  --color-underwater-moonlight-800: #1f425b;
  --color-underwater-moonlight-900: #153349;
  --color-underwater-moonlight-950: #0b2030;
  --color-gentle-sky: #93bdd1;
  --color-gentle-sky-50: #dcf4ff;
  --color-gentle-sky-100: #cce9f7;
  --color-gentle-sky-200: #b3d4e4;
  --color-gentle-sky-300: #93bdd1;
  --color-gentle-sky-400: #779fb2;
  --color-gentle-sky-500: #5d8699;
  --color-gentle-sky-600: #466d7f;
  --color-gentle-sky-700: #345767;
  --color-gentle-sky-800: #264553;
  --color-gentle-sky-900: #1c3743;
  --color-gentle-sky-950: #0f222b;
  --color-tobacco: #674d39;
  --color-tobacco-50: #fff3e9;
  --color-tobacco-100: #fbe7d9;
  --color-tobacco-200: #e9d2c1;
  --color-tobacco-300: #d5baa7;
  --color-tobacco-400: #b69a85;
  --color-tobacco-500: #9b7e69;
  --color-tobacco-600: #7e6450;
  --color-tobacco-700: #674d39;
  --color-tobacco-800: #503c2c;
  --color-tobacco-900: #3f2d20;
  --color-tobacco-950: #281b12;
  --color-freezing-vapour: #d0eaf7;
  --color-freezing-vapour-50: #e4f3fb;
  --color-freezing-vapour-100: #d0eaf7;
  --color-freezing-vapour-200: #c3d6e0;
  --color-freezing-vapour-300: #abc1cc;
  --color-freezing-vapour-400: #8ba3af;
  --color-freezing-vapour-500: #718994;
  --color-freezing-vapour-600: #586f7a;
  --color-freezing-vapour-700: #445963;
  --color-freezing-vapour-800: #33454e;
  --color-freezing-vapour-900: #26353d;
  --color-freezing-vapour-950: #162126;
}