Mediaeval Blue to Neon Boneyard color palette

363760Mediaeval Blue 6353A6Ultrapurple Merge 5D7BA0Montreux Blue 7C93CEKing Neptune D79FF2Lilac E2C5F9Neon Boneyard

Open in generator Export PNG, PDF, ASE…

About this palette

Mediaeval Blue to Neon Boneyard is a 6-color cool, gradient palette: #363760 (Mediaeval Blue), #6353A6 (Ultrapurple Merge), #5D7BA0 (Montreux Blue), #7C93CE (King Neptune), #D79FF2 (Lilac), #E2C5F9 (Neon Boneyard). It mixes purple, blue tones and feels cool overall. The strongest text pairing is #363760 on #E2C5F9 with a contrast ratio of 7.26:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mediaeval Blue	rgb(54, 55, 96)	hsl(239, 28%, 29%)
Ultrapurple Merge	rgb(99, 83, 166)	hsl(252, 33%, 49%)
Montreux Blue	rgb(93, 123, 160)	hsl(213, 26%, 50%)
King Neptune	rgb(124, 147, 206)	hsl(223, 46%, 65%)
Lilac	rgb(215, 159, 242)	hsl(280, 76%, 79%)
Neon Boneyard	rgb(226, 197, 249)	hsl(273, 81%, 87%)

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.

Aa7.26:1 Very good#363760 on #E2C5F9
Aa7.26:1 Very good#E2C5F9 on #363760
Aa5.41:1 Good#363760 on #D79FF2
Aa5.41:1 Good#D79FF2 on #363760
Aa4.09:1 Poor#6353A6 on #E2C5F9
Aa4.09:1 Poor#E2C5F9 on #6353A6
Aa3.70:1 Poor#363760 on #7C93CE
Aa3.70:1 Poor#7C93CE on #363760

Color blindness preview

CSS variables

/* Mediaeval Blue to Neon Boneyard — https://swatchly.xyz/palette/363760-6353a6-5d7ba0-7c93ce-d79ff2-e2c5f9 */
:root {
  --mediaeval-blue: #363760;
  --ultrapurple-merge: #6353a6;
  --montreux-blue: #5d7ba0;
  --king-neptune: #7c93ce;
  --lilac: #d79ff2;
  --neon-boneyard: #e2c5f9;
}

Tailwind CSS v4

/* Mediaeval Blue to Neon Boneyard — https://swatchly.xyz/palette/363760-6353a6-5d7ba0-7c93ce-d79ff2-e2c5f9 */
@theme {
  --color-mediaeval-blue: #363760;
  --color-mediaeval-blue-50: #f3f4ff;
  --color-mediaeval-blue-100: #e7e9ff;
  --color-mediaeval-blue-200: #d1d4fa;
  --color-mediaeval-blue-300: #b8bce7;
  --color-mediaeval-blue-400: #979bc9;
  --color-mediaeval-blue-500: #7b7eac;
  --color-mediaeval-blue-600: #60638e;
  --color-mediaeval-blue-700: #4a4c72;
  --color-mediaeval-blue-800: #363760;
  --color-mediaeval-blue-900: #2a2b46;
  --color-mediaeval-blue-950: #19192d;
  --color-ultrapurple-merge: #6353a6;
  --color-ultrapurple-merge-50: #f5f4ff;
  --color-ultrapurple-merge-100: #e8e6ff;
  --color-ultrapurple-merge-200: #d3cdff;
  --color-ultrapurple-merge-300: #bab0ff;
  --color-ultrapurple-merge-400: #9a8de3;
  --color-ultrapurple-merge-500: #7e6fc5;
  --color-ultrapurple-merge-600: #6353a6;
  --color-ultrapurple-merge-700: #4e4088;
  --color-ultrapurple-merge-800: #3d306f;
  --color-ultrapurple-merge-900: #2f2459;
  --color-ultrapurple-merge-950: #1d153b;
  --color-montreux-blue: #5d7ba0;
  --color-montreux-blue-50: #eff6ff;
  --color-montreux-blue-100: #e2efff;
  --color-montreux-blue-200: #c7dffc;
  --color-montreux-blue-300: #b0cbec;
  --color-montreux-blue-400: #90add2;
  --color-montreux-blue-500: #7594ba;
  --color-montreux-blue-600: #5d7ba0;
  --color-montreux-blue-700: #466284;
  --color-montreux-blue-800: #334c6a;
  --color-montreux-blue-900: #253a53;
  --color-montreux-blue-950: #152436;
  --color-king-neptune: #7c93ce;
  --color-king-neptune-50: #eaf0ff;
  --color-king-neptune-100: #d9e4ff;
  --color-king-neptune-200: #baceff;
  --color-king-neptune-300: #9fb5ec;
  --color-king-neptune-400: #7c93ce;
  --color-king-neptune-500: #647ab3;
  --color-king-neptune-600: #4e6297;
  --color-king-neptune-700: #3c4d7d;
  --color-king-neptune-800: #2d3c66;
  --color-king-neptune-900: #222f53;
  --color-king-neptune-950: #141e38;
  --color-lilac: #d79ff2;
  --color-lilac-50: #f8ebff;
  --color-lilac-100: #f3dbff;
  --color-lilac-200: #e9bdff;
  --color-lilac-300: #d79ff2;
  --color-lilac-400: #b782d1;
  --color-lilac-500: #9d67b6;
  --color-lilac-600: #824f9a;
  --color-lilac-700: #6a3c80;
  --color-lilac-800: #562c68;
  --color-lilac-900: #442154;
  --color-lilac-950: #2c1237;
  --color-neon-boneyard: #e2c5f9;
  --color-neon-boneyard-50: #f7edff;
  --color-neon-boneyard-100: #f1dfff;
  --color-neon-boneyard-200: #e2c5f9;
  --color-neon-boneyard-300: #cab1de;
  --color-neon-boneyard-400: #ad92c1;
  --color-neon-boneyard-500: #9277a7;
  --color-neon-boneyard-600: #785e8b;
  --color-neon-boneyard-700: #614972;
  --color-neon-boneyard-800: #4d385c;
  --color-neon-boneyard-900: #3c2a49;
  --color-neon-boneyard-950: #26192f;
}