Magentleman to Peach Fizz Color Palette

About this palette

Magentleman to Peach Fizz is a 4-color vibrant, neon palette: #AE1EB2 (Magentleman), #009DCA (Blue Ocean), #A3A500 (Countryside), #FFAB7F (Peach Fizz). It mixes pink, blue, yellow, orange tones and feels balanced overall. The strongest text pairing is #AE1EB2 on #FFAB7F with a contrast ratio of 3.14:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Magentleman	rgb(174, 30, 178)	hsl(298, 71%, 41%)
Blue Ocean	rgb(0, 157, 202)	hsl(193, 100%, 40%)
Countryside	rgb(163, 165, 0)	hsl(61, 100%, 32%)
Peach Fizz	rgb(255, 171, 127)	hsl(21, 100%, 75%)

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.14:1 Poor#AE1EB2 on #FFAB7F
Aa3.14:1 Poor#FFAB7F on #AE1EB2

Color blindness preview

CSS variables

/* Magentleman to Peach Fizz — https://swatchly.xyz/palette/ae1eb2-009dca-a3a500-ffab7f */
:root {
  --magentleman: #ae1eb2;
  --blue-ocean: #009dca;
  --countryside: #a3a500;
  --peach-fizz: #ffab7f;
}

Tailwind CSS v4

/* Magentleman to Peach Fizz — https://swatchly.xyz/palette/ae1eb2-009dca-a3a500-ffab7f */
@theme {
  --color-magentleman: #ae1eb2;
  --color-magentleman-50: #ffeffe;
  --color-magentleman-100: #ffe0fe;
  --color-magentleman-200: #ffc0fe;
  --color-magentleman-300: #ff94ff;
  --color-magentleman-400: #e866ea;
  --color-magentleman-500: #cc43cf;
  --color-magentleman-600: #ae1eb2;
  --color-magentleman-700: #8f0093;
  --color-magentleman-800: #710074;
  --color-magentleman-900: #58005b;
  --color-magentleman-950: #39003b;
  --color-blue-ocean: #009dca;
  --color-blue-ocean-50: #edf9ff;
  --color-blue-ocean-100: #daf3ff;
  --color-blue-ocean-200: #aee6ff;
  --color-blue-ocean-300: #78d5fc;
  --color-blue-ocean-400: #46b7e3;
  --color-blue-ocean-500: #009dca;
  --color-blue-ocean-600: #007ea3;
  --color-blue-ocean-700: #006482;
  --color-blue-ocean-800: #004e66;
  --color-blue-ocean-900: #003b4f;
  --color-blue-ocean-950: #002532;
  --color-countryside: #a3a500;
  --color-countryside-50: #f6fab7;
  --color-countryside-100: #ecf0a4;
  --color-countryside-200: #d8dc80;
  --color-countryside-300: #c2c558;
  --color-countryside-400: #a3a500;
  --color-countryside-500: #888900;
  --color-countryside-600: #6d6f00;
  --color-countryside-700: #575800;
  --color-countryside-800: #444500;
  --color-countryside-900: #343500;
  --color-countryside-950: #212100;
  --color-peach-fizz: #ffab7f;
  --color-peach-fizz-50: #fff3ed;
  --color-peach-fizz-100: #ffe6da;
  --color-peach-fizz-200: #ffccb2;
  --color-peach-fizz-300: #ffab7f;
  --color-peach-fizz-400: #da8d63;
  --color-peach-fizz-500: #be7045;
  --color-peach-fizz-600: #a0552b;
  --color-peach-fizz-700: #844017;
  --color-peach-fizz-800: #6a2f08;
  --color-peach-fizz-900: #542201;
  --color-peach-fizz-950: #371300;
}