Escargot to Dark Color Palette

About this palette

Escargot to Dark is a 5-color muted, warm, vintage palette: #FFF1D7 (Escargot), #CBAF7D (Fawn), #607B98 (Quiet Harbour), #734B00 (Chocolate Rain), #1E2430 (Dark). It mixes white, yellow, blue, brown, gray tones and feels warm overall. The strongest text pairing is #FFF1D7 on #1E2430 with a contrast ratio of 13.93:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Escargot	rgb(255, 241, 215)	hsl(39, 100%, 92%)
Fawn	rgb(203, 175, 125)	hsl(38, 43%, 64%)
Quiet Harbour	rgb(96, 123, 152)	hsl(211, 23%, 49%)
Chocolate Rain	rgb(115, 75, 0)	hsl(39, 100%, 23%)
Dark	rgb(30, 36, 48)	hsl(220, 23%, 15%)

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.

Aa13.93:1 Super#FFF1D7 on #1E2430
Aa13.93:1 Super#1E2430 on #FFF1D7
Aa7.38:1 Very good#CBAF7D on #1E2430
Aa7.38:1 Very good#1E2430 on #CBAF7D
Aa6.88:1 Good#FFF1D7 on #734B00
Aa6.88:1 Good#734B00 on #FFF1D7
Aa3.93:1 Poor#FFF1D7 on #607B98
Aa3.93:1 Poor#607B98 on #FFF1D7

Color blindness preview

CSS variables

/* Escargot to Dark — https://swatchly.xyz/palette/fff1d7-cbaf7d-607b98-734b00-1e2430 */
:root {
  --escargot: #fff1d7;
  --fawn: #cbaf7d;
  --quiet-harbour: #607b98;
  --chocolate-rain: #734b00;
  --dark: #1e2430;
}

Tailwind CSS v4

/* Escargot to Dark — https://swatchly.xyz/palette/fff1d7-cbaf7d-607b98-734b00-1e2430 */
@theme {
  --color-escargot: #fff1d7;
  --color-escargot-50: #fff1d7;
  --color-escargot-100: #f1e8d8;
  --color-escargot-200: #dfd5c2;
  --color-escargot-300: #cabea9;
  --color-escargot-400: #ac9f88;
  --color-escargot-500: #91846d;
  --color-escargot-600: #766a54;
  --color-escargot-700: #5f543f;
  --color-escargot-800: #4b412f;
  --color-escargot-900: #3a3223;
  --color-escargot-950: #241e14;
  --color-fawn: #cbaf7d;
  --color-fawn-50: #fdeccd;
  --color-fawn-100: #f3dfbd;
  --color-fawn-200: #dfc9a0;
  --color-fawn-300: #cbaf7d;
  --color-fawn-400: #ad9262;
  --color-fawn-500: #947949;
  --color-fawn-600: #7a6133;
  --color-fawn-700: #644d22;
  --color-fawn-800: #513d16;
  --color-fawn-900: #41300e;
  --color-fawn-950: #291d05;
  --color-quiet-harbour: #607b98;
  --color-quiet-harbour-50: #eef6ff;
  --color-quiet-harbour-100: #e1efff;
  --color-quiet-harbour-200: #cadff6;
  --color-quiet-harbour-300: #b3cbe5;
  --color-quiet-harbour-400: #93adca;
  --color-quiet-harbour-500: #7894b2;
  --color-quiet-harbour-600: #607b98;
  --color-quiet-harbour-700: #49627c;
  --color-quiet-harbour-800: #364c63;
  --color-quiet-harbour-900: #273a4e;
  --color-quiet-harbour-950: #162432;
  --color-chocolate-rain: #734b00;
  --color-chocolate-rain-50: #fff3e4;
  --color-chocolate-rain-100: #ffe7c8;
  --color-chocolate-rain-200: #f4d1a4;
  --color-chocolate-rain-300: #e0b986;
  --color-chocolate-rain-400: #c3995f;
  --color-chocolate-rain-500: #a77d40;
  --color-chocolate-rain-600: #8b6225;
  --color-chocolate-rain-700: #734b00;
  --color-chocolate-rain-800: #5a3a01;
  --color-chocolate-rain-900: #462c00;
  --color-chocolate-rain-950: #2d1b00;
  --color-dark: #1e2430;
  --color-dark-50: #f1f5fe;
  --color-dark-100: #e6ebf6;
  --color-dark-200: #d1d8e4;
  --color-dark-300: #bac1cf;
  --color-dark-400: #9aa2b1;
  --color-dark-500: #808796;
  --color-dark-600: #676e7c;
  --color-dark-700: #525865;
  --color-dark-800: #404651;
  --color-dark-900: #323741;
  --color-dark-950: #1e2430;
}