Banana Frappé to Rural Green color palette

DFD4B8Banana Frappé 665E2BOlivary 4C4022Avocado Stone 988A64In a Pickle 928152Rural Green

About this palette

Banana Frappé to Rural Green is a 5-color muted, warm, earthy, vintage, monochromatic palette: #DFD4B8 (Banana Frappé), #665E2B (Olivary), #4C4022 (Avocado Stone), #988A64 (In a Pickle), #928152 (Rural Green). It mixes yellow, brown tones and feels warm overall. The strongest text pairing is #DFD4B8 on #4C4022 with a contrast ratio of 6.90:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Banana Frappé	rgb(223, 212, 184)	hsl(43, 38%, 80%)
Olivary	rgb(102, 94, 43)	hsl(52, 41%, 28%)
Avocado Stone	rgb(76, 64, 34)	hsl(43, 38%, 22%)
In a Pickle	rgb(152, 138, 100)	hsl(44, 21%, 49%)
Rural Green	rgb(146, 129, 82)	hsl(44, 28%, 45%)

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.

Aa6.90:1 Good#DFD4B8 on #4C4022
Aa6.90:1 Good#4C4022 on #DFD4B8
Aa4.45:1 Poor#DFD4B8 on #665E2B
Aa4.45:1 Poor#665E2B on #DFD4B8

Color blindness preview

CSS variables

/* Banana Frappé to Rural Green — https://swatchly.xyz/palette/dfd4b8-665e2b-4c4022-988a64-928152 */
:root {
  --banana-frapp: #dfd4b8;
  --olivary: #665e2b;
  --avocado-stone: #4c4022;
  --in-a-pickle: #988a64;
  --rural-green: #928152;
}

Tailwind CSS v4

/* Banana Frappé to Rural Green — https://swatchly.xyz/palette/dfd4b8-665e2b-4c4022-988a64-928152 */
@theme {
  --color-banana-frapp: #dfd4b8;
  --color-banana-frapp-50: #f9f3e3;
  --color-banana-frapp-100: #efe8d7;
  --color-banana-frapp-200: #dfd4b8;
  --color-banana-frapp-300: #c7bea6;
  --color-banana-frapp-400: #a99f85;
  --color-banana-frapp-500: #8e846a;
  --color-banana-frapp-600: #746a52;
  --color-banana-frapp-700: #5d543e;
  --color-banana-frapp-800: #49422e;
  --color-banana-frapp-900: #393222;
  --color-banana-frapp-950: #241f13;
  --color-olivary: #665e2b;
  --color-olivary-50: #fbf6d9;
  --color-olivary-100: #f1edcb;
  --color-olivary-200: #e0dbb3;
  --color-olivary-300: #ccc699;
  --color-olivary-400: #afa776;
  --color-olivary-500: #958d5a;
  --color-olivary-600: #7c7441;
  --color-olivary-700: #665e2b;
  --color-olivary-800: #50491e;
  --color-olivary-900: #3e3813;
  --color-olivary-950: #272308;
  --color-avocado-stone: #4c4022;
  --color-avocado-stone-50: #fcf5e2;
  --color-avocado-stone-100: #f3ebd5;
  --color-avocado-stone-200: #e1d7bd;
  --color-avocado-stone-300: #ccc0a3;
  --color-avocado-stone-400: #ada080;
  --color-avocado-stone-500: #928464;
  --color-avocado-stone-600: #766a4b;
  --color-avocado-stone-700: #5f5337;
  --color-avocado-stone-800: #4c4022;
  --color-avocado-stone-900: #3a311c;
  --color-avocado-stone-950: #241e0f;
  --color-in-a-pickle: #988a64;
  --color-in-a-pickle-50: #fef6e0;
  --color-in-a-pickle-100: #f6edd4;
  --color-in-a-pickle-200: #e4dabc;
  --color-in-a-pickle-300: #d0c4a2;
  --color-in-a-pickle-400: #b2a580;
  --color-in-a-pickle-500: #988a64;
  --color-in-a-pickle-600: #7c6f4a;
  --color-in-a-pickle-700: #635735;
  --color-in-a-pickle-800: #4e4426;
  --color-in-a-pickle-900: #3c331a;
  --color-in-a-pickle-950: #261f0d;
  --color-rural-green: #928152;
  --color-rural-green-50: #fef4d8;
  --color-rural-green-100: #f5e9ca;
  --color-rural-green-200: #e2d5b0;
  --color-rural-green-300: #cdbd93;
  --color-rural-green-400: #ae9d6f;
  --color-rural-green-500: #928152;
  --color-rural-green-600: #77673a;
  --color-rural-green-700: #605128;
  --color-rural-green-800: #4c3f1a;
  --color-rural-green-900: #3b3111;
  --color-rural-green-950: #261e07;
}