Sunlight to Sanctum of Shadows Color Palette

About this palette

Sunlight to Sanctum of Shadows is a 4-color vintage palette: #EDCC92 (Sunlight), #6EA3CD (Wandering River), #705514 (Coffee Adept), #3F3057 (Sanctum of Shadows). It mixes yellow, blue, brown, purple tones and feels balanced overall. The strongest text pairing is #EDCC92 on #3F3057 with a contrast ratio of 7.71:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sunlight	rgb(237, 204, 146)	hsl(38, 72%, 75%)
Wandering River	rgb(110, 163, 205)	hsl(207, 49%, 62%)
Coffee Adept	rgb(112, 85, 20)	hsl(42, 70%, 26%)
Sanctum of Shadows	rgb(63, 48, 87)	hsl(263, 29%, 26%)

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.71:1 Very good#EDCC92 on #3F3057
Aa7.71:1 Very good#3F3057 on #EDCC92
Aa4.55:1 Good#EDCC92 on #705514
Aa4.55:1 Good#705514 on #EDCC92
Aa4.39:1 Poor#6EA3CD on #3F3057
Aa4.39:1 Poor#3F3057 on #6EA3CD

Color blindness preview

CSS variables

/* Sunlight to Sanctum of Shadows — https://swatchly.xyz/palette/edcc92-6ea3cd-705514-3f3057 */
:root {
  --sunlight: #edcc92;
  --wandering-river: #6ea3cd;
  --coffee-adept: #705514;
  --sanctum-of-shadows: #3f3057;
}

Tailwind CSS v4

/* Sunlight to Sanctum of Shadows — https://swatchly.xyz/palette/edcc92-6ea3cd-705514-3f3057 */
@theme {
  --color-sunlight: #edcc92;
  --color-sunlight-50: #ffefd2;
  --color-sunlight-100: #f8e3bd;
  --color-sunlight-200: #edcc92;
  --color-sunlight-300: #d4b786;
  --color-sunlight-400: #b79962;
  --color-sunlight-500: #9d7e46;
  --color-sunlight-600: #82652e;
  --color-sunlight-700: #6a4f1b;
  --color-sunlight-800: #553e0e;
  --color-sunlight-900: #432f05;
  --color-sunlight-950: #2b1c01;
  --color-wandering-river: #6ea3cd;
  --color-wandering-river-50: #eaf5ff;
  --color-wandering-river-100: #d5ecff;
  --color-wandering-river-200: #b1dafb;
  --color-wandering-river-300: #94c3e9;
  --color-wandering-river-400: #6ea3cd;
  --color-wandering-river-500: #5488b1;
  --color-wandering-river-600: #3b6e94;
  --color-wandering-river-700: #29587a;
  --color-wandering-river-800: #1b4563;
  --color-wandering-river-900: #11354f;
  --color-wandering-river-950: #072134;
  --color-coffee-adept: #705514;
  --color-coffee-adept-50: #fff4de;
  --color-coffee-adept-100: #fce9c3;
  --color-coffee-adept-200: #ecd6a9;
  --color-coffee-adept-300: #d9bf8c;
  --color-coffee-adept-400: #bca067;
  --color-coffee-adept-500: #a28549;
  --color-coffee-adept-600: #876b2f;
  --color-coffee-adept-700: #705514;
  --color-coffee-adept-800: #58420b;
  --color-coffee-adept-900: #453203;
  --color-coffee-adept-950: #2c1f00;
  --color-sanctum-of-shadows: #3f3057;
  --color-sanctum-of-shadows-50: #f7f3ff;
  --color-sanctum-of-shadows-100: #eee6ff;
  --color-sanctum-of-shadows-200: #ddd0f5;
  --color-sanctum-of-shadows-300: #c7b9e2;
  --color-sanctum-of-shadows-400: #a99ac6;
  --color-sanctum-of-shadows-500: #8f7fac;
  --color-sanctum-of-shadows-600: #766691;
  --color-sanctum-of-shadows-700: #605179;
  --color-sanctum-of-shadows-800: #4d4063;
  --color-sanctum-of-shadows-900: #3f3057;
  --color-sanctum-of-shadows-950: #271f35;
}