Secret Passage to Salt Mountain color palette

392B00Secret Passage 833133Dockside Red 5B77C0Flood EAB4B3Deeply Embarrassed D9F9FESalt Mountain

About this palette

Secret Passage to Salt Mountain is a 5-color warm, vintage palette: #392B00 (Secret Passage), #833133 (Dockside Red), #5B77C0 (Flood), #EAB4B3 (Deeply Embarrassed), #D9F9FE (Salt Mountain). It mixes brown, red, blue, pink, white tones and feels warm overall. The strongest text pairing is #392B00 on #D9F9FE with a contrast ratio of 12.46:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Secret Passage	rgb(57, 43, 0)	hsl(45, 100%, 11%)
Dockside Red	rgb(131, 49, 51)	hsl(359, 46%, 35%)
Flood	rgb(91, 119, 192)	hsl(223, 44%, 55%)
Deeply Embarrassed	rgb(234, 180, 179)	hsl(1, 57%, 81%)
Salt Mountain	rgb(217, 249, 254)	hsl(188, 95%, 92%)

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.

Aa12.46:1 Super#392B00 on #D9F9FE
Aa12.46:1 Super#D9F9FE on #392B00
Aa7.72:1 Very good#833133 on #D9F9FE
Aa7.72:1 Very good#D9F9FE on #833133
Aa7.69:1 Very good#392B00 on #EAB4B3
Aa7.69:1 Very good#EAB4B3 on #392B00
Aa4.76:1 Good#833133 on #EAB4B3
Aa4.76:1 Good#EAB4B3 on #833133

Color blindness preview

CSS variables

/* Secret Passage to Salt Mountain — https://swatchly.xyz/palette/392b00-833133-5b77c0-eab4b3-d9f9fe */
:root {
  --secret-passage: #392b00;
  --dockside-red: #833133;
  --flood: #5b77c0;
  --deeply-embarrassed: #eab4b3;
  --salt-mountain: #d9f9fe;
}

Tailwind CSS v4

/* Secret Passage to Salt Mountain — https://swatchly.xyz/palette/392b00-833133-5b77c0-eab4b3-d9f9fe */
@theme {
  --color-secret-passage: #392b00;
  --color-secret-passage-50: #fef5dc;
  --color-secret-passage-100: #f5ebcf;
  --color-secret-passage-200: #e3d7b6;
  --color-secret-passage-300: #cec09b;
  --color-secret-passage-400: #af9f77;
  --color-secret-passage-500: #928259;
  --color-secret-passage-600: #766740;
  --color-secret-passage-700: #5d502c;
  --color-secret-passage-800: #483c1d;
  --color-secret-passage-900: #392b00;
  --color-secret-passage-950: #211a08;
  --color-dockside-red: #833133;
  --color-dockside-red-50: #fff1f1;
  --color-dockside-red-100: #ffe4e2;
  --color-dockside-red-200: #ffc6c3;
  --color-dockside-red-300: #f8a6a3;
  --color-dockside-red-400: #da8280;
  --color-dockside-red-500: #bd6564;
  --color-dockside-red-600: #9d4a4a;
  --color-dockside-red-700: #833133;
  --color-dockside-red-800: #662628;
  --color-dockside-red-900: #511b1c;
  --color-dockside-red-950: #350e0f;
  --color-flood: #5b77c0;
  --color-flood-50: #eef3ff;
  --color-flood-100: #dce7ff;
  --color-flood-200: #bdd1ff;
  --color-flood-300: #9ab7fc;
  --color-flood-400: #7795df;
  --color-flood-500: #5b77c0;
  --color-flood-600: #455fa3;
  --color-flood-700: #344a87;
  --color-flood-800: #27396f;
  --color-flood-900: #1c2c59;
  --color-flood-950: #101b3c;
  --color-deeply-embarrassed: #eab4b3;
  --color-deeply-embarrassed-50: #fff3f3;
  --color-deeply-embarrassed-100: #ffe6e6;
  --color-deeply-embarrassed-200: #f7cecd;
  --color-deeply-embarrassed-300: #eab4b3;
  --color-deeply-embarrassed-400: #c79594;
  --color-deeply-embarrassed-500: #ab7978;
  --color-deeply-embarrassed-600: #8e5e5e;
  --color-deeply-embarrassed-700: #734949;
  --color-deeply-embarrassed-800: #5c3737;
  --color-deeply-embarrassed-900: #482929;
  --color-deeply-embarrassed-950: #2e1818;
  --color-salt-mountain: #d9f9fe;
  --color-salt-mountain-50: #d9f9fe;
  --color-salt-mountain-100: #d9edf0;
  --color-salt-mountain-200: #c3dbde;
  --color-salt-mountain-300: #abc5c9;
  --color-salt-mountain-400: #8aa7ab;
  --color-salt-mountain-500: #6e8c90;
  --color-salt-mountain-600: #557276;
  --color-salt-mountain-700: #415a5e;
  --color-salt-mountain-800: #30474a;
  --color-salt-mountain-900: #23373a;
  --color-salt-mountain-950: #142224;
}