Stroopwafel to Whiskey Color Palette

About this palette

Stroopwafel to Whiskey is a 5-color warm, earthy, vintage, monochromatic palette: #A96C44 (Stroopwafel), #5C3E2D (Peat Brown), #F6C4A9 (Shrimp Toast), #3C2A21 (English Walnut), #D29166 (Whiskey). It mixes orange, brown, gray tones and feels warm overall. The strongest text pairing is #F6C4A9 on #3C2A21 with a contrast ratio of 8.66:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Stroopwafel	rgb(169, 108, 68)	hsl(24, 43%, 46%)
Peat Brown	rgb(92, 62, 45)	hsl(22, 34%, 27%)
Shrimp Toast	rgb(246, 196, 169)	hsl(21, 81%, 81%)
English Walnut	rgb(60, 42, 33)	hsl(20, 29%, 18%)
Whiskey	rgb(210, 145, 102)	hsl(24, 55%, 61%)

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.

Aa8.66:1 Very good#F6C4A9 on #3C2A21
Aa8.66:1 Very good#3C2A21 on #F6C4A9
Aa6.14:1 Good#5C3E2D on #F6C4A9
Aa6.14:1 Good#F6C4A9 on #5C3E2D
Aa5.17:1 Good#3C2A21 on #D29166
Aa5.17:1 Good#D29166 on #3C2A21
Aa3.66:1 Poor#5C3E2D on #D29166
Aa3.66:1 Poor#D29166 on #5C3E2D

Color blindness preview

CSS variables

/* Stroopwafel to Whiskey — https://swatchly.xyz/palette/a96c44-5c3e2d-f6c4a9-3c2a21-d29166 */
:root {
  --stroopwafel: #a96c44;
  --peat-brown: #5c3e2d;
  --shrimp-toast: #f6c4a9;
  --english-walnut: #3c2a21;
  --whiskey: #d29166;
}

Tailwind CSS v4

/* Stroopwafel to Whiskey — https://swatchly.xyz/palette/a96c44-5c3e2d-f6c4a9-3c2a21-d29166 */
@theme {
  --color-stroopwafel: #a96c44;
  --color-stroopwafel-50: #fff0e7;
  --color-stroopwafel-100: #ffe1cf;
  --color-stroopwafel-200: #fac6a6;
  --color-stroopwafel-300: #e6ac87;
  --color-stroopwafel-400: #c78962;
  --color-stroopwafel-500: #a96c44;
  --color-stroopwafel-600: #8d542e;
  --color-stroopwafel-700: #74411d;
  --color-stroopwafel-800: #5d3111;
  --color-stroopwafel-900: #4a2509;
  --color-stroopwafel-950: #311603;
  --color-peat-brown: #5c3e2d;
  --color-peat-brown-50: #fff2eb;
  --color-peat-brown-100: #fde6d9;
  --color-peat-brown-200: #edd1c2;
  --color-peat-brown-300: #d9baa9;
  --color-peat-brown-400: #bc9b88;
  --color-peat-brown-500: #a2806d;
  --color-peat-brown-600: #876654;
  --color-peat-brown-700: #6e5141;
  --color-peat-brown-800: #5c3e2d;
  --color-peat-brown-900: #463024;
  --color-peat-brown-950: #2d1d14;
  --color-shrimp-toast: #f6c4a9;
  --color-shrimp-toast-50: #ffece2;
  --color-shrimp-toast-100: #ffddcb;
  --color-shrimp-toast-200: #f6c4a9;
  --color-shrimp-toast-300: #dcb099;
  --color-shrimp-toast-400: #bf9178;
  --color-shrimp-toast-500: #a5775e;
  --color-shrimp-toast-600: #895e46;
  --color-shrimp-toast-700: #704a34;
  --color-shrimp-toast-800: #5b3926;
  --color-shrimp-toast-900: #472b1b;
  --color-shrimp-toast-950: #2e190e;
  --color-english-walnut: #3c2a21;
  --color-english-walnut-50: #fff2ec;
  --color-english-walnut-100: #f7e8e0;
  --color-english-walnut-200: #e5d3cb;
  --color-english-walnut-300: #d0bcb2;
  --color-english-walnut-400: #b19b91;
  --color-english-walnut-500: #957f75;
  --color-english-walnut-600: #79645a;
  --color-english-walnut-700: #604e45;
  --color-english-walnut-800: #4a3b33;
  --color-english-walnut-900: #3c2a21;
  --color-english-walnut-950: #231a15;
  --color-whiskey: #d29166;
  --color-whiskey-50: #fff3eb;
  --color-whiskey-100: #ffe6d6;
  --color-whiskey-200: #ffccab;
  --color-whiskey-300: #edb38e;
  --color-whiskey-400: #d29166;
  --color-whiskey-500: #b4764b;
  --color-whiskey-600: #975b32;
  --color-whiskey-700: #7c461f;
  --color-whiskey-800: #633511;
  --color-whiskey-900: #4f2707;
  --color-whiskey-950: #331702;
}