Ghost White to Shuriken Color Palette

About this palette

Ghost White to Shuriken is a 5-color muted, cool, gradient palette: #F8F8FF (Ghost White), #C7C9E3 (Dust of the Moon), #9796B3 (Moon Veil), #6D6A8C (Dark Prince), #323245 (Shuriken). It mixes white, purple, gray tones and feels cool overall. The strongest text pairing is #F8F8FF on #323245 with a contrast ratio of 11.84:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ghost White	rgb(248, 248, 255)	hsl(240, 100%, 99%)
Dust of the Moon	rgb(199, 201, 227)	hsl(236, 33%, 84%)
Moon Veil	rgb(151, 150, 179)	hsl(242, 16%, 65%)
Dark Prince	rgb(109, 106, 140)	hsl(245, 14%, 48%)
Shuriken	rgb(50, 50, 69)	hsl(240, 16%, 23%)

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.

Aa11.84:1 Very good#F8F8FF on #323245
Aa11.84:1 Very good#323245 on #F8F8FF
Aa7.68:1 Very good#C7C9E3 on #323245
Aa7.68:1 Very good#323245 on #C7C9E3
Aa4.86:1 Good#F8F8FF on #6D6A8C
Aa4.86:1 Good#6D6A8C on #F8F8FF
Aa4.37:1 Poor#9796B3 on #323245
Aa4.37:1 Poor#323245 on #9796B3

Color blindness preview

CSS variables

/* Ghost White to Shuriken — https://swatchly.xyz/palette/f8f8ff-c7c9e3-9796b3-6d6a8c-323245 */
:root {
  --ghost-white: #f8f8ff;
  --dust-of-the-moon: #c7c9e3;
  --moon-veil: #9796b3;
  --dark-prince: #6d6a8c;
  --shuriken: #323245;
}

Tailwind CSS v4

/* Ghost White to Shuriken — https://swatchly.xyz/palette/f8f8ff-c7c9e3-9796b3-6d6a8c-323245 */
@theme {
  --color-ghost-white: #f8f8ff;
  --color-ghost-white-50: #f8f8ff;
  --color-ghost-white-100: #eeeef2;
  --color-ghost-white-200: #d9d9de;
  --color-ghost-white-300: #c2c2c8;
  --color-ghost-white-400: #a2a2a8;
  --color-ghost-white-500: #86868c;
  --color-ghost-white-600: #6b6b71;
  --color-ghost-white-700: #55555a;
  --color-ghost-white-800: #424246;
  --color-ghost-white-900: #323236;
  --color-ghost-white-950: #1f1f22;
  --color-dust-of-the-moon: #c7c9e3;
  --color-dust-of-the-moon-50: #fafaff;
  --color-dust-of-the-moon-100: #f0f1ff;
  --color-dust-of-the-moon-200: #dddff1;
  --color-dust-of-the-moon-300: #c7c9e3;
  --color-dust-of-the-moon-400: #a6a8bf;
  --color-dust-of-the-moon-500: #898aa3;
  --color-dust-of-the-moon-600: #6d6e85;
  --color-dust-of-the-moon-700: #55566b;
  --color-dust-of-the-moon-800: #414254;
  --color-dust-of-the-moon-900: #303140;
  --color-dust-of-the-moon-950: #1e1e29;
  --color-moon-veil: #9796b3;
  --color-moon-veil-50: #f1f1ff;
  --color-moon-veil-100: #e5e5f9;
  --color-moon-veil-200: #d0cfe7;
  --color-moon-veil-300: #b8b7d1;
  --color-moon-veil-400: #9796b3;
  --color-moon-veil-500: #7d7c98;
  --color-moon-veil-600: #65647e;
  --color-moon-veil-700: #504f66;
  --color-moon-veil-800: #3e3d52;
  --color-moon-veil-900: #302f41;
  --color-moon-veil-950: #1e1e2a;
  --color-dark-prince: #6d6a8c;
  --color-dark-prince-50: #f4f4ff;
  --color-dark-prince-100: #eae9ff;
  --color-dark-prince-200: #d7d5f1;
  --color-dark-prince-300: #c1bede;
  --color-dark-prince-400: #a29fc2;
  --color-dark-prince-500: #8784a7;
  --color-dark-prince-600: #6d6a8c;
  --color-dark-prince-700: #565372;
  --color-dark-prince-800: #43405b;
  --color-dark-prince-900: #333147;
  --color-dark-prince-950: #1f1e2e;
  --color-shuriken: #323245;
  --color-shuriken-50: #f4f4ff;
  --color-shuriken-100: #e9eaf9;
  --color-shuriken-200: #d5d6e8;
  --color-shuriken-300: #bebfd3;
  --color-shuriken-400: #9f9fb6;
  --color-shuriken-500: #84849b;
  --color-shuriken-600: #6a6a80;
  --color-shuriken-700: #545467;
  --color-shuriken-800: #414253;
  --color-shuriken-900: #323245;
  --color-shuriken-950: #1f1f29;
}