Rainy Mood to Secret Passage color palette

4994A5Rainy Mood 75556CHibernation E4E1BCFrost D79FD0Velvet Horizon 372D13Secret Passage

About this palette

Rainy Mood to Secret Passage is a 5-color warm, vintage palette: #4994A5 (Rainy Mood), #75556C (Hibernation), #E4E1BC (Frost), #D79FD0 (Velvet Horizon), #372D13 (Secret Passage). It mixes turquoise, pink, yellow, brown tones and feels warm overall. The strongest text pairing is #E4E1BC on #372D13 with a contrast ratio of 10.21:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Rainy Mood	rgb(73, 148, 165)	hsl(191, 39%, 47%)
Hibernation	rgb(117, 85, 108)	hsl(317, 16%, 40%)
Frost	rgb(228, 225, 188)	hsl(55, 43%, 82%)
Velvet Horizon	rgb(215, 159, 208)	hsl(308, 41%, 73%)
Secret Passage	rgb(55, 45, 19)	hsl(43, 49%, 15%)

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.

Aa10.21:1 Very good#E4E1BC on #372D13
Aa10.21:1 Very good#372D13 on #E4E1BC
Aa6.31:1 Good#D79FD0 on #372D13
Aa6.31:1 Good#372D13 on #D79FD0
Aa4.83:1 Good#75556C on #E4E1BC
Aa4.83:1 Good#E4E1BC on #75556C
Aa3.92:1 Poor#4994A5 on #372D13
Aa3.92:1 Poor#372D13 on #4994A5

Color blindness preview

CSS variables

/* Rainy Mood to Secret Passage — https://swatchly.xyz/palette/4994a5-75556c-e4e1bc-d79fd0-372d13 */
:root {
  --rainy-mood: #4994a5;
  --hibernation: #75556c;
  --frost: #e4e1bc;
  --velvet-horizon: #d79fd0;
  --secret-passage: #372d13;
}

Tailwind CSS v4

/* Rainy Mood to Secret Passage — https://swatchly.xyz/palette/4994a5-75556c-e4e1bc-d79fd0-372d13 */
@theme {
  --color-rainy-mood: #4994a5;
  --color-rainy-mood-50: #e5faff;
  --color-rainy-mood-100: #caf4ff;
  --color-rainy-mood-200: #ade3f0;
  --color-rainy-mood-300: #90cedd;
  --color-rainy-mood-400: #69afc0;
  --color-rainy-mood-500: #4994a5;
  --color-rainy-mood-600: #2c7889;
  --color-rainy-mood-700: #15606f;
  --color-rainy-mood-800: #034c59;
  --color-rainy-mood-900: #003a45;
  --color-rainy-mood-950: #00242c;
  --color-hibernation: #75556c;
  --color-hibernation-50: #fff0fa;
  --color-hibernation-100: #f9e1f1;
  --color-hibernation-200: #e6c9dd;
  --color-hibernation-300: #d0b0c6;
  --color-hibernation-400: #b08da6;
  --color-hibernation-500: #927088;
  --color-hibernation-600: #75556c;
  --color-hibernation-700: #5e4256;
  --color-hibernation-800: #4a3344;
  --color-hibernation-900: #3a2735;
  --color-hibernation-950: #251721;
  --color-frost: #e4e1bc;
  --color-frost-50: #fdfbe8;
  --color-frost-100: #f4f3dd;
  --color-frost-200: #e4e1bc;
  --color-frost-300: #cbc9ab;
  --color-frost-400: #aba887;
  --color-frost-500: #8e8b69;
  --color-frost-600: #73704f;
  --color-frost-700: #5a583a;
  --color-frost-800: #464429;
  --color-frost-900: #36341e;
  --color-frost-950: #212010;
  --color-velvet-horizon: #d79fd0;
  --color-velvet-horizon-50: #ffe6fb;
  --color-velvet-horizon-100: #fcd4f6;
  --color-velvet-horizon-200: #eabce4;
  --color-velvet-horizon-300: #d79fd0;
  --color-velvet-horizon-400: #b883b2;
  --color-velvet-horizon-500: #9e6a98;
  --color-velvet-horizon-600: #83527e;
  --color-velvet-horizon-700: #6c3f67;
  --color-velvet-horizon-800: #573053;
  --color-velvet-horizon-900: #462543;
  --color-velvet-horizon-950: #2d152b;
  --color-secret-passage: #372d13;
  --color-secret-passage-50: #fcf5e4;
  --color-secret-passage-100: #f2ebd8;
  --color-secret-passage-200: #e0d7c0;
  --color-secret-passage-300: #cbc0a7;
  --color-secret-passage-400: #aba084;
  --color-secret-passage-500: #8f8367;
  --color-secret-passage-600: #73684d;
  --color-secret-passage-700: #5b5139;
  --color-secret-passage-800: #463e29;
  --color-secret-passage-900: #372d13;
  --color-secret-passage-950: #201b0f;
}