Sanctum of Shadows to Turquoise Fantasies color palette

3C2E45Sanctum of Shadows 6B5A7CPlummy DBCBB3Tatami 937E60Mushroom Forest 77B0B0Turquoise Fantasies

About this palette

Sanctum of Shadows to Turquoise Fantasies is a 5-color muted, cool, vintage palette: #3C2E45 (Sanctum of Shadows), #6B5A7C (Plummy), #DBCBB3 (Tatami), #937E60 (Mushroom Forest), #77B0B0 (Turquoise Fantasies). It mixes purple, yellow, turquoise tones and feels cool overall. The strongest text pairing is #3C2E45 on #DBCBB3 with a contrast ratio of 7.91:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sanctum of Shadows	rgb(60, 46, 69)	hsl(277, 20%, 23%)
Plummy	rgb(107, 90, 124)	hsl(270, 16%, 42%)
Tatami	rgb(219, 203, 179)	hsl(36, 36%, 78%)
Mushroom Forest	rgb(147, 126, 96)	hsl(35, 21%, 48%)
Turquoise Fantasies	rgb(119, 176, 176)	hsl(180, 27%, 58%)

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.91:1 Very good#3C2E45 on #DBCBB3
Aa7.91:1 Very good#DBCBB3 on #3C2E45
Aa5.17:1 Good#3C2E45 on #77B0B0
Aa5.17:1 Good#77B0B0 on #3C2E45
Aa3.91:1 Poor#6B5A7C on #DBCBB3
Aa3.91:1 Poor#DBCBB3 on #6B5A7C
Aa3.23:1 Poor#3C2E45 on #937E60
Aa3.23:1 Poor#937E60 on #3C2E45

Color blindness preview

CSS variables

/* Sanctum of Shadows to Turquoise Fantasies — https://swatchly.xyz/palette/3c2e45-6b5a7c-dbcbb3-937e60-77b0b0 */
:root {
  --sanctum-of-shadows: #3c2e45;
  --plummy: #6b5a7c;
  --tatami: #dbcbb3;
  --mushroom-forest: #937e60;
  --turquoise-fantasies: #77b0b0;
}

Tailwind CSS v4

/* Sanctum of Shadows to Turquoise Fantasies — https://swatchly.xyz/palette/3c2e45-6b5a7c-dbcbb3-937e60-77b0b0 */
@theme {
  --color-sanctum-of-shadows: #3c2e45;
  --color-sanctum-of-shadows-50: #f9f2ff;
  --color-sanctum-of-shadows-100: #f1e6f9;
  --color-sanctum-of-shadows-200: #dfd2e8;
  --color-sanctum-of-shadows-300: #c9bad3;
  --color-sanctum-of-shadows-400: #ab9bb5;
  --color-sanctum-of-shadows-500: #90809a;
  --color-sanctum-of-shadows-600: #75667f;
  --color-sanctum-of-shadows-700: #5e5067;
  --color-sanctum-of-shadows-800: #4a3e53;
  --color-sanctum-of-shadows-900: #3c2e45;
  --color-sanctum-of-shadows-950: #251d2a;
  --color-plummy: #6b5a7c;
  --color-plummy-50: #f8f2ff;
  --color-plummy-100: #f0e4fd;
  --color-plummy-200: #dbcdeb;
  --color-plummy-300: #c4b4d5;
  --color-plummy-400: #a492b6;
  --color-plummy-500: #877599;
  --color-plummy-600: #6b5a7c;
  --color-plummy-700: #554664;
  --color-plummy-800: #433650;
  --color-plummy-900: #34293f;
  --color-plummy-950: #211928;
  --color-tatami: #dbcbb3;
  --color-tatami-50: #f7edde;
  --color-tatami-100: #ece1d1;
  --color-tatami-200: #dbcbb3;
  --color-tatami-300: #c5b7a2;
  --color-tatami-400: #a89983;
  --color-tatami-500: #8e7f69;
  --color-tatami-600: #756752;
  --color-tatami-700: #5e523f;
  --color-tatami-800: #4c4130;
  --color-tatami-900: #3b3123;
  --color-tatami-950: #251e14;
  --color-mushroom-forest: #937e60;
  --color-mushroom-forest-50: #fff2e1;
  --color-mushroom-forest-100: #f6e7d3;
  --color-mushroom-forest-200: #e4d2ba;
  --color-mushroom-forest-300: #cebb9f;
  --color-mushroom-forest-400: #af9a7c;
  --color-mushroom-forest-500: #937e60;
  --color-mushroom-forest-600: #786548;
  --color-mushroom-forest-700: #614f35;
  --color-mushroom-forest-800: #4d3d27;
  --color-mushroom-forest-900: #3c2f1c;
  --color-mushroom-forest-950: #261d0f;
  --color-turquoise-fantasies: #77b0b0;
  --color-turquoise-fantasies-50: #defdfd;
  --color-turquoise-fantasies-100: #d2f5f4;
  --color-turquoise-fantasies-200: #b9e3e2;
  --color-turquoise-fantasies-300: #9ecece;
  --color-turquoise-fantasies-400: #77b0b0;
  --color-turquoise-fantasies-500: #5b9494;
  --color-turquoise-fantasies-600: #417878;
  --color-turquoise-fantasies-700: #2c6060;
  --color-turquoise-fantasies-800: #1d4b4c;
  --color-turquoise-fantasies-900: #123a3a;
  --color-turquoise-fantasies-950: #072424;
}