Purple’s Baby Sister to Hibernation color palette

E9C2F0Purple’s Baby Sister 452C50Sanctum of Shadows 74A15DFrankenstein 677A56Dill 91B996Foliage 6C536CHibernation

Open in generator Export PNG, PDF, ASE…

About this palette

Purple’s Baby Sister to Hibernation is a 6-color cool palette: #E9C2F0 (Purple’s Baby Sister), #452C50 (Sanctum of Shadows), #74A15D (Frankenstein), #677A56 (Dill), #91B996 (Foliage), #6C536C (Hibernation). It mixes purple, green, pink tones and feels cool overall. The strongest text pairing is #E9C2F0 on #452C50 with a contrast ratio of 7.77:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Purple’s Baby Sister	rgb(233, 194, 240)	hsl(291, 61%, 85%)
Sanctum of Shadows	rgb(69, 44, 80)	hsl(282, 29%, 24%)
Frankenstein	rgb(116, 161, 93)	hsl(100, 27%, 50%)
Dill	rgb(103, 122, 86)	hsl(92, 17%, 41%)
Foliage	rgb(145, 185, 150)	hsl(128, 22%, 65%)
Hibernation	rgb(108, 83, 108)	hsl(300, 13%, 37%)

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.77:1 Very good#E9C2F0 on #452C50
Aa7.77:1 Very good#452C50 on #E9C2F0
Aa5.54:1 Good#452C50 on #91B996
Aa5.54:1 Good#91B996 on #452C50
Aa4.35:1 Poor#E9C2F0 on #6C536C
Aa4.35:1 Poor#6C536C on #E9C2F0
Aa4.05:1 Poor#452C50 on #74A15D
Aa4.05:1 Poor#74A15D on #452C50

Color blindness preview

CSS variables

/* Purple’s Baby Sister to Hibernation — https://swatchly.xyz/palette/e9c2f0-452c50-74a15d-677a56-91b996-6c536c */
:root {
  --purple-s-baby-sister: #e9c2f0;
  --sanctum-of-shadows: #452c50;
  --frankenstein: #74a15d;
  --dill: #677a56;
  --foliage: #91b996;
  --hibernation: #6c536c;
}

Tailwind CSS v4

/* Purple’s Baby Sister to Hibernation — https://swatchly.xyz/palette/e9c2f0-452c50-74a15d-677a56-91b996-6c536c */
@theme {
  --color-purple-s-baby-sister: #e9c2f0;
  --color-purple-s-baby-sister-50: #fceaff;
  --color-purple-s-baby-sister-100: #f6dcfa;
  --color-purple-s-baby-sister-200: #e9c2f0;
  --color-purple-s-baby-sister-300: #d0afd6;
  --color-purple-s-baby-sister-400: #b38fba;
  --color-purple-s-baby-sister-500: #99759f;
  --color-purple-s-baby-sister-600: #7e5c84;
  --color-purple-s-baby-sister-700: #66476c;
  --color-purple-s-baby-sister-800: #523757;
  --color-purple-s-baby-sister-900: #402944;
  --color-purple-s-baby-sister-950: #29182c;
  --color-sanctum-of-shadows: #452c50;
  --color-sanctum-of-shadows-50: #fbf1ff;
  --color-sanctum-of-shadows-100: #f6e3ff;
  --color-sanctum-of-shadows-200: #e4ceef;
  --color-sanctum-of-shadows-300: #cfb6db;
  --color-sanctum-of-shadows-400: #b297bf;
  --color-sanctum-of-shadows-500: #987ca5;
  --color-sanctum-of-shadows-600: #7e638a;
  --color-sanctum-of-shadows-700: #664e72;
  --color-sanctum-of-shadows-800: #533d5d;
  --color-sanctum-of-shadows-900: #452c50;
  --color-sanctum-of-shadows-950: #2b1d31;
  --color-frankenstein: #74a15d;
  --color-frankenstein-50: #eaffe0;
  --color-frankenstein-100: #ddfad0;
  --color-frankenstein-200: #c8eab8;
  --color-frankenstein-300: #b0d79e;
  --color-frankenstein-400: #8fba7a;
  --color-frankenstein-500: #74a15d;
  --color-frankenstein-600: #588341;
  --color-frankenstein-700: #41692b;
  --color-frankenstein-800: #2f521b;
  --color-frankenstein-900: #213f0f;
  --color-frankenstein-950: #122705;
  --color-dill: #677a56;
  --color-dill-50: #eefae4;
  --color-dill-100: #e4f2d9;
  --color-dill-200: #d1e0c3;
  --color-dill-300: #baccab;
  --color-dill-400: #9bae8a;
  --color-dill-500: #80946f;
  --color-dill-600: #677a56;
  --color-dill-700: #506141;
  --color-dill-800: #3d4c2f;
  --color-dill-900: #2e3b22;
  --color-dill-950: #1b2513;
  --color-foliage: #91b996;
  --color-foliage-50: #edffef;
  --color-foliage-100: #e1f9e3;
  --color-foliage-200: #cce8cf;
  --color-foliage-300: #b4d5b8;
  --color-foliage-400: #91b996;
  --color-foliage-500: #749b79;
  --color-foliage-600: #587e5d;
  --color-foliage-700: #426447;
  --color-foliage-800: #304e34;
  --color-foliage-900: #223b26;
  --color-foliage-950: #122415;
  --color-hibernation: #6c536c;
  --color-hibernation-50: #ffefff;
  --color-hibernation-100: #f7e4f6;
  --color-hibernation-200: #e6d1e6;
  --color-hibernation-300: #d3bbd3;
  --color-hibernation-400: #b69cb6;
  --color-hibernation-500: #9c819c;
  --color-hibernation-600: #826882;
  --color-hibernation-700: #6c536c;
  --color-hibernation-800: #554055;
  --color-hibernation-900: #423042;
  --color-hibernation-950: #2a1d2a;
}