Exotic Escape to Palm Leaf color palette

About this palette

Exotic Escape to Palm Leaf is a 5-color cool palette: #9BD5D7 (Exotic Escape), #A4A5DC (Imperial Lilac), #BE695B (Too Hot to Handle), #655482 (Berry Jam), #444A2B (Palm Leaf). It mixes turquoise, purple, red, green tones and feels cool overall. The strongest text pairing is #9BD5D7 on #444A2B with a contrast ratio of 5.70:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Exotic Escapergb(155, 213, 215)hsl(182, 43%, 73%)
Imperial Lilacrgb(164, 165, 220)hsl(239, 44%, 75%)
Too Hot to Handlergb(190, 105, 91)hsl(8, 43%, 55%)
Berry Jamrgb(101, 84, 130)hsl(262, 21%, 42%)
Palm Leafrgb(68, 74, 43)hsl(72, 26%, 23%)

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.

  • Aa5.70:1 Good#9BD5D7 on #444A2B
  • Aa5.70:1 Good#444A2B on #9BD5D7
  • Aa4.10:1 Poor#9BD5D7 on #655482
  • Aa4.10:1 Poor#655482 on #9BD5D7
  • Aa3.98:1 Poor#A4A5DC on #444A2B
  • Aa3.98:1 Poor#444A2B on #A4A5DC

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Exotic Escape to Palm Leaf — https://swatchly.xyz/palette/9bd5d7-a4a5dc-be695b-655482-444a2b */
:root {
  --exotic-escape: #9bd5d7;
  --imperial-lilac: #a4a5dc;
  --too-hot-to-handle: #be695b;
  --berry-jam: #655482;
  --palm-leaf: #444a2b;
}

Tailwind CSS v4

/* Exotic Escape to Palm Leaf — https://swatchly.xyz/palette/9bd5d7-a4a5dc-be695b-655482-444a2b */
@theme {
  --color-exotic-escape: #9bd5d7;
  --color-exotic-escape-50: #e8feff;
  --color-exotic-escape-100: #d7f8f9;
  --color-exotic-escape-200: #bfe7e8;
  --color-exotic-escape-300: #9bd5d7;
  --color-exotic-escape-400: #7eb3b5;
  --color-exotic-escape-500: #5e9698;
  --color-exotic-escape-600: #437a7c;
  --color-exotic-escape-700: #2d6163;
  --color-exotic-escape-800: #1d4c4d;
  --color-exotic-escape-900: #123a3b;
  --color-exotic-escape-950: #072425;
  --color-imperial-lilac: #a4a5dc;
  --color-imperial-lilac-50: #f7f8ff;
  --color-imperial-lilac-100: #eeefff;
  --color-imperial-lilac-200: #d9dbff;
  --color-imperial-lilac-300: #c3c4f3;
  --color-imperial-lilac-400: #a4a5dc;
  --color-imperial-lilac-500: #8788bd;
  --color-imperial-lilac-600: #6c6c9e;
  --color-imperial-lilac-700: #545482;
  --color-imperial-lilac-800: #404068;
  --color-imperial-lilac-900: #303051;
  --color-imperial-lilac-950: #1d1c34;
  --color-too-hot-to-handle: #be695b;
  --color-too-hot-to-handle-50: #fff1ef;
  --color-too-hot-to-handle-100: #ffe3de;
  --color-too-hot-to-handle-200: #ffc7bd;
  --color-too-hot-to-handle-300: #f7a99b;
  --color-too-hot-to-handle-400: #db8677;
  --color-too-hot-to-handle-500: #be695b;
  --color-too-hot-to-handle-600: #a04f43;
  --color-too-hot-to-handle-700: #843b30;
  --color-too-hot-to-handle-800: #6a2b22;
  --color-too-hot-to-handle-900: #551f17;
  --color-too-hot-to-handle-950: #38110b;
  --color-berry-jam: #655482;
  --color-berry-jam-50: #f7f3ff;
  --color-berry-jam-100: #eee6ff;
  --color-berry-jam-200: #dfd2f9;
  --color-berry-jam-300: #cbbce7;
  --color-berry-jam-400: #ad9dcd;
  --color-berry-jam-500: #9482b3;
  --color-berry-jam-600: #7a6999;
  --color-berry-jam-700: #655482;
  --color-berry-jam-800: #4f4168;
  --color-berry-jam-900: #3d3152;
  --color-berry-jam-950: #271e36;
  --color-palm-leaf: #444a2b;
  --color-palm-leaf-50: #f3f8e4;
  --color-palm-leaf-100: #e9eed8;
  --color-palm-leaf-200: #d5dbc0;
  --color-palm-leaf-300: #bfc6a8;
  --color-palm-leaf-400: #a0a786;
  --color-palm-leaf-500: #868d6b;
  --color-palm-leaf-600: #6c7353;
  --color-palm-leaf-700: #565c3f;
  --color-palm-leaf-800: #444a2b;
  --color-palm-leaf-900: #343922;
  --color-palm-leaf-950: #202413;
}

Similar palettes