Banana Republic to Deadly Depths color palette

FFE28FBanana Republic AFB5FFPurple Illusion 436FFCSecret of Mana 5D5504Ayahuasca Vine 0C1845Deadly Depths

Open in generator Export PNG, PDF, ASE…

About this palette

Banana Republic to Deadly Depths is a 5-color cool palette: #FFE28F (Banana Republic), #AFB5FF (Purple Illusion), #436FFC (Secret of Mana), #5D5504 (Ayahuasca Vine), #0C1845 (Deadly Depths). It mixes yellow, purple, blue, brown tones and feels cool overall. The strongest text pairing is #FFE28F on #0C1845 with a contrast ratio of 13.41:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Banana Republic	rgb(255, 226, 143)	hsl(44, 100%, 78%)
Purple Illusion	rgb(175, 181, 255)	hsl(236, 100%, 84%)
Secret of Mana	rgb(67, 111, 252)	hsl(226, 97%, 63%)
Ayahuasca Vine	rgb(93, 85, 4)	hsl(55, 92%, 19%)
Deadly Depths	rgb(12, 24, 69)	hsl(227, 70%, 16%)

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.41:1 Super#FFE28F on #0C1845
Aa13.41:1 Super#0C1845 on #FFE28F
Aa8.83:1 Very good#AFB5FF on #0C1845
Aa8.83:1 Very good#0C1845 on #AFB5FF
Aa5.97:1 Good#FFE28F on #5D5504
Aa5.97:1 Good#5D5504 on #FFE28F
Aa3.99:1 Poor#436FFC on #0C1845
Aa3.99:1 Poor#0C1845 on #436FFC

Color blindness preview

CSS variables

/* Banana Republic to Deadly Depths — https://swatchly.xyz/palette/ffe28f-afb5ff-436ffc-5d5504-0c1845 */
:root {
  --banana-republic: #ffe28f;
  --purple-illusion: #afb5ff;
  --secret-of-mana: #436ffc;
  --ayahuasca-vine: #5d5504;
  --deadly-depths: #0c1845;
}

Tailwind CSS v4

/* Banana Republic to Deadly Depths — https://swatchly.xyz/palette/ffe28f-afb5ff-436ffc-5d5504-0c1845 */
@theme {
  --color-banana-republic: #ffe28f;
  --color-banana-republic-50: #ffefc0;
  --color-banana-republic-100: #ffe28f;
  --color-banana-republic-200: #e6d093;
  --color-banana-republic-300: #d3bb75;
  --color-banana-republic-400: #b69c4d;
  --color-banana-republic-500: #9c812c;
  --color-banana-republic-600: #826807;
  --color-banana-republic-700: #685200;
  --color-banana-republic-800: #524000;
  --color-banana-republic-900: #3f3100;
  --color-banana-republic-950: #281e00;
  --color-purple-illusion: #afb5ff;
  --color-purple-illusion-50: #f0f2ff;
  --color-purple-illusion-100: #e3e6ff;
  --color-purple-illusion-200: #cbd0ff;
  --color-purple-illusion-300: #afb5ff;
  --color-purple-illusion-400: #9197dc;
  --color-purple-illusion-500: #777cc1;
  --color-purple-illusion-600: #5f62a4;
  --color-purple-illusion-700: #4a4c88;
  --color-purple-illusion-800: #393b6f;
  --color-purple-illusion-900: #2c2d59;
  --color-purple-illusion-950: #1a1b3b;
  --color-secret-of-mana: #436ffc;
  --color-secret-of-mana-50: #eff4ff;
  --color-secret-of-mana-100: #dee8ff;
  --color-secret-of-mana-200: #bfd3ff;
  --color-secret-of-mana-300: #9cbaff;
  --color-secret-of-mana-400: #6c94ff;
  --color-secret-of-mana-500: #436ffc;
  --color-secret-of-mana-600: #2f54db;
  --color-secret-of-mana-700: #203eb9;
  --color-secret-of-mana-800: #152d9a;
  --color-secret-of-mana-900: #0e217e;
  --color-secret-of-mana-950: #061256;
  --color-ayahuasca-vine: #5d5504;
  --color-ayahuasca-vine-50: #fbf7d1;
  --color-ayahuasca-vine-100: #f2eec2;
  --color-ayahuasca-vine-200: #dfdaa6;
  --color-ayahuasca-vine-300: #c9c387;
  --color-ayahuasca-vine-400: #aaa361;
  --color-ayahuasca-vine-500: #8f8742;
  --color-ayahuasca-vine-600: #746c27;
  --color-ayahuasca-vine-700: #5d5504;
  --color-ayahuasca-vine-800: #494204;
  --color-ayahuasca-vine-900: #383300;
  --color-ayahuasca-vine-950: #231f00;
  --color-deadly-depths: #0c1845;
  --color-deadly-depths-50: #f1f5ff;
  --color-deadly-depths-100: #e3ebff;
  --color-deadly-depths-200: #c7d7ff;
  --color-deadly-depths-300: #acc0f2;
  --color-deadly-depths-400: #8ba0d6;
  --color-deadly-depths-500: #6f84ba;
  --color-deadly-depths-600: #56699c;
  --color-deadly-depths-700: #415280;
  --color-deadly-depths-800: #303f67;
  --color-deadly-depths-900: #232f51;
  --color-deadly-depths-950: #0c1845;
}