Out of Left Field to Oasis Color Palette

About this palette

Out of Left Field to Oasis is a 4-color vibrant, cool, neon palette: #24E700 (Out of Left Field), #5B8300 (Avocado), #E05EF1 (Flaming Flamingo), #0091A6 (Oasis). It mixes green, pink, turquoise tones and feels cool overall. The strongest text pairing is #24E700 on #5B8300 with a contrast ratio of 2.67:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Out of Left Field	rgb(36, 231, 0)	hsl(111, 100%, 45%)
Avocado	rgb(91, 131, 0)	hsl(78, 100%, 26%)
Flaming Flamingo	rgb(224, 94, 241)	hsl(293, 84%, 66%)
Oasis	rgb(0, 145, 166)	hsl(188, 100%, 33%)

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.

Color blindness preview

CSS variables

/* Out of Left Field to Oasis — https://swatchly.xyz/palette/24e700-5b8300-e05ef1-0091a6 */
:root {
  --out-of-left-field: #24e700;
  --avocado: #5b8300;
  --flaming-flamingo: #e05ef1;
  --oasis: #0091a6;
}

Tailwind CSS v4

/* Out of Left Field to Oasis — https://swatchly.xyz/palette/24e700-5b8300-e05ef1-0091a6 */
@theme {
  --color-out-of-left-field: #24e700;
  --color-out-of-left-field-50: #e0ffdb;
  --color-out-of-left-field-100: #bdffb5;
  --color-out-of-left-field-200: #80f774;
  --color-out-of-left-field-300: #24e700;
  --color-out-of-left-field-400: #1cc200;
  --color-out-of-left-field-500: #16a200;
  --color-out-of-left-field-600: #0f8200;
  --color-out-of-left-field-700: #0a6800;
  --color-out-of-left-field-800: #065100;
  --color-out-of-left-field-900: #033f00;
  --color-out-of-left-field-950: #012800;
  --color-avocado: #5b8300;
  --color-avocado-50: #e7ffcc;
  --color-avocado-100: #dcf9b9;
  --color-avocado-200: #c7e89c;
  --color-avocado-300: #afd57d;
  --color-avocado-400: #8eb853;
  --color-avocado-500: #749d2f;
  --color-avocado-600: #5b8300;
  --color-avocado-700: #476800;
  --color-avocado-800: #375100;
  --color-avocado-900: #293e00;
  --color-avocado-950: #182700;
  --color-flaming-flamingo: #e05ef1;
  --color-flaming-flamingo-50: #fdeeff;
  --color-flaming-flamingo-100: #fcdeff;
  --color-flaming-flamingo-200: #f8beff;
  --color-flaming-flamingo-300: #f395ff;
  --color-flaming-flamingo-400: #e05ef1;
  --color-flaming-flamingo-500: #c23fd3;
  --color-flaming-flamingo-600: #a41cb4;
  --color-flaming-flamingo-700: #860095;
  --color-flaming-flamingo-800: #6a0076;
  --color-flaming-flamingo-900: #53005d;
  --color-flaming-flamingo-950: #36003d;
  --color-oasis: #0091a6;
  --color-oasis-50: #e1f9ff;
  --color-oasis-100: #c0f4ff;
  --color-oasis-200: #95e3f4;
  --color-oasis-300: #71cde0;
  --color-oasis-400: #3faec2;
  --color-oasis-500: #0091a6;
  --color-oasis-600: #007586;
  --color-oasis-700: #005d6b;
  --color-oasis-800: #004954;
  --color-oasis-900: #003842;
  --color-oasis-950: #00242a;
}