Oasis to Mona Lisa Color Palette

About this palette

Oasis to Mona Lisa is a 5-color cool palette: #0097A6 (Oasis), #686F46 (Herbal Whispers), #4B4167 (Meteorite), #E5EFB7 (Sour), #FE9890 (Mona Lisa). It mixes turquoise, green, purple, pink tones and feels cool overall. The strongest text pairing is #4B4167 on #E5EFB7 with a contrast ratio of 7.71:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Oasis	rgb(0, 151, 166)	hsl(185, 100%, 33%)
Herbal Whispers	rgb(104, 111, 70)	hsl(70, 23%, 35%)
Meteorite	rgb(75, 65, 103)	hsl(256, 23%, 33%)
Sour	rgb(229, 239, 183)	hsl(71, 64%, 83%)
Mona Lisa	rgb(254, 152, 144)	hsl(4, 98%, 78%)

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.71:1 Very good#4B4167 on #E5EFB7
Aa7.71:1 Very good#E5EFB7 on #4B4167
Aa4.49:1 Poor#4B4167 on #FE9890
Aa4.49:1 Poor#FE9890 on #4B4167
Aa4.39:1 Poor#686F46 on #E5EFB7
Aa4.39:1 Poor#E5EFB7 on #686F46

Color blindness preview

CSS variables

/* Oasis to Mona Lisa — https://swatchly.xyz/palette/0097a6-686f46-4b4167-e5efb7-fe9890 */
:root {
  --oasis: #0097a6;
  --herbal-whispers: #686f46;
  --meteorite: #4b4167;
  --sour: #e5efb7;
  --mona-lisa: #fe9890;
}

Tailwind CSS v4

/* Oasis to Mona Lisa — https://swatchly.xyz/palette/0097a6-686f46-4b4167-e5efb7-fe9890 */
@theme {
  --color-oasis: #0097a6;
  --color-oasis-50: #e0fbff;
  --color-oasis-100: #bef7ff;
  --color-oasis-200: #98e6f2;
  --color-oasis-300: #74d1de;
  --color-oasis-400: #42b3c1;
  --color-oasis-500: #0097a6;
  --color-oasis-600: #007a86;
  --color-oasis-700: #00616b;
  --color-oasis-800: #004c54;
  --color-oasis-900: #003a41;
  --color-oasis-950: #002429;
  --color-herbal-whispers: #686f46;
  --color-herbal-whispers-50: #f3f8df;
  --color-herbal-whispers-100: #e9efd2;
  --color-herbal-whispers-200: #d5dbba;
  --color-herbal-whispers-300: #bec59f;
  --color-herbal-whispers-400: #9ea67c;
  --color-herbal-whispers-500: #828a60;
  --color-herbal-whispers-600: #686f46;
  --color-herbal-whispers-700: #525834;
  --color-herbal-whispers-800: #404525;
  --color-herbal-whispers-900: #31351a;
  --color-herbal-whispers-950: #1e210d;
  --color-meteorite: #4b4167;
  --color-meteorite-50: #f6f3ff;
  --color-meteorite-100: #ece7ff;
  --color-meteorite-200: #d9d2f4;
  --color-meteorite-300: #c4bce2;
  --color-meteorite-400: #a69dc6;
  --color-meteorite-500: #8c82ac;
  --color-meteorite-600: #736991;
  --color-meteorite-700: #5d5479;
  --color-meteorite-800: #4b4167;
  --color-meteorite-900: #3a324e;
  --color-meteorite-950: #241f33;
  --color-sour: #e5efb7;
  --color-sour-50: #f1f7d7;
  --color-sour-100: #e5efb7;
  --color-sour-200: #d3dab1;
  --color-sour-300: #bcc596;
  --color-sour-400: #9da673;
  --color-sour-500: #838b57;
  --color-sour-600: #69713f;
  --color-sour-700: #535a2c;
  --color-sour-800: #41461d;
  --color-sour-900: #313613;
  --color-sour-950: #1e2208;
  --color-mona-lisa: #fe9890;
  --color-mona-lisa-50: #ffece9;
  --color-mona-lisa-100: #ffdcd8;
  --color-mona-lisa-200: #ffbdb7;
  --color-mona-lisa-300: #fe9890;
  --color-mona-lisa-400: #db7b74;
  --color-mona-lisa-500: #c0605a;
  --color-mona-lisa-600: #a24843;
  --color-mona-lisa-700: #863431;
  --color-mona-lisa-800: #6e2624;
  --color-mona-lisa-900: #591b19;
  --color-mona-lisa-950: #3a0e0d;
}