Banana Frappé to Aqua Obscura Color Palette

About this palette

Banana Frappé to Aqua Obscura is a 5-color warm, vintage palette: #E2D5B7 (Banana Frappé), #0E9DB2 (Rainy Mood), #543550 (Purple Prose), #D5AF6C (Gold Digger), #006867 (Aqua Obscura). It mixes yellow, turquoise, purple tones and feels warm overall. The strongest text pairing is #E2D5B7 on #543550 with a contrast ratio of 7.21:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Banana Frappé	rgb(226, 213, 183)	hsl(42, 43%, 80%)
Rainy Mood	rgb(14, 157, 178)	hsl(188, 85%, 38%)
Purple Prose	rgb(84, 53, 80)	hsl(308, 23%, 27%)
Gold Digger	rgb(213, 175, 108)	hsl(38, 56%, 63%)
Aqua Obscura	rgb(0, 104, 103)	hsl(179, 100%, 20%)

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.

Aa7.21:1 Very good#E2D5B7 on #543550
Aa7.21:1 Very good#543550 on #E2D5B7
Aa5.08:1 Good#543550 on #D5AF6C
Aa5.08:1 Good#D5AF6C on #543550
Aa4.55:1 Good#E2D5B7 on #006867
Aa4.55:1 Good#006867 on #E2D5B7
Aa3.24:1 Poor#0E9DB2 on #543550
Aa3.24:1 Poor#543550 on #0E9DB2

Color blindness preview

CSS variables

/* Banana Frappé to Aqua Obscura — https://swatchly.xyz/palette/e2d5b7-0e9db2-543550-d5af6c-006867 */
:root {
  --banana-frapp: #e2d5b7;
  --rainy-mood: #0e9db2;
  --purple-prose: #543550;
  --gold-digger: #d5af6c;
  --aqua-obscura: #006867;
}

Tailwind CSS v4

/* Banana Frappé to Aqua Obscura — https://swatchly.xyz/palette/e2d5b7-0e9db2-543550-d5af6c-006867 */
@theme {
  --color-banana-frapp: #e2d5b7;
  --color-banana-frapp-50: #fbf4e3;
  --color-banana-frapp-100: #f2e9d6;
  --color-banana-frapp-200: #e2d5b7;
  --color-banana-frapp-300: #cabfa6;
  --color-banana-frapp-400: #aba084;
  --color-banana-frapp-500: #908469;
  --color-banana-frapp-600: #766a50;
  --color-banana-frapp-700: #5e543c;
  --color-banana-frapp-800: #4a412c;
  --color-banana-frapp-900: #3a3220;
  --color-banana-frapp-950: #241f12;
  --color-rainy-mood: #0e9db2;
  --color-rainy-mood-50: #e6fbff;
  --color-rainy-mood-100: #cbf6ff;
  --color-rainy-mood-200: #9ce9f9;
  --color-rainy-mood-300: #79d5e7;
  --color-rainy-mood-400: #48b8cc;
  --color-rainy-mood-500: #0e9db2;
  --color-rainy-mood-600: #007f90;
  --color-rainy-mood-700: #006473;
  --color-rainy-mood-800: #004e5a;
  --color-rainy-mood-900: #003c45;
  --color-rainy-mood-950: #00252c;
  --color-purple-prose: #543550;
  --color-purple-prose-50: #fff0fc;
  --color-purple-prose-100: #fbe3f7;
  --color-purple-prose-200: #eacde5;
  --color-purple-prose-300: #d5b5d0;
  --color-purple-prose-400: #b794b2;
  --color-purple-prose-500: #9c7896;
  --color-purple-prose-600: #805e7b;
  --color-purple-prose-700: #674963;
  --color-purple-prose-800: #543550;
  --color-purple-prose-900: #3f293c;
  --color-purple-prose-950: #281926;
  --color-gold-digger: #d5af6c;
  --color-gold-digger-50: #ffedce;
  --color-gold-digger-100: #fadfb3;
  --color-gold-digger-200: #e8c995;
  --color-gold-digger-300: #d5af6c;
  --color-gold-digger-400: #b69251;
  --color-gold-digger-500: #9c7835;
  --color-gold-digger-600: #82601b;
  --color-gold-digger-700: #6b4c06;
  --color-gold-digger-800: #563b00;
  --color-gold-digger-900: #442e00;
  --color-gold-digger-950: #2b1c00;
  --color-aqua-obscura: #006867;
  --color-aqua-obscura-50: #d5fffd;
  --color-aqua-obscura-100: #c6f6f5;
  --color-aqua-obscura-200: #abe5e3;
  --color-aqua-obscura-300: #8ed1cf;
  --color-aqua-obscura-400: #67b4b2;
  --color-aqua-obscura-500: #479997;
  --color-aqua-obscura-600: #2a7f7d;
  --color-aqua-obscura-700: #006867;
  --color-aqua-obscura-800: #005151;
  --color-aqua-obscura-900: #003f3e;
  --color-aqua-obscura-950: #002827;
}