Magenta Memoir to Fish Boy Color Palette

About this palette

Magenta Memoir to Fish Boy is a 5-color vibrant, cool palette: #AF469E (Magenta Memoir), #0095A1 (Oasis), #D864E5 (Pink Orchid), #FF863D (Wildfire), #00DFEB (Fish Boy). It mixes pink, turquoise, orange tones and feels cool overall. The strongest text pairing is #AF469E on #00DFEB with a contrast ratio of 3.04:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Magenta Memoir	rgb(175, 70, 158)	hsl(310, 43%, 48%)
Oasis	rgb(0, 149, 161)	hsl(184, 100%, 32%)
Pink Orchid	rgb(216, 100, 229)	hsl(294, 71%, 65%)
Wildfire	rgb(255, 134, 61)	hsl(23, 100%, 62%)
Fish Boy	rgb(0, 223, 235)	hsl(183, 100%, 46%)

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.

Aa3.04:1 Poor#AF469E on #00DFEB
Aa3.04:1 Poor#00DFEB on #AF469E

Color blindness preview

CSS variables

/* Magenta Memoir to Fish Boy — https://swatchly.xyz/palette/af469e-0095a1-d864e5-ff863d-00dfeb */
:root {
  --magenta-memoir: #af469e;
  --oasis: #0095a1;
  --pink-orchid: #d864e5;
  --wildfire: #ff863d;
  --fish-boy: #00dfeb;
}

Tailwind CSS v4

/* Magenta Memoir to Fish Boy — https://swatchly.xyz/palette/af469e-0095a1-d864e5-ff863d-00dfeb */
@theme {
  --color-magenta-memoir: #af469e;
  --color-magenta-memoir-50: #fff0fb;
  --color-magenta-memoir-100: #ffe4f8;
  --color-magenta-memoir-200: #ffc7f2;
  --color-magenta-memoir-300: #ffa2ec;
  --color-magenta-memoir-400: #e57ed2;
  --color-magenta-memoir-500: #cb61b8;
  --color-magenta-memoir-600: #af469e;
  --color-magenta-memoir-700: #912e82;
  --color-magenta-memoir-800: #751c68;
  --color-magenta-memoir-900: #5d0f52;
  --color-magenta-memoir-950: #3d0535;
  --color-oasis: #0095a1;
  --color-oasis-50: #ddfcff;
  --color-oasis-100: #b7f8ff;
  --color-oasis-200: #97e6ee;
  --color-oasis-300: #73d0da;
  --color-oasis-400: #41b1bd;
  --color-oasis-500: #0095a1;
  --color-oasis-600: #007882;
  --color-oasis-700: #005f67;
  --color-oasis-800: #004b51;
  --color-oasis-900: #003a3f;
  --color-oasis-950: #002428;
  --color-pink-orchid: #d864e5;
  --color-pink-orchid-50: #feedff;
  --color-pink-orchid-100: #fcdcff;
  --color-pink-orchid-200: #f9baff;
  --color-pink-orchid-300: #f48fff;
  --color-pink-orchid-400: #d864e5;
  --color-pink-orchid-500: #bb47c8;
  --color-pink-orchid-600: #9d2baa;
  --color-pink-orchid-700: #82138e;
  --color-pink-orchid-800: #690074;
  --color-pink-orchid-900: #53005c;
  --color-pink-orchid-950: #37003d;
  --color-wildfire: #ff863d;
  --color-wildfire-50: #fff7f3;
  --color-wildfire-100: #ffede3;
  --color-wildfire-200: #ffd5bf;
  --color-wildfire-300: #ffb791;
  --color-wildfire-400: #ff863d;
  --color-wildfire-500: #dd6815;
  --color-wildfire-600: #b55100;
  --color-wildfire-700: #903f00;
  --color-wildfire-800: #712f00;
  --color-wildfire-900: #572300;
  --color-wildfire-950: #371300;
  --color-fish-boy: #00dfeb;
  --color-fish-boy-50: #e3fdff;
  --color-fish-boy-100: #bffbff;
  --color-fish-boy-200: #82eff7;
  --color-fish-boy-300: #00dfeb;
  --color-fish-boy-400: #00bbc5;
  --color-fish-boy-500: #009ba4;
  --color-fish-boy-600: #007d84;
  --color-fish-boy-700: #006369;
  --color-fish-boy-800: #004d52;
  --color-fish-boy-900: #003b3f;
  --color-fish-boy-950: #002527;
}