York Plum to Genie Color Palette

About this palette

York Plum to Genie is a 5-color cool, gradient palette: #D1C3EC (York Plum), #6CB4F3 (Fly Away), #4F7BAB (Into the Blue), #5B57A3 (Ultrapurple Merge), #3E4465 (Genie). It mixes purple, blue tones and feels cool overall. The strongest text pairing is #D1C3EC on #3E4465 with a contrast ratio of 5.73:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
York Plum	rgb(209, 195, 236)	hsl(260, 52%, 85%)
Fly Away	rgb(108, 180, 243)	hsl(208, 85%, 69%)
Into the Blue	rgb(79, 123, 171)	hsl(211, 37%, 49%)
Ultrapurple Merge	rgb(91, 87, 163)	hsl(243, 30%, 49%)
Genie	rgb(62, 68, 101)	hsl(231, 24%, 32%)

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.

Aa5.73:1 Good#D1C3EC on #3E4465
Aa5.73:1 Good#3E4465 on #D1C3EC
Aa4.26:1 Poor#6CB4F3 on #3E4465
Aa4.26:1 Poor#3E4465 on #6CB4F3
Aa3.81:1 Poor#D1C3EC on #5B57A3
Aa3.81:1 Poor#5B57A3 on #D1C3EC

Color blindness preview

CSS variables

/* York Plum to Genie — https://swatchly.xyz/palette/d1c3ec-6cb4f3-4f7bab-5b57a3-3e4465 */
:root {
  --york-plum: #d1c3ec;
  --fly-away: #6cb4f3;
  --into-the-blue: #4f7bab;
  --ultrapurple-merge: #5b57a3;
  --genie: #3e4465;
}

Tailwind CSS v4

/* York Plum to Genie — https://swatchly.xyz/palette/d1c3ec-6cb4f3-4f7bab-5b57a3-3e4465 */
@theme {
  --color-york-plum: #d1c3ec;
  --color-york-plum-50: #fbf9ff;
  --color-york-plum-100: #f4efff;
  --color-york-plum-200: #e4dbf7;
  --color-york-plum-300: #d1c3ec;
  --color-york-plum-400: #afa2c8;
  --color-york-plum-500: #9285ab;
  --color-york-plum-600: #76698d;
  --color-york-plum-700: #5d5172;
  --color-york-plum-800: #483e5a;
  --color-york-plum-900: #362e46;
  --color-york-plum-950: #221c2d;
  --color-fly-away: #6cb4f3;
  --color-fly-away-50: #f5faff;
  --color-fly-away-100: #e7f3ff;
  --color-fly-away-200: #c6e4ff;
  --color-fly-away-300: #9fd1ff;
  --color-fly-away-400: #6cb4f3;
  --color-fly-away-500: #4f96d2;
  --color-fly-away-600: #3078b3;
  --color-fly-away-700: #175e94;
  --color-fly-away-800: #034978;
  --color-fly-away-900: #00375d;
  --color-fly-away-950: #00213b;
  --color-into-the-blue: #4f7bab;
  --color-into-the-blue-50: #eef6ff;
  --color-into-the-blue-100: #e1efff;
  --color-into-the-blue-200: #c3dfff;
  --color-into-the-blue-300: #a5cbf7;
  --color-into-the-blue-400: #83aede;
  --color-into-the-blue-500: #6894c5;
  --color-into-the-blue-600: #4f7bab;
  --color-into-the-blue-700: #38618e;
  --color-into-the-blue-800: #274c73;
  --color-into-the-blue-900: #1a3a5b;
  --color-into-the-blue-950: #0d243b;
  --color-ultrapurple-merge: #5b57a3;
  --color-ultrapurple-merge-50: #f3f4ff;
  --color-ultrapurple-merge-100: #e6e7ff;
  --color-ultrapurple-merge-200: #cecfff;
  --color-ultrapurple-merge-300: #b3b3fd;
  --color-ultrapurple-merge-400: #9291e0;
  --color-ultrapurple-merge-500: #7673c2;
  --color-ultrapurple-merge-600: #5b57a3;
  --color-ultrapurple-merge-700: #484485;
  --color-ultrapurple-merge-800: #37336c;
  --color-ultrapurple-merge-900: #2a2757;
  --color-ultrapurple-merge-950: #1a1739;
  --color-genie: #3e4465;
  --color-genie-50: #f2f5ff;
  --color-genie-100: #e5eaff;
  --color-genie-200: #cfd6f4;
  --color-genie-300: #b9c0e1;
  --color-genie-400: #99a1c5;
  --color-genie-500: #7f86ab;
  --color-genie-600: #656c90;
  --color-genie-700: #505777;
  --color-genie-800: #3e4465;
  --color-genie-900: #30344d;
  --color-genie-950: #1d2032;
}