Amaretto to Exotic Escape Color Palette

About this palette

Amaretto to Exotic Escape is a 5-color cool, vintage palette: #A87364 (Amaretto), #225D66 (Deep Sea Diver), #CF958A (Powder Blush), #053542 (Nordic Noir), #8AD7E0 (Exotic Escape). It mixes red, turquoise, blue tones and feels cool overall. The strongest text pairing is #053542 on #8AD7E0 with a contrast ratio of 8.08:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Amaretto	rgb(168, 115, 100)	hsl(13, 28%, 53%)
Deep Sea Diver	rgb(34, 93, 102)	hsl(188, 50%, 27%)
Powder Blush	rgb(207, 149, 138)	hsl(10, 42%, 68%)
Nordic Noir	rgb(5, 53, 66)	hsl(193, 86%, 14%)
Exotic Escape	rgb(138, 215, 224)	hsl(186, 58%, 71%)

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.08:1 Very good#053542 on #8AD7E0
Aa8.08:1 Very good#8AD7E0 on #053542
Aa5.22:1 Good#CF958A on #053542
Aa5.22:1 Good#053542 on #CF958A
Aa4.56:1 Good#225D66 on #8AD7E0
Aa4.56:1 Good#8AD7E0 on #225D66
Aa3.33:1 Poor#A87364 on #053542
Aa3.33:1 Poor#053542 on #A87364

Color blindness preview

CSS variables

/* Amaretto to Exotic Escape — https://swatchly.xyz/palette/a87364-225d66-cf958a-053542-8ad7e0 */
:root {
  --amaretto: #a87364;
  --deep-sea-diver: #225d66;
  --powder-blush: #cf958a;
  --nordic-noir: #053542;
  --exotic-escape: #8ad7e0;
}

Tailwind CSS v4

/* Amaretto to Exotic Escape — https://swatchly.xyz/palette/a87364-225d66-cf958a-053542-8ad7e0 */
@theme {
  --color-amaretto: #a87364;
  --color-amaretto-50: #fff1ed;
  --color-amaretto-100: #ffe3da;
  --color-amaretto-200: #f6cabd;
  --color-amaretto-300: #e2b1a3;
  --color-amaretto-400: #c58f80;
  --color-amaretto-500: #a87364;
  --color-amaretto-600: #8c5a4c;
  --color-amaretto-700: #724539;
  --color-amaretto-800: #5c352a;
  --color-amaretto-900: #48281e;
  --color-amaretto-950: #2f1711;
  --color-deep-sea-diver: #225d66;
  --color-deep-sea-diver-50: #e1fbff;
  --color-deep-sea-diver-100: #cff3f9;
  --color-deep-sea-diver-200: #b5e0e7;
  --color-deep-sea-diver-300: #99cad3;
  --color-deep-sea-diver-400: #74abb5;
  --color-deep-sea-diver-500: #569099;
  --color-deep-sea-diver-600: #3c747d;
  --color-deep-sea-diver-700: #225d66;
  --color-deep-sea-diver-800: #1a4950;
  --color-deep-sea-diver-900: #10383e;
  --color-deep-sea-diver-950: #062327;
  --color-powder-blush: #cf958a;
  --color-powder-blush-50: #fff4f1;
  --color-powder-blush-100: #ffe7e2;
  --color-powder-blush-200: #fbcec6;
  --color-powder-blush-300: #e9b7ad;
  --color-powder-blush-400: #cf958a;
  --color-powder-blush-500: #b1796f;
  --color-powder-blush-600: #935e55;
  --color-powder-blush-700: #784840;
  --color-powder-blush-800: #60372f;
  --color-powder-blush-900: #4b2822;
  --color-powder-blush-950: #301713;
  --color-nordic-noir: #053542;
  --color-nordic-noir-50: #e7f9ff;
  --color-nordic-noir-100: #d4f1fb;
  --color-nordic-noir-200: #bcdeea;
  --color-nordic-noir-300: #a2c8d6;
  --color-nordic-noir-400: #7ea9b7;
  --color-nordic-noir-500: #618c9b;
  --color-nordic-noir-600: #47717f;
  --color-nordic-noir-700: #325966;
  --color-nordic-noir-800: #234550;
  --color-nordic-noir-900: #053542;
  --color-nordic-noir-950: #0b2026;
  --color-exotic-escape: #8ad7e0;
  --color-exotic-escape-50: #ebfdff;
  --color-exotic-escape-100: #cefaff;
  --color-exotic-escape-200: #b4e9ef;
  --color-exotic-escape-300: #8ad7e0;
  --color-exotic-escape-400: #6db5bd;
  --color-exotic-escape-500: #4b98a1;
  --color-exotic-escape-600: #2d7c84;
  --color-exotic-escape-700: #15636a;
  --color-exotic-escape-800: #014d54;
  --color-exotic-escape-900: #003b40;
  --color-exotic-escape-950: #002529;
}