Banana Frappé to Creole Color Palette

About this palette

Banana Frappé to Creole is a 5-color muted palette: #D5D5B5 (Banana Frappé), #99B4C2 (Shallow Sea), #6B919E (Cavolo Nero), #715466 (Hibernation), #343125 (Creole). It mixes yellow, blue, red, gray tones and feels balanced overall. The strongest text pairing is #D5D5B5 on #343125 with a contrast ratio of 8.69:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Banana Frappé	rgb(213, 213, 181)	hsl(60, 28%, 77%)
Shallow Sea	rgb(153, 180, 194)	hsl(200, 25%, 68%)
Cavolo Nero	rgb(107, 145, 158)	hsl(195, 21%, 52%)
Hibernation	rgb(113, 84, 102)	hsl(323, 15%, 39%)
Creole	rgb(52, 49, 37)	hsl(48, 17%, 17%)

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.69:1 Very good#D5D5B5 on #343125
Aa8.69:1 Very good#343125 on #D5D5B5
Aa5.99:1 Good#99B4C2 on #343125
Aa5.99:1 Good#343125 on #99B4C2
Aa4.43:1 Poor#D5D5B5 on #715466
Aa4.43:1 Poor#715466 on #D5D5B5
Aa3.83:1 Poor#6B919E on #343125
Aa3.83:1 Poor#343125 on #6B919E

Color blindness preview

CSS variables

/* Banana Frappé to Creole — https://swatchly.xyz/palette/d5d5b5-99b4c2-6b919e-715466-343125 */
:root {
  --banana-frapp: #d5d5b5;
  --shallow-sea: #99b4c2;
  --cavolo-nero: #6b919e;
  --hibernation: #715466;
  --creole: #343125;
}

Tailwind CSS v4

/* Banana Frappé to Creole — https://swatchly.xyz/palette/d5d5b5-99b4c2-6b919e-715466-343125 */
@theme {
  --color-banana-frapp: #d5d5b5;
  --color-banana-frapp-50: #f3f3e1;
  --color-banana-frapp-100: #e8e9d4;
  --color-banana-frapp-200: #d5d5b5;
  --color-banana-frapp-300: #bfbfa4;
  --color-banana-frapp-400: #a1a183;
  --color-banana-frapp-500: #868668;
  --color-banana-frapp-600: #6d6c50;
  --color-banana-frapp-700: #57563d;
  --color-banana-frapp-800: #44442d;
  --color-banana-frapp-900: #343421;
  --color-banana-frapp-950: #202012;
  --color-shallow-sea: #99b4c2;
  --color-shallow-sea-50: #f4fbff;
  --color-shallow-sea-100: #e5f5fe;
  --color-shallow-sea-200: #d2e5ef;
  --color-shallow-sea-300: #bbd1dc;
  --color-shallow-sea-400: #99b4c2;
  --color-shallow-sea-500: #7c96a3;
  --color-shallow-sea-600: #5f7986;
  --color-shallow-sea-700: #485f6b;
  --color-shallow-sea-800: #354a54;
  --color-shallow-sea-900: #263740;
  --color-shallow-sea-950: #152127;
  --color-cavolo-nero: #6b919e;
  --color-cavolo-nero-50: #e9f9ff;
  --color-cavolo-nero-100: #d9f1fa;
  --color-cavolo-nero-200: #c2dfe9;
  --color-cavolo-nero-300: #a9cad6;
  --color-cavolo-nero-400: #87acb9;
  --color-cavolo-nero-500: #6b919e;
  --color-cavolo-nero-600: #517582;
  --color-cavolo-nero-700: #3c5d69;
  --color-cavolo-nero-800: #2b4953;
  --color-cavolo-nero-900: #1f3840;
  --color-cavolo-nero-950: #102329;
  --color-hibernation: #715466;
  --color-hibernation-50: #fff0f9;
  --color-hibernation-100: #fae4f1;
  --color-hibernation-200: #ead1e0;
  --color-hibernation-300: #d7bbcc;
  --color-hibernation-400: #bb9caf;
  --color-hibernation-500: #a18295;
  --color-hibernation-600: #87697c;
  --color-hibernation-700: #715466;
  --color-hibernation-800: #594150;
  --color-hibernation-900: #46313e;
  --color-hibernation-950: #2d1e27;
  --color-creole: #343125;
  --color-creole-50: #f7f5ed;
  --color-creole-100: #eeebe2;
  --color-creole-200: #dad8cc;
  --color-creole-300: #c4c1b4;
  --color-creole-400: #a5a193;
  --color-creole-500: #898678;
  --color-creole-600: #6e6b5e;
  --color-creole-700: #575448;
  --color-creole-800: #434136;
  --color-creole-900: #343125;
  --color-creole-950: #1f1e18;
}