Secret Passage to Frost Fairy color palette

312400Secret Passage 4772D0Fading Night B2965BKathmandu 5F4202Very Coffee B8D1FAFrost Fairy

About this palette

Secret Passage to Frost Fairy is a 5-color warm, earthy, vintage palette: #312400 (Secret Passage), #4772D0 (Fading Night), #B2965B (Kathmandu), #5F4202 (Very Coffee), #B8D1FA (Frost Fairy). It mixes brown, blue, yellow tones and feels warm overall. The strongest text pairing is #312400 on #B8D1FA with a contrast ratio of 9.79:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Secret Passage	rgb(49, 36, 0)	hsl(44, 100%, 10%)
Fading Night	rgb(71, 114, 208)	hsl(221, 59%, 55%)
Kathmandu	rgb(178, 150, 91)	hsl(41, 36%, 53%)
Very Coffee	rgb(95, 66, 2)	hsl(41, 96%, 19%)
Frost Fairy	rgb(184, 209, 250)	hsl(217, 87%, 85%)

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.

Aa9.79:1 Very good#312400 on #B8D1FA
Aa9.79:1 Very good#B8D1FA on #312400
Aa5.97:1 Good#5F4202 on #B8D1FA
Aa5.97:1 Good#B8D1FA on #5F4202
Aa5.36:1 Good#312400 on #B2965B
Aa5.36:1 Good#B2965B on #312400
Aa3.32:1 Poor#312400 on #4772D0
Aa3.32:1 Poor#4772D0 on #312400

Color blindness preview

CSS variables

/* Secret Passage to Frost Fairy — https://swatchly.xyz/palette/312400-4772d0-b2965b-5f4202-b8d1fa */
:root {
  --secret-passage: #312400;
  --fading-night: #4772d0;
  --kathmandu: #b2965b;
  --very-coffee: #5f4202;
  --frost-fairy: #b8d1fa;
}

Tailwind CSS v4

/* Secret Passage to Frost Fairy — https://swatchly.xyz/palette/312400-4772d0-b2965b-5f4202-b8d1fa */
@theme {
  --color-secret-passage: #312400;
  --color-secret-passage-50: #fdf5df;
  --color-secret-passage-100: #f5ead2;
  --color-secret-passage-200: #e3d7ba;
  --color-secret-passage-300: #cdc09f;
  --color-secret-passage-400: #afa07c;
  --color-secret-passage-500: #958661;
  --color-secret-passage-600: #7c6d4a;
  --color-secret-passage-700: #655837;
  --color-secret-passage-800: #524629;
  --color-secret-passage-900: #42381e;
  --color-secret-passage-950: #312400;
  --color-fading-night: #4772d0;
  --color-fading-night-50: #f0f5ff;
  --color-fading-night-100: #e5eeff;
  --color-fading-night-200: #cadcff;
  --color-fading-night-300: #abc7ff;
  --color-fading-night-400: #7da7ff;
  --color-fading-night-500: #5f8cec;
  --color-fading-night-600: #4772d0;
  --color-fading-night-700: #3258af;
  --color-fading-night-800: #224390;
  --color-fading-night-900: #163274;
  --color-fading-night-950: #0a1e4e;
  --color-kathmandu: #b2965b;
  --color-kathmandu-50: #fff1d4;
  --color-kathmandu-100: #f8e5be;
  --color-kathmandu-200: #e6d0a2;
  --color-kathmandu-300: #d0b783;
  --color-kathmandu-400: #b2965b;
  --color-kathmandu-500: #977c41;
  --color-kathmandu-600: #7d6329;
  --color-kathmandu-700: #654e17;
  --color-kathmandu-800: #513d0a;
  --color-kathmandu-900: #402f03;
  --color-kathmandu-950: #2a1d01;
  --color-very-coffee: #5f4202;
  --color-very-coffee-50: #fff4e1;
  --color-very-coffee-100: #fde8c6;
  --color-very-coffee-200: #edd4ab;
  --color-very-coffee-300: #dabe8f;
  --color-very-coffee-400: #be9f6a;
  --color-very-coffee-500: #a4844e;
  --color-very-coffee-600: #896a35;
  --color-very-coffee-700: #715522;
  --color-very-coffee-800: #5f4202;
  --color-very-coffee-900: #483309;
  --color-very-coffee-950: #2f1f02;
  --color-frost-fairy: #b8d1fa;
  --color-frost-fairy-50: #e7f0ff;
  --color-frost-fairy-100: #d6e6ff;
  --color-frost-fairy-200: #b8d1fa;
  --color-frost-fairy-300: #a6bcdf;
  --color-frost-fairy-400: #879ec3;
  --color-frost-fairy-500: #6d83a9;
  --color-frost-fairy-600: #556a8e;
  --color-frost-fairy-700: #415575;
  --color-frost-fairy-800: #32435f;
  --color-frost-fairy-900: #25334b;
  --color-frost-fairy-950: #151f30;
}