Sanctum of Shadows to Cucumber Queen Color Palette

About this palette

Sanctum of Shadows to Cucumber Queen is a 4-color cool palette: #402F53 (Sanctum of Shadows), #FFF9DF (Cornsilk), #BF96F2 (Dream Vapour), #467536 (Cucumber Queen). It mixes purple, white, green tones and feels cool overall. The strongest text pairing is #402F53 on #FFF9DF with a contrast ratio of 11.36:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sanctum of Shadows	rgb(64, 47, 83)	hsl(268, 28%, 25%)
Cornsilk	rgb(255, 249, 223)	hsl(49, 100%, 94%)
Dream Vapour	rgb(191, 150, 242)	hsl(267, 78%, 77%)
Cucumber Queen	rgb(70, 117, 54)	hsl(105, 37%, 34%)

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.36:1 Very good#402F53 on #FFF9DF
Aa11.36:1 Very good#FFF9DF on #402F53
Aa5.15:1 Good#FFF9DF on #467536
Aa5.15:1 Good#467536 on #FFF9DF
Aa5.06:1 Good#402F53 on #BF96F2
Aa5.06:1 Good#BF96F2 on #402F53

Color blindness preview

CSS variables

/* Sanctum of Shadows to Cucumber Queen — https://swatchly.xyz/palette/402f53-fff9df-bf96f2-467536 */
:root {
  --sanctum-of-shadows: #402f53;
  --cornsilk: #fff9df;
  --dream-vapour: #bf96f2;
  --cucumber-queen: #467536;
}

Tailwind CSS v4

/* Sanctum of Shadows to Cucumber Queen — https://swatchly.xyz/palette/402f53-fff9df-bf96f2-467536 */
@theme {
  --color-sanctum-of-shadows: #402f53;
  --color-sanctum-of-shadows-50: #f8f2ff;
  --color-sanctum-of-shadows-100: #f0e6ff;
  --color-sanctum-of-shadows-200: #dfd0f2;
  --color-sanctum-of-shadows-300: #c9b8de;
  --color-sanctum-of-shadows-400: #ab99c2;
  --color-sanctum-of-shadows-500: #917fa8;
  --color-sanctum-of-shadows-600: #77668d;
  --color-sanctum-of-shadows-700: #615175;
  --color-sanctum-of-shadows-800: #4e3f5f;
  --color-sanctum-of-shadows-900: #402f53;
  --color-sanctum-of-shadows-950: #281e33;
  --color-cornsilk: #fff9df;
  --color-cornsilk-50: #fff9df;
  --color-cornsilk-100: #f2eedf;
  --color-cornsilk-200: #dedac8;
  --color-cornsilk-300: #c8c3ae;
  --color-cornsilk-400: #a8a38c;
  --color-cornsilk-500: #8c8770;
  --color-cornsilk-600: #716c56;
  --color-cornsilk-700: #5a5541;
  --color-cornsilk-800: #474331;
  --color-cornsilk-900: #373324;
  --color-cornsilk-950: #221f15;
  --color-dream-vapour: #bf96f2;
  --color-dream-vapour-50: #faf7ff;
  --color-dream-vapour-100: #f4edff;
  --color-dream-vapour-200: #e7d7ff;
  --color-dream-vapour-300: #d8bbff;
  --color-dream-vapour-400: #bf96f2;
  --color-dream-vapour-500: #a179d1;
  --color-dream-vapour-600: #845cb2;
  --color-dream-vapour-700: #6a4493;
  --color-dream-vapour-800: #533277;
  --color-dream-vapour-900: #40235e;
  --color-dream-vapour-950: #27133c;
  --color-cucumber-queen: #467536;
  --color-cucumber-queen-50: #e3ffda;
  --color-cucumber-queen-100: #d5f6cb;
  --color-cucumber-queen-200: #bce3b0;
  --color-cucumber-queen-300: #a1cd93;
  --color-cucumber-queen-400: #7dad6e;
  --color-cucumber-queen-500: #619151;
  --color-cucumber-queen-600: #467536;
  --color-cucumber-queen-700: #345e26;
  --color-cucumber-queen-800: #264a18;
  --color-cucumber-queen-900: #1b390f;
  --color-cucumber-queen-950: #0e2406;
}