Sanctum of Shadows to Polly Color Palette

About this palette

Sanctum of Shadows to Polly is a 5-color cool palette: #3A2C41 (Sanctum of Shadows), #0E5A72 (Deep Lagoon), #447D95 (Cry Me a River), #8BAB8B (OMGreen), #FFC8A2 (Polly). It mixes purple, blue, green, orange tones and feels cool overall. The strongest text pairing is #3A2C41 on #FFC8A2 with a contrast ratio of 8.68:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sanctum of Shadows	rgb(58, 44, 65)	hsl(280, 19%, 21%)
Deep Lagoon	rgb(14, 90, 114)	hsl(194, 78%, 25%)
Cry Me a River	rgb(68, 125, 149)	hsl(198, 37%, 43%)
OMGreen	rgb(139, 171, 139)	hsl(120, 16%, 61%)
Polly	rgb(255, 200, 162)	hsl(25, 100%, 82%)

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.

Aa8.68:1 Very good#3A2C41 on #FFC8A2
Aa8.68:1 Very good#FFC8A2 on #3A2C41
Aa5.15:1 Good#0E5A72 on #FFC8A2
Aa5.15:1 Good#FFC8A2 on #0E5A72
Aa5.13:1 Good#3A2C41 on #8BAB8B
Aa5.13:1 Good#8BAB8B on #3A2C41
Aa3.05:1 Poor#0E5A72 on #8BAB8B
Aa3.05:1 Poor#8BAB8B on #0E5A72

Color blindness preview

CSS variables

/* Sanctum of Shadows to Polly — https://swatchly.xyz/palette/3a2c41-0e5a72-447d95-8bab8b-ffc8a2 */
:root {
  --sanctum-of-shadows: #3a2c41;
  --deep-lagoon: #0e5a72;
  --cry-me-a-river: #447d95;
  --omgreen: #8bab8b;
  --polly: #ffc8a2;
}

Tailwind CSS v4

/* Sanctum of Shadows to Polly — https://swatchly.xyz/palette/3a2c41-0e5a72-447d95-8bab8b-ffc8a2 */
@theme {
  --color-sanctum-of-shadows: #3a2c41;
  --color-sanctum-of-shadows-50: #faf1ff;
  --color-sanctum-of-shadows-100: #f2e6f7;
  --color-sanctum-of-shadows-200: #dfd2e6;
  --color-sanctum-of-shadows-300: #c9bbd1;
  --color-sanctum-of-shadows-400: #ab9ab3;
  --color-sanctum-of-shadows-500: #8f7f98;
  --color-sanctum-of-shadows-600: #74657c;
  --color-sanctum-of-shadows-700: #5d4f64;
  --color-sanctum-of-shadows-800: #493d4f;
  --color-sanctum-of-shadows-900: #3a2c41;
  --color-sanctum-of-shadows-950: #231c27;
  --color-deep-lagoon: #0e5a72;
  --color-deep-lagoon-50: #e8f8ff;
  --color-deep-lagoon-100: #d1f1ff;
  --color-deep-lagoon-200: #aee0f4;
  --color-deep-lagoon-300: #90c9e1;
  --color-deep-lagoon-400: #6aaac3;
  --color-deep-lagoon-500: #4b8da7;
  --color-deep-lagoon-600: #2f728a;
  --color-deep-lagoon-700: #0e5a72;
  --color-deep-lagoon-800: #0c4659;
  --color-deep-lagoon-900: #043646;
  --color-deep-lagoon-950: #01222d;
  --color-cry-me-a-river: #447d95;
  --color-cry-me-a-river-50: #e9f8ff;
  --color-cry-me-a-river-100: #d6f2ff;
  --color-cry-me-a-river-200: #b9e2f5;
  --color-cry-me-a-river-300: #9ecee4;
  --color-cry-me-a-river-400: #7bb1c9;
  --color-cry-me-a-river-500: #5e97af;
  --color-cry-me-a-river-600: #447d95;
  --color-cry-me-a-river-700: #2e647a;
  --color-cry-me-a-river-800: #1d4e61;
  --color-cry-me-a-river-900: #113c4c;
  --color-cry-me-a-river-950: #062531;
  --color-omgreen: #8bab8b;
  --color-omgreen-50: #e8fbe8;
  --color-omgreen-100: #ddf2dd;
  --color-omgreen-200: #c6dfc6;
  --color-omgreen-300: #adc9ad;
  --color-omgreen-400: #8bab8b;
  --color-omgreen-500: #708f70;
  --color-omgreen-600: #577457;
  --color-omgreen-700: #425d43;
  --color-omgreen-800: #324932;
  --color-omgreen-900: #253925;
  --color-omgreen-950: #152315;
  --color-polly: #ffc8a2;
  --color-polly-50: #fff0e7;
  --color-polly-100: #ffe3d0;
  --color-polly-200: #ffc8a2;
  --color-polly-300: #e3b494;
  --color-polly-400: #c69471;
  --color-polly-500: #aa7855;
  --color-polly-600: #8e5f3c;
  --color-polly-700: #74492a;
  --color-polly-800: #5d381c;
  --color-polly-900: #4a2a12;
  --color-polly-950: #301907;
}