Eigengrau to Pastel Blue color palette

131924Eigengrau 3F3856Maharaja 7D4672Magic Magenta A8649BJe t’aime A398E5Dreamy Candy Forest AABFFFPastel Blue

Open in generator Export PNG, PDF, ASE…

About this palette

Eigengrau to Pastel Blue is a 6-color gradient palette: #131924 (Eigengrau), #3F3856 (Maharaja), #7D4672 (Magic Magenta), #A8649B (Je t’aime), #A398E5 (Dreamy Candy Forest), #AABFFF (Pastel Blue). It mixes black, purple, pink, blue tones and feels cool overall. The strongest text pairing is #131924 on #AABFFF with a contrast ratio of 9.73:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Eigengrau	rgb(19, 25, 36)	hsl(219, 31%, 11%)
Maharaja	rgb(63, 56, 86)	hsl(254, 21%, 28%)
Magic Magenta	rgb(125, 70, 114)	hsl(312, 28%, 38%)
Je t’aime	rgb(168, 100, 155)	hsl(311, 28%, 53%)
Dreamy Candy Forest	rgb(163, 152, 229)	hsl(249, 60%, 75%)
Pastel Blue	rgb(170, 191, 255)	hsl(225, 100%, 83%)

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.

Aa9.73:1 Very good#131924 on #AABFFF
Aa9.73:1 Very good#AABFFF on #131924
Aa6.86:1 Good#131924 on #A398E5
Aa6.86:1 Good#A398E5 on #131924
Aa6.07:1 Good#3F3856 on #AABFFF
Aa6.07:1 Good#AABFFF on #3F3856
Aa4.28:1 Poor#3F3856 on #A398E5
Aa4.28:1 Poor#A398E5 on #3F3856

Color blindness preview

CSS variables

/* Eigengrau to Pastel Blue — https://swatchly.xyz/palette/131924-3f3856-7d4672-a8649b-a398e5-aabfff */
:root {
  --eigengrau: #131924;
  --maharaja: #3f3856;
  --magic-magenta: #7d4672;
  --je-t-aime: #a8649b;
  --dreamy-candy-forest: #a398e5;
  --pastel-blue: #aabfff;
}

Tailwind CSS v4

/* Eigengrau to Pastel Blue — https://swatchly.xyz/palette/131924-3f3856-7d4672-a8649b-a398e5-aabfff */
@theme {
  --color-eigengrau: #131924;
  --color-eigengrau-50: #f0f5fe;
  --color-eigengrau-100: #e6ebf5;
  --color-eigengrau-200: #d1d8e3;
  --color-eigengrau-300: #bac1ce;
  --color-eigengrau-400: #9aa2b0;
  --color-eigengrau-500: #7d8594;
  --color-eigengrau-600: #626a77;
  --color-eigengrau-700: #4b525e;
  --color-eigengrau-800: #383e48;
  --color-eigengrau-900: #292d36;
  --color-eigengrau-950: #131924;
  --color-maharaja: #3f3856;
  --color-maharaja-50: #f5f3ff;
  --color-maharaja-100: #ece8ff;
  --color-maharaja-200: #d8d3ef;
  --color-maharaja-300: #c1bbda;
  --color-maharaja-400: #a19abc;
  --color-maharaja-500: #857ea0;
  --color-maharaja-600: #6a6383;
  --color-maharaja-700: #524c69;
  --color-maharaja-800: #3f3856;
  --color-maharaja-900: #302b40;
  --color-maharaja-950: #1d1a28;
  --color-magic-magenta: #7d4672;
  --color-magic-magenta-50: #fff0fb;
  --color-magic-magenta-100: #ffe1f7;
  --color-magic-magenta-200: #f7c8ec;
  --color-magic-magenta-300: #e5b0d9;
  --color-magic-magenta-400: #ca90bd;
  --color-magic-magenta-500: #af75a3;
  --color-magic-magenta-600: #945c88;
  --color-magic-magenta-700: #7d4672;
  --color-magic-magenta-800: #63355a;
  --color-magic-magenta-900: #4e2746;
  --color-magic-magenta-950: #33162d;
  --color-je-t-aime: #a8649b;
  --color-je-t-aime-50: #ffeefb;
  --color-je-t-aime-100: #ffddf7;
  --color-je-t-aime-200: #f8bfeb;
  --color-je-t-aime-300: #e4a4d6;
  --color-je-t-aime-400: #c581b8;
  --color-je-t-aime-500: #a8649b;
  --color-je-t-aime-600: #8c4c80;
  --color-je-t-aime-700: #723968;
  --color-je-t-aime-800: #5c2a53;
  --color-je-t-aime-900: #491e42;
  --color-je-t-aime-950: #30112a;
  --color-dreamy-candy-forest: #a398e5;
  --color-dreamy-candy-forest-50: #f6f5ff;
  --color-dreamy-candy-forest-100: #eceaff;
  --color-dreamy-candy-forest-200: #d8d3ff;
  --color-dreamy-candy-forest-300: #c2b9fc;
  --color-dreamy-candy-forest-400: #a398e5;
  --color-dreamy-candy-forest-500: #877cc6;
  --color-dreamy-candy-forest-600: #6d61a8;
  --color-dreamy-candy-forest-700: #564b8b;
  --color-dreamy-candy-forest-800: #433971;
  --color-dreamy-candy-forest-900: #332a5a;
  --color-dreamy-candy-forest-950: #1f193b;
  --color-pastel-blue: #aabfff;
  --color-pastel-blue-50: #f2f5ff;
  --color-pastel-blue-100: #e4ebff;
  --color-pastel-blue-200: #c9d7ff;
  --color-pastel-blue-300: #aabfff;
  --color-pastel-blue-400: #8c9fdb;
  --color-pastel-blue-500: #7184bf;
  --color-pastel-blue-600: #5769a2;
  --color-pastel-blue-700: #435286;
  --color-pastel-blue-800: #323f6c;
  --color-pastel-blue-900: #253056;
  --color-pastel-blue-950: #161d39;
}