Violet Heaven to Jade Palace color palette

D7B8F2Violet Heaven D5CA97Golden Mist F0CBFDKissed by Mist C4E7FFSalty Ice D0F3D9Jade Palace

About this palette

Violet Heaven to Jade Palace is a 5-color pastel, light, cool palette: #D7B8F2 (Violet Heaven), #D5CA97 (Golden Mist), #F0CBFD (Kissed by Mist), #C4E7FF (Salty Ice), #D0F3D9 (Jade Palace). It mixes purple, yellow, blue, green tones and feels cool overall. The strongest text pairing is #D7B8F2 on #D0F3D9 with a contrast ratio of 1.46:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Violet Heaven	rgb(215, 184, 242)	hsl(272, 69%, 84%)
Golden Mist	rgb(213, 202, 151)	hsl(49, 42%, 71%)
Kissed by Mist	rgb(240, 203, 253)	hsl(284, 93%, 89%)
Salty Ice	rgb(196, 231, 255)	hsl(204, 100%, 88%)
Jade Palace	rgb(208, 243, 217)	hsl(135, 59%, 88%)

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.

Color blindness preview

CSS variables

/* Violet Heaven to Jade Palace — https://swatchly.xyz/palette/d7b8f2-d5ca97-f0cbfd-c4e7ff-d0f3d9 */
:root {
  --violet-heaven: #d7b8f2;
  --golden-mist: #d5ca97;
  --kissed-by-mist: #f0cbfd;
  --salty-ice: #c4e7ff;
  --jade-palace: #d0f3d9;
}

Tailwind CSS v4

/* Violet Heaven to Jade Palace — https://swatchly.xyz/palette/d7b8f2-d5ca97-f0cbfd-c4e7ff-d0f3d9 */
@theme {
  --color-violet-heaven: #d7b8f2;
  --color-violet-heaven-50: #fbf6ff;
  --color-violet-heaven-100: #f5eaff;
  --color-violet-heaven-200: #e8d2fc;
  --color-violet-heaven-300: #d7b8f2;
  --color-violet-heaven-400: #b599ce;
  --color-violet-heaven-500: #997cb2;
  --color-violet-heaven-600: #7d6094;
  --color-violet-heaven-700: #644a79;
  --color-violet-heaven-800: #4e3861;
  --color-violet-heaven-900: #3c294b;
  --color-violet-heaven-950: #261831;
  --color-golden-mist: #d5ca97;
  --color-golden-mist-50: #fffae2;
  --color-golden-mist-100: #f8f2d4;
  --color-golden-mist-200: #e7dfbc;
  --color-golden-mist-300: #d5ca97;
  --color-golden-mist-400: #b3a97a;
  --color-golden-mist-500: #968c5b;
  --color-golden-mist-600: #7a7040;
  --color-golden-mist-700: #61582c;
  --color-golden-mist-800: #4c441d;
  --color-golden-mist-900: #3a3312;
  --color-golden-mist-950: #241f07;
  --color-kissed-by-mist: #f0cbfd;
  --color-kissed-by-mist-50: #fcf4ff;
  --color-kissed-by-mist-100: #f9e6ff;
  --color-kissed-by-mist-200: #f0cbfd;
  --color-kissed-by-mist-300: #d5b7e0;
  --color-kissed-by-mist-400: #b795c2;
  --color-kissed-by-mist-500: #9b79a7;
  --color-kissed-by-mist-600: #7f5e8a;
  --color-kissed-by-mist-700: #664970;
  --color-kissed-by-mist-800: #513759;
  --color-kissed-by-mist-900: #3f2946;
  --color-kissed-by-mist-950: #28182d;
  --color-salty-ice: #c4e7ff;
  --color-salty-ice-50: #dbf0ff;
  --color-salty-ice-100: #c4e7ff;
  --color-salty-ice-200: #b9d4e6;
  --color-salty-ice-300: #a2bfd4;
  --color-salty-ice-400: #82a2b8;
  --color-salty-ice-500: #68889e;
  --color-salty-ice-600: #506f83;
  --color-salty-ice-700: #3d596c;
  --color-salty-ice-800: #2d4656;
  --color-salty-ice-900: #203643;
  --color-salty-ice-950: #12212b;
  --color-jade-palace: #d0f3d9;
  --color-jade-palace-50: #e5f9ea;
  --color-jade-palace-100: #d0f3d9;
  --color-jade-palace-200: #c3ddca;
  --color-jade-palace-300: #abc8b2;
  --color-jade-palace-400: #8aaa92;
  --color-jade-palace-500: #6e8f77;
  --color-jade-palace-600: #55745e;
  --color-jade-palace-700: #415d49;
  --color-jade-palace-800: #314938;
  --color-jade-palace-900: #24382a;
  --color-jade-palace-950: #142319;
}