Infinity Pool to Paying Mantis color palette

97D1DDInfinity Pool 573B36Monkey Island 82607BOpera E6F9E4Homoeopathic Lime 6E9579Paying Mantis

About this palette

Infinity Pool to Paying Mantis is a 5-color muted, vintage palette: #97D1DD (Infinity Pool), #573B36 (Monkey Island), #82607B (Opera), #E6F9E4 (Homoeopathic Lime), #6E9579 (Paying Mantis). It mixes turquoise, brown, pink, white, green tones and feels balanced overall. The strongest text pairing is #573B36 on #E6F9E4 with a contrast ratio of 9.13:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Infinity Pool	rgb(151, 209, 221)	hsl(190, 51%, 73%)
Monkey Island	rgb(87, 59, 54)	hsl(9, 23%, 28%)
Opera	rgb(130, 96, 123)	hsl(312, 15%, 44%)
Homoeopathic Lime	rgb(230, 249, 228)	hsl(114, 64%, 94%)
Paying Mantis	rgb(110, 149, 121)	hsl(137, 16%, 51%)

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.

Aa9.13:1 Very good#573B36 on #E6F9E4
Aa9.13:1 Very good#E6F9E4 on #573B36
Aa5.99:1 Good#97D1DD on #573B36
Aa5.99:1 Good#573B36 on #97D1DD
Aa4.87:1 Good#82607B on #E6F9E4
Aa4.87:1 Good#E6F9E4 on #82607B
Aa3.19:1 Poor#97D1DD on #82607B
Aa3.19:1 Poor#82607B on #97D1DD

Color blindness preview

CSS variables

/* Infinity Pool to Paying Mantis — https://swatchly.xyz/palette/97d1dd-573b36-82607b-e6f9e4-6e9579 */
:root {
  --infinity-pool: #97d1dd;
  --monkey-island: #573b36;
  --opera: #82607b;
  --homoeopathic-lime: #e6f9e4;
  --paying-mantis: #6e9579;
}

Tailwind CSS v4

/* Infinity Pool to Paying Mantis — https://swatchly.xyz/palette/97d1dd-573b36-82607b-e6f9e4-6e9579 */
@theme {
  --color-infinity-pool: #97d1dd;
  --color-infinity-pool-50: #eafbff;
  --color-infinity-pool-100: #d4f6fd;
  --color-infinity-pool-200: #bbe4ed;
  --color-infinity-pool-300: #97d1dd;
  --color-infinity-pool-400: #7ab0bb;
  --color-infinity-pool-500: #5b939f;
  --color-infinity-pool-600: #407882;
  --color-infinity-pool-700: #2b5f69;
  --color-infinity-pool-800: #1c4a53;
  --color-infinity-pool-900: #113940;
  --color-infinity-pool-950: #072429;
  --color-monkey-island: #573b36;
  --color-monkey-island-50: #fff2ef;
  --color-monkey-island-100: #fce5e1;
  --color-monkey-island-200: #ebd1cc;
  --color-monkey-island-300: #d7b9b4;
  --color-monkey-island-400: #b99993;
  --color-monkey-island-500: #9e7e78;
  --color-monkey-island-600: #82645e;
  --color-monkey-island-700: #6a4e49;
  --color-monkey-island-800: #573b36;
  --color-monkey-island-900: #422e2a;
  --color-monkey-island-950: #2a1c19;
  --color-opera: #82607b;
  --color-opera-50: #fff0fb;
  --color-opera-100: #fbe3f6;
  --color-opera-200: #eacee4;
  --color-opera-300: #d6b6cf;
  --color-opera-400: #b995b1;
  --color-opera-500: #9d7a96;
  --color-opera-600: #82607b;
  --color-opera-700: #694b63;
  --color-opera-800: #53394e;
  --color-opera-900: #412b3d;
  --color-opera-950: #291926;
  --color-homoeopathic-lime: #e6f9e4;
  --color-homoeopathic-lime-50: #e6f9e4;
  --color-homoeopathic-lime-100: #e1ede0;
  --color-homoeopathic-lime-200: #cddacb;
  --color-homoeopathic-lime-300: #b5c5b4;
  --color-homoeopathic-lime-400: #95a694;
  --color-homoeopathic-lime-500: #7a8b79;
  --color-homoeopathic-lime-600: #61715f;
  --color-homoeopathic-lime-700: #4b5a4a;
  --color-homoeopathic-lime-800: #3a4638;
  --color-homoeopathic-lime-900: #2b362a;
  --color-homoeopathic-lime-950: #1a2219;
  --color-paying-mantis: #6e9579;
  --color-paying-mantis-50: #e6fdec;
  --color-paying-mantis-100: #dbf4e1;
  --color-paying-mantis-200: #c5e3cc;
  --color-paying-mantis-300: #acceb5;
  --color-paying-mantis-400: #8ab094;
  --color-paying-mantis-500: #6e9579;
  --color-paying-mantis-600: #54795f;
  --color-paying-mantis-700: #3e6149;
  --color-paying-mantis-800: #2e4c37;
  --color-paying-mantis-900: #213b29;
  --color-paying-mantis-950: #122518;
}