Snowy Summit to English Walnut color palette

About this palette

Snowy Summit to English Walnut is a 5-color muted, cool, earthy palette: #BFD8E7 (Snowy Summit), #B8A7C9 (Novel Lilac), #667855 (Dill), #344733 (Palm Leaf), #41281C (English Walnut). It mixes gray, purple, green, brown tones and feels cool overall. The strongest text pairing is #BFD8E7 on #41281C with a contrast ratio of 9.19:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Snowy Summitrgb(191, 216, 231)hsl(202, 45%, 83%)
Novel Lilacrgb(184, 167, 201)hsl(270, 24%, 72%)
Dillrgb(102, 120, 85)hsl(91, 17%, 40%)
Palm Leafrgb(52, 71, 51)hsl(117, 16%, 24%)
English Walnutrgb(65, 40, 28)hsl(19, 40%, 18%)

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.19:1 Very good#BFD8E7 on #41281C
  • Aa9.19:1 Very good#41281C on #BFD8E7
  • Aa6.77:1 Good#BFD8E7 on #344733
  • Aa6.77:1 Good#344733 on #BFD8E7
  • Aa6.09:1 Good#B8A7C9 on #41281C
  • Aa6.09:1 Good#41281C on #B8A7C9
  • Aa4.49:1 Poor#B8A7C9 on #344733
  • Aa4.49:1 Poor#344733 on #B8A7C9

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Snowy Summit to English Walnut — https://swatchly.xyz/palette/bfd8e7-b8a7c9-667855-344733-41281c */
:root {
  --snowy-summit: #bfd8e7;
  --novel-lilac: #b8a7c9;
  --dill: #667855;
  --palm-leaf: #344733;
  --english-walnut: #41281c;
}

Tailwind CSS v4

/* Snowy Summit to English Walnut — https://swatchly.xyz/palette/bfd8e7-b8a7c9-667855-344733-41281c */
@theme {
  --color-snowy-summit: #bfd8e7;
  --color-snowy-summit-50: #e7f5fe;
  --color-snowy-summit-100: #dbebf5;
  --color-snowy-summit-200: #bfd8e7;
  --color-snowy-summit-300: #acc1ce;
  --color-snowy-summit-400: #8ca3b1;
  --color-snowy-summit-500: #718896;
  --color-snowy-summit-600: #586e7b;
  --color-snowy-summit-700: #445864;
  --color-snowy-summit-800: #34454f;
  --color-snowy-summit-900: #26353e;
  --color-snowy-summit-950: #162127;
  --color-novel-lilac: #b8a7c9;
  --color-novel-lilac-50: #fcf8ff;
  --color-novel-lilac-100: #f7efff;
  --color-novel-lilac-200: #e7dbf4;
  --color-novel-lilac-300: #d4c6e2;
  --color-novel-lilac-400: #b8a7c9;
  --color-novel-lilac-500: #9a89aa;
  --color-novel-lilac-600: #7c6d8c;
  --color-novel-lilac-700: #635471;
  --color-novel-lilac-800: #4d4059;
  --color-novel-lilac-900: #3a2f44;
  --color-novel-lilac-950: #231c2a;
  --color-dill: #667855;
  --color-dill-50: #eefae4;
  --color-dill-100: #e4f1d9;
  --color-dill-200: #d0dfc3;
  --color-dill-300: #bacbab;
  --color-dill-400: #9aad89;
  --color-dill-500: #7f926e;
  --color-dill-600: #667855;
  --color-dill-700: #4f6040;
  --color-dill-800: #3d4b2f;
  --color-dill-900: #2e3a22;
  --color-dill-950: #1b2413;
  --color-palm-leaf: #344733;
  --color-palm-leaf-50: #edf9ec;
  --color-palm-leaf-100: #e2f0e1;
  --color-palm-leaf-200: #ccddcb;
  --color-palm-leaf-300: #b4c7b2;
  --color-palm-leaf-400: #93a891;
  --color-palm-leaf-500: #778c76;
  --color-palm-leaf-600: #5d715c;
  --color-palm-leaf-700: #485a47;
  --color-palm-leaf-800: #344733;
  --color-palm-leaf-900: #293628;
  --color-palm-leaf-950: #182117;
  --color-english-walnut: #41281c;
  --color-english-walnut-50: #fff2ec;
  --color-english-walnut-100: #fbe6dd;
  --color-english-walnut-200: #ead2c6;
  --color-english-walnut-300: #d6baad;
  --color-english-walnut-400: #b8998b;
  --color-english-walnut-500: #9b7d6f;
  --color-english-walnut-600: #7f6255;
  --color-english-walnut-700: #654c40;
  --color-english-walnut-800: #4f392f;
  --color-english-walnut-900: #41281c;
  --color-english-walnut-950: #261913;
}

Similar palettes